jQuery插件文本编辑器样式的选择?
-
23-09-2019 - |
题
我试图做到的,是使用jQuery的你在一个典型的文本编辑器中看到的文本选择功能模仿的行为,除了没有选择文本,我想选择<div>
s的多行。然而,到目前为止,我已经找到了jQuery的唯一的“选择”插件运作的基础上矩形套索模型。特别是,我使用jQueryUI的可选插件。看什么我谈论,考虑以下2个图像:
<强>理想插件行为(没有套索)强> http://img709.imageshack.us/img709/5664/selectableidealthumb.png
您也可以去这里这个确切的例子来打。这是否实现了这个插件的有人知道吗?这将节省我从程序到黑客或黑客解决这个插件来得到我想要的......
P / S:在我的应用程序的每一行都将含有多达150个左右的div,并且每个DIV将具有在其内的几个的div。我曾尝试手卷我自己的选择,但只是一个单一的线打交道时,它是缓慢均匀。我目前使用这个插件,因为它的很多比我写的更好的性能。
解决方案
也许你已经有了自己的脚本,但我优化和改进煤矿很多。它增加了的或需要移除了类只时,它是非常适合的性能。
此外,它有一些方法可能有用的:
var sR = $('#selectable').selectableRange({
/* Alternatively, you could overwrite default options
classname: 'active',
log: false,
logElement: $('#log'),
nodename: 'LI'*/
});
// Initialize the selectable so it works
sR.init();
// You can always change options like this:
$('#logOnOff').click(function(){
// Toggle log
sR.options.log = (sR.options.log) ? false : true;
});
// Also you can use this methods:
// sR.deselect()
// sR.destroy()
// sR.getSelectedItems()
其他提示
也许这可以在某种程度上优化,我却只能在Chrome的测试,但我认为它会在其他浏览器工作了。没有为这种需要jQuery的用户界面的,它的手作出;)
$(function() {
var selectableLi = $('#selectable li');
selectableLi.mousedown(function(){
var startIndex, endIndex, mouseUpOnLi = false;
// When dragging starts, remove classes active and hover
selectableLi.removeClass('active hover');
// Give the element where dragging starts a class
$(this).addClass('active');
// Save the start index
startIndex = $(this).index();
// Bind mouse up event
selectableLi.bind('mouseup', function(){
// Mouse up is on a li-element
mouseUpOnLi = true;
$(this).addClass('active');
// Remove the events for mouseup, mouseover and mouseout
selectableLi.unbind('mouseup mouseover mouseout');
// Store the end index
endIndex = $(this).index();
// Swap values if endIndex < startindex
if(endIndex < startIndex){
var tmp = startIndex;
startIndex = endIndex;
endIndex = tmp;
}
// Give the selected elements a colour
for(i=startIndex; i<=endIndex; i++){
$(selectableLi[i]).addClass('active');
}
}).bind('mouseover', function(){
// Give elements a hover class when hovering
$(this).addClass('hover');
}).bind('mouseout', function(){
// Remove the hover class when mouse moves out the li
$(this).removeClass('hover');
});
$(document).bind('mouseup', function(e){
// When mouse up is outside a li-element
if(!mouseUpOnLi){
selectableLi.removeClass('active');
}
$(this).unbind('mouseup');
});
}).attr("unselectable","on").css("MozUserSelect","none").bind("selectstart",function(){return false});
});
我有一个 例如在线 。请注意,选择项目时没有背景色;我认为这将提供更好的性能。
<强> UPDATE - 实施例2 强>
我更新它,以便选择是可见的,而选择:
var selectableLi;
function colourSelected(a, b, Class){
selectableLi.removeClass(Class);
// Swap values if a > b
if(a > b){
var tmp = a;
a = b;
b = tmp;
}
// Give the selected elements a colour
for(i=a; i<=b; i++){
$(selectableLi[i]).addClass(Class);
}
}
$(function() {
selectableLi = $('#selectable li');
selectableLi.mousedown(function(){
var startIndex, endIndex, mouseUpOnLi = false;
// When dragging starts, remove classes active and hover
selectableLi.removeClass('active hover');
// Give the element where dragging starts a class
$(this).addClass('active');
// Save the start index
startIndex = $(this).index();
// Bind mouse up event
selectableLi.bind('mouseup', function(){
// Mouse up is on a li-element
mouseUpOnLi = true;
$(this).addClass('active');
// Remove the events for mouseup, mouseover and mouseout
selectableLi.unbind('mouseup mouseover mouseout');
colourSelected(startIndex, $(this).index(), 'active');
}).bind('mouseover mouseout', function(){
// Give elements a hover class when hovering
colourSelected(startIndex, $(this).index(), 'hover');
});
$(document).bind('mouseup', function(e){
// When mouse up is outside a li-element
if(!mouseUpOnLi){
selectableLi.removeClass('active hover');
}
$(this).unbind('mouseup');
selectableLi.unbind('mouseover mouseout');
});
}).attr("unselectable","on").css("MozUserSelect","none").bind("selectstart",function(){return false});
});
再次也许这代码可以以某种方式进行性能优化。
我会使用jQuery功能使我自己的版本。
首先,接口的事件为 “停止”(或许象序列化 HTTP:// jqueryui.com/demos/selectable/#serialize )
然后看看它的ID我回来后,最高和最低会给我足够简单“为...下一步”循环遍历剩余对象。
我知道它的修复程序/黑客的解决方案,但似乎从我的角度解决问题,它是有用的,你还是你需要的代码吗?只是想先用algoritmic思想提供。 :O)