jQuery UI的可選插件

我的設置：jQuery的1.6.2，jQuery UI的1.8.15jQuery UI的可選插件

我得到了可選擇的互動工作，但在元素不幸錨本身並不活躍。下面是我用

<ul id="selectable"> 
    <li>John Doe 
     <br/>(111) 222-3333 
     <br/><a href="mailto:[email protected]">[email protected]</a> 
     <br/> 
     <a href="/comments?user=15">3 comments</a> 
     <br/> 
     <br/> 
     <a href="https://stackoverflow.com/users/15/edit">Edit</a>  
     <a href="https://stackoverflow.com/users/15" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 
    <hr/> 
    </li> 
    <li>Jane Smith 
     <br/>(222) 333-4444 
     <br/><a href="mailto:[email protected]">[email protected]</a> 
     <br/> 
     <a href="/comments?user=17">1 comment</a> 
     <br/> 
     <br/> 
     <a href="https://stackoverflow.com/users/17/edit">Edit</a> 
     <a href="https://stackoverflow.com/users/17" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 
    <hr/> 
    </li> 
</ul>

工作作爲@fehays指示的代碼片段，我想錨簡單地表現得像可選擇裏的內部錨。我想我應該可以做，在這個代碼塊，但我不知道到底是什麼

<script> 
$(function() { 
    $("#selectable").selectable({ 
     selected: function(ev, ui) { 
     //insert code here? 
    } 
    }); 
}); 
</script>

來源

2011-08-18 Bob

您可以將點擊事件添加到使用JavaScript打開正確頁面的錨標記。

http://jsfiddle.net/fehays/UUEwd/

<ul id="selectable"> 
    <li>John Doe 
     <br/>(111) 222-3333 
     <br/><a href="mailto:[email protected]">[email protected]</a> 
     <br/> 
     <a href="/comments?user=15">3 comments</a> 
     <br/> 
     <br/> 
     <a href="https://stackoverflow.com/users/15/edit">Edit</a> 

     <a href="https://stackoverflow.com/users/15" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 
    <hr/> 
    </li> 

</ul>

JS：

$(function(){ 

    $('#selectable').selectable({ 
     selected: function(ev, ui) { 
     //maybe do something 
     } 
    }); 

    $('#selectable li a').click(function(){  
     var url = $(this).attr('href'); 

     if ($(this).data('confirm')) { 
      var answer = confirm($(this).data('confirm')); 
      var method = $(this).data('method'); 
      if (method && answer) { 
       // execute method? 
       // do redirect? 
       window.location = url; 
      } 
     } else { 
      window.location = url;    
     } 
    }); 

});

來源

2011-08-18 21:27:33 fehays

嗯，它在你的例子中工作，但它沒有記住，我注意到你沒有添加任何可選擇的CSS，這可能是爲什麼？ – Bob

我將CSS添加到jsfiddle，它仍然顯示工作。在你的代碼中有什麼別的東西導致它？ – fehays

我的不好，我必須複製錯誤的東西，現在完美地工作，謝謝你是一個搖滾明星！ – Bob

那麼選擇只能選擇裏的，你只有一個，所以它不會工作的方式你構建您的HTML。如果你把每個元素放在它自己的li中，那麼你可以單獨選擇每個元素。我添加了CSS，以便您可以分辨出發生了什麼：http://jsfiddle.net/sEkPP/

來源

2011-08-18 21:13:46

您可以選擇使用過濾選項比 '禮' 等元素。 – fehays

實際上單個元素也可以工作，我可以看到它被選中，所以這不是問題，讓我看看你的CSS。我將更新我的示例，以便更清楚地選擇可用的級別。 – Bob

@Jason，我認爲OP想要的是錨的簡單表現就像選擇性裏面的錨一樣。 – fehays

jQuery UI的可選插件

回答

相關問題