JQuery UI: динамическое добавление нескольких selectables к мнению ASP.NET Razor

Я пытаюсь динамически добавлять более одного Выбирается JQuery на вид бритвы:JQuery UI: динамическое добавление нескольких selectables к мнению ASP.NET Razor

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

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

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

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-выбора и ui-selected classes не применяются.

Идеи очень ценятся.

TIA.

источник

2012-02-25 Klaus Nji

Что вы подразумеваете под * Так что я не могу использовать $ ("# selectable"). Selectable(); *? Вы не хотите использовать это или вы не можете использовать это? –

Мне нужно сделать более одного элемента, который можно выбрать. $ («# selectable») ищет один элемент с идентификатором «selectable». Но элементы, которые я хочу сделать selectable, имеют идентификаторы «selectable_0», «selectable_1» .... –

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

источник

2012-02-25 14:28:42

Я применяю класс .selectable-container к выбираемым элементам, которые я программно создаю. Следовательно, строка if (makeSelectable) { selectable.selectable(); }. Кроме того, элементы преобразуются в selectables, но мой стиль не применяется. –

Только что нашел ответ на мою проблему. Выбираемые объекты создаются, но стиль не может быть применен, поэтому я изменил сломанные правила CSS на ol [id^= "selectable_"] .ui-selection {background: # FECA40; } ol [id^= "selectable_"] .ui-selected {background: # F39814; белый цвет; } и это сделало трюк. –

Приведенный выше код работает в динамическом создании нескольких selectables 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», где х представляет собой целое число, моделирование было успешно применено.

источник

2012-02-26 05:30:23

JQuery UI: динамическое добавление нескольких selectables к мнению ASP.NET Razor

ответ

Смежные вопросы