jQuery可選擇定製

我有一個jQuery可選，如下所示。它實際上是一個有序列表。有序列表位於名爲myBorderDiv的div內。jQuery可選擇定製

當我按下控件並將鼠標懸停在項目上時，它們都會在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>

來源

2012-02-09 Lijo

哪裏是你的形象？這將有助於回答這個問題。 – Jon 2012-02-09 10:23:09

已在帖子中提供（粘貼）。（基本上它是右邊的無用空格，並在IE中突出顯示了行爲）。由於它是純html，因此您可以使用任何Web開發環境運行它。 – Lijo 2012-02-09 10:24:47

的這段代碼從這個answer刪節將解決此問題

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

來源

2012-02-10 13:53:41

謝謝。 http://chris-barr.com幫助「使用jQuery禁用文本選擇」 – Lijo 2012-02-14 08:15:16

對於＃1，儘量display:inline' or顯示：直列block`該DIV。如果這樣做不起作用，那麼浮動該DIV應該可以工作，但是隨後你必須添加着名的「clearfix」，因爲沒有DIV將具有0的高度。或者，將其設置爲較小的值（不是那麼明顯）。我想你希望DIV不要超過其子框所佔用的空間。

至於＃2，沒有線索。你確定你還沒有點擊/按住鼠標按鈕，而你按住ctrl盤旋？你可以在某個地方演示這個嗎？任何人都可以託管js代碼的那個網站的名稱是什麼？

來源

2012-02-09 10:32:15

jsFilddle？如果你可以運行它並親自看到效果，那將是非常棒的。這（＃2）在Chrome中工作正常。 [我已經解決了空間問題。代碼已更新。] – Lijo 2012-02-09 10:41:12

＃1：從OL中刪除'width：60％;'。＃2，我不能在運行IE8模式的IE9和IE9中重現。我看到選擇作品，但無論我做什麼，我都無法重新制作ctrl + hover。當我做Ctrl +鼠標左鍵+懸停時，我確實看到了完全相同的效果，但這就是文本被選中的方式，我懷疑你會找到一種重寫該行爲的方法。 – 2012-02-09 10:44:20

我在Ctrl +懸停本身在IE8中獲取不需要的效果？有關如何覆蓋該行爲的任何想法？ – Lijo 2012-02-09 10:49:23

jQuery可選擇定製

回答

相關問題