如何在選定控件上使用Jquery Multiselect插件

Question

我創建了一個用戶控件，其中顯示了帶有復選框的下拉菜單。 一切正常，但是當我在asp.net頁面上使用此控件時，它將影響其他下拉控件。

我不想在我的網頁上影響其他控件。

我曾嘗試在用戶控件上添加內聯多選樣式，但沒有運氣，其他控件仍然有效。

用戶控制

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

Answer 1

您的用戶控件不整潔應該只包含必需標記的一部分，因為您將用戶控件放置在aspx page body部分中，因此不應包含html, head, body標簽。

如下所示更改UserControl，觀察到我在綁定testUserControl $("#testUserControl select").multiselect();使用了選擇器div id = testUserControl $("#testUserControl select").multiselect(); 這將僅限於div＃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>

如何在選定控件上使用Jquery Multiselect插件

問題描述

1 個解決方案

解決方案1
1 已采納 2014-10-25 23:50:19

如何在選定控件上使用Jquery Multiselect插件

問題描述

1 個解決方案

解決方案1 1 已采納 2014-10-25 23:50:19

解決方案1
1 已采納 2014-10-25 23:50:19