Выбирайте элементы списка при загрузке страницы с помощью JQuery UI Selectable

Я пытаюсь настроить список элементов, которые можно выбрать, и хотел бы иметь некоторые элементы списка, которые уже были выбраны при загрузке страницы. Пользователь должен иметь возможность выбирать несколько элементов (чтобы эта часть работала), но должна быть в состоянии отменить выбор предварительно выбранных элементов в списке ... как если бы пользователь первоначально нажал на них, чтобы выбрать их. Спасибо за любые советы вы можете give-Выбирайте элементы списка при загрузке страницы с помощью JQuery UI Selectable

Javascript:

$(function() { 
    $("#selectable").bind("mousedown", function(e) {  //acts as if the control key is pressed so that more than one item can be selected 
    e.metaKey = true; 
    }).selectable(); 
});

Стиль:

#selectable .ui-selecting { background: #FECA40; } 
#selectable .ui-selected { background: #F39814; color: white; } 
#selectable { list-style-type: none; margin: 0; padding: 0; width: 10%; overflow:auto;} 
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

HTML

<ol id="selectable" > 
    <li class="ui-widget-content" value="SU12AM">12:00AM</li>  
    <li class="ui-widget-content" value="SU125AM">12:30</li> 
    <li class="ui-widget-content" value="SU1AM">1:00</li> 
    <li class="ui-widget-content" value="SU15AM">1:30</li> 
    <li class="ui-widget-content" value="SU2AM">2:00</li> 
    <li class="ui-widget-content" value="SU25AM">2:30</li> 
    <li class="ui-widget-content" value="SU3AM">3:00</li> 
</ol>

источник

2013-08-29 Matt Ellis

Как вы выбираете? Каковы критерии для этого? –

Мой план состоит в том, чтобы передать данные с последнего посещения страницы со списком выбранных значений. Поэтому после их выбора значения публикуются с помощью ajax, чтобы сохранить их для посещения следующей страницы. (Я не включил часть для публикации, потому что это работает нормально.) –

Нашел ответ в этом посте: http://stackoverflow.com/questions/861589/jquery-selectable-how-to-make-items-selected- at-1st-load –

<html lang="en"> 
<head> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script> 
jQuery(function() { 
    $(".ui-widget-content").bind("mousedown", function(e) { 
    var element = $(e.target); 
    if (element.hasClass('selected')) { 
     element.removeClass("selected"); 
    } 
    else{ 
    element.addClass("selected"); 
    } 
    }); 
}); 


</script> 
<style> 
#selectable .ui-selecting { background: #FECA40; } 
#selectable .ui-selected { background: #F39814; color: white; } 
#selectable { list-style-type: none; margin: 0; padding: 0; width: 10%; overflow:auto;} 
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } 
.selected { background: #0014FF; } 
</style> 
</head> 
<body> 
<ol id="selectable" > 
    <li class="ui-widget-content" value="SU12AM">12:00AM</li>  
    <li class="ui-widget-content" value="SU125AM">12:30</li> 
    <li class="ui-widget-content" value="SU1AM">1:00</li> 
    <li class="ui-widget-content" value="SU15AM">1:30</li> 
    <li class="ui-widget-content" value="SU2AM">2:00</li> 
    <li class="ui-widget-content" value="SU25AM">2:30</li> 
    <li class="ui-widget-content" value="SU3AM">3:00</li> 
</ol> 


</body> 
</html>

Пробуйте этот код, я надеюсь его помощь

источник

2013-08-29 21:59:59

Спасибо Michal - как я могу установить, какой элемент списка будет предварительно выбран при загрузке кодом? (Извините, я noobie) –

Выбирайте элементы списка при загрузке страницы с помощью JQuery UI Selectable

ответ

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