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

        <%@ 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的正文部分中，它不应包含html, head, body标记。

像下面一样更改UserControl 观察我在绑定多选testUserControl时使用了选择器div id = $("#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 个答案: