Пользовательский интерфейс jQuery: динамическое добавление нескольких выбираемых элементов в представление ASP.NET Razor - PullRequest
Новая
       25

Пользовательский интерфейс jQuery: динамическое добавление нескольких выбираемых элементов в представление ASP.NET Razor

0 голосов
/ 25 февраля 2012

Я пытаюсь динамически добавить более одного jQuery, выбираемого для вида бритвы:

Так что я не могу использовать: 

  $("#selectable").selectable();

в качестве идентификатора для каждого элемента, который будет сделан выбираемым, будет что-то вроде selectable_x, где x - целое число. Сценарий для создания выбираемых элементов выглядит следующим образом: 

function getAccordianElement(selectableId, startIdx, endIdx, routes, makeSelectable) {   


        var selectableDiv = $('<div></div>');
        var selectable = $('<ol id=' + selectableId  + '></ol>');
        selectable.addClass("selectable-container");
        selectableDiv.append(selectable);

        for (var i = startIdx; i < endIdx; i++) {
            selectable.append($('<li/>', { "class": "ui-state-default", text: routes[i].Name }));
        };

        if (makeSelectable) {
           selectable.selectable();
        }


        return selectableDiv;
    }

и стиль CSS, который я пытаюсь использовать, выглядит следующим образом: 

   .selectable-container.ui-selecting { background: #FECA40; }
    .selectable-container.ui-selected { background: #F39814; color: white; }
 /* ol[id^="selectable_"] .ui-selected { background: #F39814; color: white; } */
    .selectable-container { list-style-type: none; margin: 0; padding: 0; }
    .selectable-container li { margin:1px ; padding: 1px; float: left; width: 27px; height: 25px; font-size: 1em; text-align: center; }

Элементы создаются, но стили CSS для ui-selection и ui-selected классов не применяются.

Идеи с благодарностью.

ТИА.

Ответы [ 2 ]

0 голосов
/ 26 февраля 2012

Приведенный выше код работает для динамического создания нескольких выбираемых jQuery на одной странице.Проблема с приведенным выше кодом - это правило CSS, используемое для поиска этих выбираемых элементов и применения соответствующего выбора и выбранных стилей.Нарушены следующие правила: 

 .selectable-container.ui-selecting { background: #FECA40; } 
    .selectable-container.ui-selected { background: #F39814; color: white; }

Когда я изменил эти правила на: 

ol[id^="selectable_"] .ui-selecting { background: #FECA40; }
ol[id^="selectable_"] .ui-selected { background: #F39814; color: white; }

, поскольку каждому выбираемому присвоен идентификатор «selectable_x», где x - целое число, стильуспешно применен.

0 голосов
/ 25 февраля 2012

Вместо использования идентификатора (например, $("#selectable")) вы можете использовать класс (например, $(".selectable"))

...