javascript - 当有两个列表时使用 chui.js $.UIDeletable

Question

我正在为此代码使用 chui.js ( http://chocolatechip-ui.com ) 框架

http://jsfiddle.net/qhoc/fjKx3/2/

它应该是 2 个屏幕:左边的可以使用 $.UISlideout() 滑出。我希望仅的左侧屏幕有“编辑”按钮，但似乎 $.UIDeletable 应用于两个屏幕中的两个列表。

HTML:

<nav>
  <h1>Page Name</h1>
</nav>
<article>
  <section>
    <ul class='list'>
      <li class='comp'>
        <aside>
          <img width="48px" src='http://www.mediabistro.com/alltwitter/files/2009/09/twitter_new_default_avatar.png' />
        </aside>
        <div>
          <h3>Item 1</h3>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum mass</p>
        </div>
      </li>
      <li class='comp'>
        <aside>
          <img width="48px" src='http://www.mediabistro.com/alltwitter/files/2009/09/twitter_new_default_avatar.png' />
        </aside>
        <div>
          <h3>Item 2</h3>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum mass</p>
        </div>
      </li>
      <li class='comp'>
        <aside>
          <img width="48px" src='http://www.mediabistro.com/alltwitter/files/2009/09/twitter_new_default_avatar.png' />
        </aside>
        <div>
          <h3>Item 3</h3>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum mass</p>
        </div>
      </li>
      <li class='comp'>
        <aside>
          <img width="48px" src='http://www.mediabistro.com/alltwitter/files/2009/09/twitter_new_default_avatar.png' />
        </aside>
        <div>
          <h3>Kiss</h3>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum mass</p>
        </div>
      </li>
      <li class='comp'>
        <aside>
          <img width="48px" src='http://www.mediabistro.com/alltwitter/files/2009/09/twitter_new_default_avatar.png' />
        </aside>
        <div>
          <h3>Item 4</h3>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum mass</p>
        </div>
      </li>
    </ul>
  </section>
</article>
<div class='hidden' id='list-temp'>
  <h2>
    Your List
  </h2>
  <ul class='list' id='my-list'>
    <li>
      <h3>Item A</h3>
    </li>
    <li>
      <h3>Item B</h3>
    </li>
    <li>
      <h3>Item C</h3>
    </li>
    <li>
      <h3>Item D</h3>
    </li>
  </ul>
</div>

JS:

$(function() {
    $.UISlideout();
    $('.slide-out > section').append($('#list-temp').html());

    $.UIDeletable({
        list: '.list', 
        callback: function(item) {
            var text = $(item).siblings('h3').text();
            console.log(text);
        }
    });

});

我试图将左侧列表更改为某个#id 并选择它。还是不行。

有什么帮助吗？

Answer 1

我决定放弃 chocolatechip-ui，因为它要么是全新的，要么被废弃了，包括创始人在内的任何人都没有答案。

Square UI 轻松解决了这个问题:

https://github.com/ququplay/jquery-mobile-square-ui-theme