Question

我有一个可选择的jQuery，如下所示。它实际上是一个有序列表。有序列表位于名为myBorderDiv的div中。

当我按下控制并将鼠标悬停在项目上时，所有这些都会产生不良影响（在IE8中），如下图所示。如何克服这个？

enter image description here

<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>

Answer 1

此answer缩写的代码片段将解决问题

$(function(){
    $.extend($.fn.disableTextSelect = function() {
                $(this).bind('selectstart',function(){return false;});
    });
    $('#myOrderedListSelecatableAsHeaderPart').disableTextSelect();
});

Answer 2

对于＃1，请尝试显示该{DIV的display:inline' or display：inline-block`。如果这不起作用，浮动DIV应该工作，但是你必须添加着名的“clearfix”，因为它没有DIV将有0高度。或者，将其设置为较小的值（不是那么明显）。我想你希望DIV不要超过其子盒占用的空间。

对于＃2，没有任何线索。你确定你没有点击/按住鼠标按钮，而你在ctrl按下时徘徊？你能在某处演示吗？什么是可以托管js代码的网站的名称，任何人？

jQuery可选定制

2 个答案: