jQuery的可选定制 [英] jQuery Selectable Customization
本文介绍了jQuery的可选定制的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个jQuery选择，如下图所示。它实际上是一个有序列表。有序列表位于一个名为myBorderDiv DIV中。
I have a jQuery selectable as shown below. It is actually an ordered list. The ordered list is residing inside a div named myBorderDiv.
在我的项目preSS控制和鼠标，所有的人都得到了不想要的效果（在IE8）如下图所示的图像中。如何克服呢？
When I press control and mouse over on the items, all of them get a unwanted effect (in IE8) as shown in the image below. How to overcome this?
<html xmlns="http://www.w3.org/1999/xhtml">
<title></title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/sunny/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
//Make it as selectable
$("#myOrderedListSelecatableAsHeaderPart").selectable();
//selectablestop Event Handler
$("#myOrderedListSelecatableAsHeaderPart").bind("selectablestop", function (event) {
var test= "";
$(".ui-selected", this).each(function () {
test+= this.getAttribute("Categoryid") + ",";
});
});
$("button, input:submit").button()
$("button#selectall").click(function (event) {
//When select all button clicked
//Add css class
$("#myOrderedListSelecatableAsHeaderPart li").addClass("ui-selected");
//Trigger the selectablestop event and preventDefault
$("#myOrderedListSelecatableAsHeaderPart").trigger("selectablestop");
event.preventDefault();
});
});
</script>
<style type="text/css">
#myOrderedListSelecatableAsHeaderPart .ui-selected
{
background: #F39814;
color: white;
}
#myOrderedListSelecatableAsHeaderPart
{
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
#myOrderedListSelecatableAsHeaderPart li
{
margin: 3px;
height: 18px;
padding: 3px; /*Display list items in blobk */
display: inline-block;
}
</style>
</head>
<body>
<div>
<h3>
Hold control and click to select multiple items
</h3>
<div>
<div id="myBorderDiv" style="border: 1px solid brown; width:375px;">
<ol id="myOrderedListSelecatableAsHeaderPart" >
<li categoryid="2" class="ui-widget-content">Apple </li>
<li categoryid="4" class="ui-widget-content">Bag </li>
<li categoryid="10" class="ui-widget-content">Cup </li>
<li categoryid="7" class="ui-widget-content">Doll </li>
<li categoryid="8" class="ui-widget-content">Empty </li>
<li categoryid="9" class="ui-widget-content">Football </li>
<li categoryid="10" class="ui-widget-content">Gems </li>
<li categoryid="50" class="ui-widget-content">Horse </li>
<li categoryid="3" class="ui-widget-content">Inter </li>
<li categoryid="4" class="ui-widget-content">JokerCap </li>
<li categoryid="5" class="ui-widget-content">King </li>
<li categoryid="6" class="ui-widget-content">Lemon </li>
<li categoryid="7" class="ui-widget-content">Nail </li>
<li categoryid="8" class="ui-widget-content">One </li>
<li categoryid="9" class="ui-widget-content">Ping </li>
<li categoryid="10" class="ui-widget-content">Quick </li>
<li categoryid="7" class="ui-widget-content">Royal </li>
<li categoryid="8" class="ui-widget-content">Standard </li>
<li categoryid="9" class="ui-widget-content">Train </li>
<li categoryid="10" class="ui-widget-content">Umbrella </li>
<li categoryid="50" class="ui-widget-content">Van </li>
</ol>
</div>
<br />
<button id="selectall">
Select All</button>
</div>
</div>
推荐答案
code的这段代码从这个<一个删节href=\"http://stackoverflow.com/questions/2132172/disable-text-highlighting-on-double-click-in-jquery\">answer将解决这个问题。
This snippet of code abridged from this answer will resolve the issue
$(function(){
$.extend($.fn.disableTextSelect = function() {
$(this).bind('selectstart',function(){return false;});
});
$('#myOrderedListSelecatableAsHeaderPart').disableTextSelect();
});
这篇关于jQuery的可选定制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
