WedX - журнал о программировании и компьютерных науках

Получить кнопку, которая появится рядом с элементом в KendoComboBox при наведении

Я пытаюсь отобразить кнопку справа от элемента в списке KendoComboBox, на который в данный момент наведен курсор. Это возможно? Как мне это сделать?

(Конечная цель состоит в том, что при нажатии этой кнопки текст соответствующего элемента должен стать редактируемым полем.)

Я начал со следующей демонстрации и просмотрел documentation, но я не могу найти упоминания о появлении всплывающей кнопки рядом с элементом в список (почти как боковое всплывающее меню с единственным элементом, кнопкой, для каждого элемента в KendoComboBox).

Я включил свой текущий код прототипирования ниже. Я могу сделать так, чтобы «licenseHoverButton» отображался в элементе списка, но я не уверен, как сделать так, чтобы он отображался рядом.

<html>
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>

    <div id="example" class="k-content">

        <div class="demo-section">
            <h2>Licenses</h2>
            <input id="licenses" style="width: 400px;"/>
        </div>

        <script id="template" type="text/x-kendo-tmpl">
            <div class="licenseListItem">
                # if (data.expired) { #
                    <p class="licenseName">#=data.name# (Expired)</p>
                    <button class="licenseHoverButton">Remove</button>
                #} else { #
                    <p class="licenseName">#=data.name#</p>
                    <button class="licenseHoverButton">Rename</button>
                #} #
                <p class="licenseUsage">#=data.remaining#/#=data.total#GB</p>

            </div>
        </script>

        <script>
            $(document).ready(function() {

                var mydata = [{ "name":"License Name", "remaining":"24", "total":"60", "expired":false},
                                { "name":"1234-1234-1234-1234", "remaining":"60", "total":"60", "expired":false},
                                { "name":"Old License Name", "remaining":"2", "total":"60", "expired":true}];
                $("#licenses").kendoComboBox({
                    dataTextField: "name",
                    dataValueField: "name",
                    filter:"startswith",
                    template: kendo.template($("#template").html()),
                    dataSource: mydata
                });

                var combobox = $("#licenses").data("kendoComboBox");
            });

        </script>

        <style scoped>                
            .demo-section {
                width: 400px;
                padding: 30px;
            }
            .demo-section h2 {
                text-transform: uppercase;
                font-size: 1.2em;
                margin-bottom: 10px;
            }
            #licenses-list .k-item {
                overflow: hidden;
            }
            #licenses-list .k-item .licenseHoverButton{
                display: none;
            }
            #licenses-list .k-item.k-state-hover .licenseHoverButton {
                display: block;
            }
            #licenses-list .k-item.k-state-hover .licenseUsage {
                display: none;
            }
            #licenses-list p {
                margin: 0;
            }
        </style>
    </div>

</body>
</html>

Ответы:


1

Как насчет использования всплывающей подсказки? https://jsfiddle.net/vojtiik/BfyPf/1/ (кнопка "удалить" чтобы он соответствовал элементу, но это не то, что вы после того, как я догадываюсь?)

 <script id="btnTemplate" type="text/x-kendo-template">
                 <button class="licenseHoverButton">Rename</button>
    </script>

  var tooltip = $('.licenseName').kendoTooltip({
      position: "right",
       content: kendo.template($("#btnTemplate").html())
  }).data("kendoTooltip");
02.08.2013
  • К сожалению, нажатие кнопки закрывает поле со списком. Можно ли оставить раскрывающийся список открытым, чтобы я мог редактировать текст элемента? (Я имею в виду конечную цель, которую я упомянул в своем первоначальном вопросе) 02.08.2013
  • Подсказка не является полезным результатом, поскольку я не могу добавить обработчик щелчка к кнопке, которая находится в подсказке. Попробуйте добавить следующие строки в свою скрипку и посмотрите, что я имею в виду. $('.licenseHoverButton').on('click', function(e) { alert('clicked'); }); 07.08.2013
  • Новые материалы

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

    ИИ в аэрокосмической отрасли
    Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..


    Для любых предложений по сайту: [email protected]