无需选择框即可选择的jQuery UI [英] jQuery UI Selectable Without Selection Box
问题描述
在此给出示例: http://jqueryui.com/selectable/#display-grid 我要进行选择，但不要单击"n拖动"时出现选择框".即，当我单击数字5并拖动到数字6，然后拖动到10时，我得到以下信息:
实际上我要从5拖到6到10，只选择它们而不选择9.
我搜索了文档，但找不到该选项，而我的Google技能也没有给我带来任何运气，我认为这一定已经完成了，只是这样，碰巧我无法自己掌握或找到一个现有的解决方案，因此这里的任何帮助将不胜感激(不是说您应该为我做研究，而是希望有人之前对此进行过处理，以便他可以为我指明正确的方向).
这也可能是我缺少尝试通过jquery UI完成此操作的要点，但这是我发现的第一个这样的示例，它适合(有点)我想要完成的事情.
首先，您可能希望隐藏.ui-selectable-helper或更改CSS:
.ui-selectable-helper{display:none;}
下一步，执行以下操作:
$(function() {
var _mousedown = false;
$('#selectable').selectable({
start: function(event,ui){
_mousedown=true;
},
stop: function(event,ui){
_mousedown=false;
$('.ui-selected').removeClass('ui-selected');
$('.selecting').addClass('ui-selected');
},
selecting: function(event,ui){
if($('.ui-selecting').length == 1)
$(ui.selecting).addClass('selecting');
$('.ui-selecting').removeClass('ui-selecting');
$('.selecting').addClass('ui-selecting');
},
unselecting: function(event,ui){
if($(ui.unselecting).hasClass('selecting'))
$(ui.unselecting).removeClass('selecting');
}
});
$('#selectable').on('mouseenter', '.ui-selectee', function(){
if(_mousedown)
$(this).addClass('selecting');
});
});
演示: http://jsfiddle.net/dirtyd77/7UVNS/5/(帮助隐藏)
http://jsfiddle.net/dirtyd77/7UVNS/6/(对人有帮助)
让我知道您是否有任何疑问！
***更新:***
.selectable()无法执行您想要的操作.但是，这是我创建的.希望对您有帮助！
JAVASCRIPT:
$(function() {
var _mousedown = false,
_last=null;
$('#selectable li').mousedown(function(){
_mousedown = true;
$('.ui-selected').removeClass('ui-selected');
$('#selectable li').attr('unselectable', 'on').css('user-select', 'none');
$(this).addClass('ui-selecting');
}).mouseup(function(){
_mousedown=false;
$('.ui-selecting').addClass('ui-selected').removeClass('ui-selecting');
$('#selectable li').removeAttr('unselectable style');
}).mouseenter(function(){
if(_mousedown){
if($(this).hasClass('ui-selecting'))
$(_last).removeClass('ui-selecting');
$(this).addClass('ui-selecting')
}
}).mouseleave(function(){
if(_mousedown){
_last = $(this)[0];
$(this).addClass('ui-selecting');
}
});
});
演示: http://jsfiddle.net/dirtyd77/7UVNS/9/
***更新#2:***
如果要在移动设备上使用此格式，建议您完全更改格式以避免任何可能的陷阱.这是我的处理方法:
JAVASCRIPT:
$(function() {
var _clicked = false;
$('#btn_select').click(function(){
_clicked = false;
$(this).hide();
$('#selectable li').removeAttr('unselectable style');
$('.ui-selecting').addClass('ui-selected').removeClass('ui-selecting');
});
$('#selectable li').click(function(){
if(!_clicked){
_clicked = true;
$('.ui-selected').removeClass('ui-selected');
$('#selectable li').attr('unselectable', 'on').css('user-select', 'none');
$('#btn_select').show();
}
if($(this).hasClass('ui-selecting')){
$(this).removeClass('ui-selecting');
}else{
$(this).addClass('ui-selecting');
}
});
});
*注意:您可能希望$('body').click()充当end_selection按钮.
演示: http://jsfiddle.net/dirtyd77/7UVNS/13/
Given this example here: http://jqueryui.com/selectable/#display-grid I would like to make a selection without the "selection box" that appears when you click 'n drag. Namely, when I click on number 5 and drag to number 6 and then to 10 I get this:
where in fact what i would like to is drag from 5 to 6 to 10 and have only them selected without 9.
I searched the docs and couldn't find that option, and my google skills didn't bring me any luck, and I thought this must have been already done it's just so happens I can't grasp it on my own or find an existing solution, so any help here is appreciated (not saying you should do the research for me, am just hoping someone dealt with this before so he can point me to the right direction).
It also could be I'm missing the point in trying to accomplish this with jquery UI but this was the first such example I found that fits (kind of) what I want to accomplish.
First, you might want to hide .ui-selectable-helper or change the CSS:
.ui-selectable-helper{display:none;}
Next, do something like this:
$(function() {
var _mousedown = false;
$('#selectable').selectable({
start: function(event,ui){
_mousedown=true;
},
stop: function(event,ui){
_mousedown=false;
$('.ui-selected').removeClass('ui-selected');
$('.selecting').addClass('ui-selected');
},
selecting: function(event,ui){
if($('.ui-selecting').length == 1)
$(ui.selecting).addClass('selecting');
$('.ui-selecting').removeClass('ui-selecting');
$('.selecting').addClass('ui-selecting');
},
unselecting: function(event,ui){
if($(ui.unselecting).hasClass('selecting'))
$(ui.unselecting).removeClass('selecting');
}
});
$('#selectable').on('mouseenter', '.ui-selectee', function(){
if(_mousedown)
$(this).addClass('selecting');
});
});
DEMO: http://jsfiddle.net/dirtyd77/7UVNS/5/ (HELPER HIDDEN)
http://jsfiddle.net/dirtyd77/7UVNS/6/ (HELPER VISIBLE)
Let me know if you have any questions!
***UPDATE:***
.selectable() is not able to do what you are looking for. However, here is something I created. Hope it helps!
JAVASCRIPT:
$(function() {
var _mousedown = false,
_last=null;
$('#selectable li').mousedown(function(){
_mousedown = true;
$('.ui-selected').removeClass('ui-selected');
$('#selectable li').attr('unselectable', 'on').css('user-select', 'none');
$(this).addClass('ui-selecting');
}).mouseup(function(){
_mousedown=false;
$('.ui-selecting').addClass('ui-selected').removeClass('ui-selecting');
$('#selectable li').removeAttr('unselectable style');
}).mouseenter(function(){
if(_mousedown){
if($(this).hasClass('ui-selecting'))
$(_last).removeClass('ui-selecting');
$(this).addClass('ui-selecting')
}
}).mouseleave(function(){
if(_mousedown){
_last = $(this)[0];
$(this).addClass('ui-selecting');
}
});
});
DEMO: http://jsfiddle.net/dirtyd77/7UVNS/9/
***UPDATE #2:***
If you want to use this on a mobile device, I recommend changing up the format entirely to avoid any possible pitfalls. Here is how I would go about it:
JAVASCRIPT:
$(function() {
var _clicked = false;
$('#btn_select').click(function(){
_clicked = false;
$(this).hide();
$('#selectable li').removeAttr('unselectable style');
$('.ui-selecting').addClass('ui-selected').removeClass('ui-selecting');
});
$('#selectable li').click(function(){
if(!_clicked){
_clicked = true;
$('.ui-selected').removeClass('ui-selected');
$('#selectable li').attr('unselectable', 'on').css('user-select', 'none');
$('#btn_select').show();
}
if($(this).hasClass('ui-selecting')){
$(this).removeClass('ui-selecting');
}else{
$(this).addClass('ui-selecting');
}
});
});
*NOTE: you might want a $('body').click() to act as the end_selection button.
DEMO: http://jsfiddle.net/dirtyd77/7UVNS/13/
这篇关于无需选择框即可选择的jQuery UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
