我为此代码使用 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 并选择它。还是不行。
有什么帮助吗？