JavaScript / jQuery / jQuery UI Выпадающий список Выберите для порядка элементов - PullRequest
Новая
       24

JavaScript / jQuery / jQuery UI Выпадающий список Выберите для порядка элементов

0 голосов
/ 09 августа 2011

Я хочу создать раскрывающийся список JavaScript / jQuery / jQuery UI для упорядочения элементов в моем приложении CMS. Я использовал form с элементом select, который публикует сообщения при изменении элемента select, но мне нужно применить эту функциональность к элементам form, а попытка вложения форм создает всевозможные проблемы.

Я думал, что мог бы добавить такой элемент в каждый элемент, а затем создать какой-то элемент управления из него: 

<div class="order"
        data-action="[url to POST to]"
        data-return="[url to redirect to after POST]"
        data-max="[maximum order value, min assumed to be 1]">
    [value of current order]
</div>

Я провел некоторые поиски, но не нашел ничего похожего на то, что я ищу.

UPDATE

Я нашел этот плагин jQuery SelectBox , который выглядит красиво, но для него все еще требуется, чтобы элементы формы находились в источнике.

Начиная с этой разметки: 

<div class="order"
        data-action="/block/order"
        data-return="/p/1/home#block_1"
        data-max="3">
    1
</div>

Я ожидаю, что JavaScript сделает что-то вроде этого: 

<div class="order"
        data-action="/block/order"
        data-return="/p/1/home#block_1"
        data-max="3">
    1
</div>
<ol class="orderSelect">
    <li class="selected">1</li>
    <li>2</li>
    <li>3</li>
</ol>

Использование JavaScript / CSS, чтобы он вел себя как элемент select, делая запрос POST при выборе другого значения. Я не ищу решение AJAX.

Я не ожидаю полного решения, но указатель в правильном направлении.

1 Ответ

1 голос
/ 10 августа 2011

хаха, мой код занимает много времени на работе, поэтому не беспокойтесь о длине моей последней идеи!Итак, я представляю себе страницу, полную всех видов ваших блоков, с разными значениями: 

    <div class="order"
        data-action="/block/order"
        data-return="/p/1/home#block_1"
        data-max="3">
     1
     </div>

, и вы хотите, чтобы эти блоки запускали JS для создания «чего-то», подобного этому: 

<ol class="orderSelect">
    <li class="selected">1</li>
    <li>2</li>
    <li>3</li>
</ol>

все в порядке, приведенный ниже код укажет вам правильное направление создания «старых» блоков, которые вы хотите.

    <script>
    $(document).ready(function(){
    //only clone() these un-attached elements, or var re-use may go out the window
      var masterContainerObj = $("<ol class='orderSelect'></ol>");
      var masterContainerItemObj = $("<li></li>");
    //get all your div objects that have the data we want
      $(".order").each(function(index, elem){
        var newContainer = masterContainerObj.clone();
        var max = $(this).attr("data-max");
        for( var i = 1; i <=max; i++){
          var item = masterContainerItemObj.clone();
          item.text(i);
          if(i == $(this).text()){
            item.addClass("selected");
          }
/* add your data for this select item here, or, attach it to the newContainer, i leave that to you*/
          newContainer.append(item);
        }
        $(this).after(newContainer);
      });
    });
    </script>
...