Выбор интерфейса пользователя JQuery: предварительный выбор элемента списка - PullRequest
Новая
       7

Выбор интерфейса пользователя JQuery: предварительный выбор элемента списка

1 голос
/ 10 декабря 2011

Я пытаюсь реализовать щелчок по первому элементу списка выбора. Я могу добавить CSS но не удается заставить событие click работать, когда я пытаюсь предварительно выбрать первый элемент (так как щелчок необходим, событие onclick имеет вызов ajax для заполнения связанной информацией о другом элементе div). Я даже пытался использовать метод триггера, но не смог заставить его работать с первым элементом в списке. Код стандартный материал. 

    <ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
     <ol>

Функция Jquery 

        $(function() {
        $( "#selectable" ).bind("mousedown", function (e) {
            e.metaKey = false;
        }).selectable({
             selected: function(event, ui) {

                 alert("selected");

             },
            stop: function() {
                var result = $( "#select-result" ).empty();
                $( ".ui-selected", this ).each(function() {
                    var index = $( "#selectable li" ).index( this );
                    result.append( " #" + ( index + 1 ) );
                });
            }
        });
    });

Я могу применить CSS к первому элементу списка, как это 

    $('li:first-child').select().addClass("ui-selected");

Но я не могу заставить работать функцию щелчка (щелчок вызовет «выбранный» анонимный обратный вызов.) Любые указатели будут полезны /.

1 Ответ

3 голосов
/ 13 декабря 2011

После некоторых попыток мне удалось заставить его работать. Размещение решения, поскольку оно может быть полезным. Я хочу смоделировать щелчок мышью по первому элементу в списке выбора. Для этого сначала нужно связать 

$( "#selectable" ).bind( "selectableselected", function(event, ui) {

    $( ".ui-selected", this ).each(function() {
    var index = $( "#selectable li" ).index( this );
    alert("test");


    });
    });

После того, как вы это сделаете, мы должны запустить клик. Я помещаю это в обратный вызов create, который вызывается, как только формируется селектируемый. 

    create: function(event, ui) {
            setTimeout( function() {
    $('li:firstchild').addClass("uiselected").trigger('selectableselected');

            }, 100 );

Самое замечательное в Jquery - это то, что он настолько интуитивен.

...