http://jqueryui.com/demos/selectable/#display-grid
我正在使用Jquery Selectable(上面的链接),但用户必须按住控制按钮才能选择多个项目...无论如何用户可以选择多个项目而无需按住控制按钮?
换句话说:我希望用户能够通过单击选择任何项目,然后再次单击取消选择。
有什么想法吗?
答案 0 :(得分:1)
你可以在mousedown上设置metaKey
来模拟 Ctrl 被按下:
$('#selectable').bind("mousedown", function(e) {
e.metaKey = true;
}).selectable();
请参阅此DEMO。
答案 1 :(得分:0)
从链接上的示例中,您可以修改脚本以将元素更改为切换
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; }
#selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
</style>
<script>
$(function() {
$('#selectable li').bind('mouseup', function(e) {
$(e.target).removeClass('ui-selecting');
var selected = $(e.target).attr('data-selected');
if (selected) {
$(e.target).attr('data-selected', null);
} else {
$(e.target).addClass('ui-selected');
$(e.target).attr('data-selected', true);
}
});
$('#selectable li').bind('mousedown', function(e) {
$(e.target).removeClass('ui-selected');
$(e.target).addClass('ui-selecting');
});
});
</script>