Как использовать плагин Jquery Multiselect для выбранных элементов управления

Я создал пользовательский элемент управления, который показывает выпадающий список с помощью флажков. Все работает нормально, но когда я использую этот элемент управления на моей странице asp.net, он влияет на другие элементы управления выпадающим списком.Как использовать плагин Jquery Multiselect для выбранных элементов управления

Я не хочу использовать другие элементы управления на своей веб-странице.

Я попытался добавить встроенный многопользовательский стиль в пользовательский элемент управления, но не повезло, другие элементы управления все еще выполняются.

управления пользователя

  <%@ Control Language="VB" AutoEventWireup="false" CodeFile="ucMultiSelect.ascx.vb" Inherits="ucMultiSelect" %> 
     <!DOCTYPE html> 

     <html lang="en"> 
     <head> 
     <style type="text/css"> 
     .ui-multiselect { padding:2px 0 2px 4px; text-align:left } 
     .ui-multiselect span.ui-icon { float:right } 
     .ui-multiselect-single .ui-multiselect-checkboxes input { position:absolute !important; top: auto !important; left:-9999px; } 
     .ui-multiselect-single .ui-multiselect-checkboxes label { padding:5px !important } 

     .ui-multiselect-header { margin-bottom:3px; padding:3px 0 3px 4px } 
     .ui-multiselect-header ul { font-size:0.9em } 
     .ui-multiselect-header ul li { float:left; padding:0 10px 0 0 } 
     .ui-multiselect-header a { text-decoration:none } 
     .ui-multiselect-header a:hover { text-decoration:underline } 
     .ui-multiselect-header span.ui-icon { float:left } 
     .ui-multiselect-header li.ui-multiselect-close { float:right; text-align:right; padding-right:0 } 

     .ui-multiselect-menu { display:none; padding:3px; position:absolute; z-index:10000; text-align: left } 
     .ui-multiselect-checkboxes { position:relative /* fixes bug in IE6/7 */; overflow-y:auto } 
     .ui-multiselect-checkboxes label { cursor:default; display:block; border:1px solid transparent; padding:3px 1px } 
     .ui-multiselect-checkboxes label input { position:relative; top:1px } 
     .ui-multiselect-checkboxes li { clear:both; font-size:0.9em; padding-right:3px } 
     .ui-multiselect-checkboxes li.ui-multiselect-optgroup-label { text-align:center; font-weight:bold; border-bottom:1px solid } 
     .ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a { display:block; padding:3px; margin:1px 0; text-decoration:none } 

     /* remove label borders in IE6 because IE6 does not support transparency */ 
     * html .ui-multiselect-checkboxes label { border:none } 


     </style> 


     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>jQuery MultiSelect Widget Demo</title> 
     <%--<link rel="stylesheet" type="text/css" href="Styles/jquery.multiselect.css" />--%> 
     <%--<link rel="stylesheet" type="text/css" href="assets/style.css" />--%> 
     <%--<link rel="stylesheet" type="text/css" href="assets/prettify.css" />--%> 
     <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" /> 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 

     <script type="text/javascript" src="assets/prettify.js"></script> 
     <script type="text/javascript" src="Scripts/jquery.multiselect.js"></script> 





     <script type="text/javascript"> 
      $(function() { 
       $("select").multiselect(); 
      }); 
     </script> 
     </head> 
     <body id="test"> 

      <asp:ListBox ID="ListBox1" SelectionMode="Multiple" runat="server"> 
       <asp:ListItem Text="A" Value="1"></asp:ListItem> 
       <asp:ListItem Text="B" Value="2"></asp:ListItem> 
      </asp:ListBox> 


      </body> 
     </html>

asp.net Page

 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 

    <%@ Register src="ucMultiSelect.ascx" tagname="selectionCtrl" tagprefix="uc1" %> 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
     <title></title> 
    </head> 
    <body> 
     <form id="form1" runat="server"> 
     <asp:DropDownList ID="DropDownList1" runat="server"> 
      <asp:ListItem Text="A" Value="1"></asp:ListItem> 
      <asp:ListItem Text="B" Value="2"></asp:ListItem> 
     </asp:DropDownList> 

     <div> 
      <uc1:selectionCtrl ID="selectionCtrl1" runat="server" /> 
     </div> 
     </form> 
    </body> 
    </html>

источник

2014-10-25 user1263981

Я не думаю, что вы предоставили достаточно информации, чтобы мы могли вам помочь? - Как создается собственный пользовательский контроль? Какие конкретные «изменения» для других выпадающих вы видите? У вас есть образец jsFiddle, который вы можете использовать для иллюстрации? – Kolban

Первый элемент управления сверху вниз должен выглядеть как обычный элемент управления asp.net, но он выглядит так же, как и мой пользовательский элемент управления. – user1263981

Ваш пользовательский элемент управления не чистят должен включать в себя только часть необходимой разметки, как вы разместили UserControl в части тела aspx page он не должен включать html, head, body теги.

Изменение UserControl, как показано ниже заметить, что я использовал селектор DIV ID = testUserControl при связывании MULTISELECT $("#testUserControl select").multiselect(); Это контекстное только сНу секции # testUserControl, вы можете применить подобную логику там, где вы хотите.

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ucMultiSelect.ascx.vb" Inherits="ucMultiSelect" %> 
<!--Below jquery api resources you can include in Master or Main page --> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
<script type="text/javascript" src="assets/prettify.js"></script> 
<script type="text/javascript" src="Scripts/jquery.multiselect.js"></script> 
<div id="testUserControl"> 
    <asp:ListBox ID="ListBox1" SelectionMode="Multiple" runat="server"> 
     <asp:ListItem Text="A" Value="1"></asp:ListItem> 
     <asp:ListItem Text="B" Value="2"></asp:ListItem> 
    </asp:ListBox> 
</div> 
<script type="text/javascript"> 
    $(function() { 
     $("#testUserControl select").multiselect({ 
      noneSelectedText: "Select Options" //here you can set "noneSelectedText" that you want 
     }); 
    }); 
</script>

источник

2014-10-25 23:50:19

Как я могу установить noneSelectedText с страницы asp.net? – user1263981

Я обновил ответ с помощью опции 'noneSelectedText'. Если вы хотите установить его с страницы aspx, переместите блок сценария на страницу aspx. –

Я попытался переместить блок сценария на страницу aspx, но он не работает. Не могли бы вы привести один пример. Спасибо – user1263981

Как использовать плагин Jquery Multiselect для выбранных элементов управления

ответ

Смежные вопросы