jQuery 可选自定义
Posted
技术标签:
【中文标题】jQuery 可选自定义【英文标题】：jQuery Selectable Customization 【发布时间】：2012-03-01 19:18:58 【问题描述】：我有一个可供选择的 jQuery，如下所示。它实际上是一个有序列表。有序列表位于名为 myBorderDiv 的 div 中。
当我按下控件并将鼠标悬停在项目上时，所有项目都会产生不想要的效果（在 IE8 中），如下图所示。如何克服？
<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>
【问题讨论】：
你的图片在哪里？这将有助于回答问题。 它已经在帖子中可用（粘贴）。 （基本上它是右侧不需要的空格，并在 IE 中突出显示）。由于它是纯 html，因此您可以使用任何 Web 开发环境运行它。 【参考方案1】：从answer 删节的这段代码的 sn-p 将解决问题
$(function()
$.extend($.fn.disableTextSelect = function()
$(this).bind('selectstart',function()return false;);
);
$('#myOrderedListSelecatableAsHeaderPart').disableTextSelect();
);
【讨论】：
【参考方案2】：对于#1，尝试display:inline' ordisplay:inline-block` 用于该DIV。如果这不起作用，则浮动该 DIV 应该可以工作，但是您必须向其添加著名的“clearfix”，因为没有它，DIV 的高度将为 0。或者，将其设置为较小的值（不是很明显）。我猜您希望该 DIV 不比其子框占用的空间宽。
至于#2，不知道。你确定你没有点击/按住鼠标按钮，而你在按住 ctrl 的情况下悬停？你能在某个地方演示这个吗？可以托管 js 代码的那个网站叫什么名字？
【讨论】：
jsFilddle ?如果您可以运行它并自己查看效果，那就太好了。这个（#2）在 Chrome 中运行良好。 [我已经解决了空间问题。代码已更新。] #1：从 OL 中删除width: 60%;。 #2，我无法在 IE9 和 IE8 模式下运行的 IE9 中重现。我看到选择有效，但无论我做什么，我都无法复制 ctrl+hover。当我执行 ctrl+left-mouse-click+hover 时，我确实看到了完全相同的效果，但这就是选择文本的方式，我怀疑你会找到一种方法来覆盖该行为。
我在 IE8 的 Ctrl+Hover 中得到了不需要的效果？关于如何覆盖该行为的任何想法？
我认为问题 #2 实际上随着 60% 的修复而消失了，但您必须明确指出，只有在您开始单击 OL 中的某个位置（即外部盒子）。在外框外部单击会导致文本选择（无论 ctrl 键如何），我在 Firefox 中也看到了相同的行为。
我只在 div 内徘徊。对我来说，它适用于 Firefox 和 Chrome。问题出在 IE8 中以上是关于jQuery 可选自定义的主要内容，如果未能解决你的问题，请参考以下文章