none
如何用CSS自定义ListView中某个Item选中时的边框及复选标记? RRS feed

  • 问题

  • 如何用CSS自定义ListView中某个Item选中时的边框及复选标记?
    • 已移动 ThankfulHeart 2012年11月25日 9:01 ASP.NET问题 (发件人:.NET Framework 一般性问题讨论区)
    2012年11月25日 8:43

全部回复

  • 可以在ListView控件的模版中加上class属性名

    自己刚刚写的小例子:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Master/Detail</title>
        <style type="text/css">

            .categoryContainer div
            {
                width: 100px;
                font-size:small;
                border: 1px solid black;
                float:left;
                padding:3px;
                margin:3px;
            }
           
            .categoryContainer a
            {
                text-decoration:none;
            }
           
            .categoryContainer div:hover
            {
                background-color:#eeeeee;
            }
           
            #selected
            {
                background-color:silver;
            }
       
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
           
            <asp:ListView
                ID="lstMovieCategories"
                DataSourceId="srcMovieCategory"
                DataKeyNames="Id"
                runat="server">
                <LayoutTemplate>
                    <div class="categoryContainer">
                    <asp:PlaceHolder
                        id="itemPlaceholder"
                        Runat="server" />
                    </div>
                </LayoutTemplate>
                <ItemTemplate>
                    <div>
                    <asp:LinkButton
                        id="lnkSelect"
                        Text='<%# Eval("Name") %>'
                        CommandName="Select"
                        Runat="server" />
                    </div>
                </ItemTemplate>
                <SelectedItemTemplate>
                    <div id="selected">
                    <%# Eval("Name") %>
                    </div>
                </SelectedItemTemplate>
            </asp:ListView>
       
            <br style="clear:both" /><br />
           
            <asp:ListView
                ID="lstMovies"
                DataSourceId="srcMovies"
                runat="server">
                <LayoutTemplate>
                    <ol>
                    <asp:PlaceHolder
                        id="itemPlaceholder"
                        runat="server" />
                    </ol>
                </LayoutTemplate>
                <ItemTemplate>
                    <li><%# Eval("Title") %></li>
                </ItemTemplate>
            </asp:ListView>
       
            <asp:SqlDataSource
                id="srcMovieCategory"
                SelectCommand="SELECT Id, Name FROM MovieCategory"
                ConnectionString='<%$ ConnectionStrings:con %>'
                Runat="server" />

            <asp:SqlDataSource
                id="srcMovies"
                SelectCommand="SELECT Title FROM Movie
                    WHERE CategoryId=@CategoryId"
                ConnectionString='<%$ ConnectionStrings:con %>'
                Runat="server">
                <SelectParameters>
                    <asp:ControlParameter
                        Name="CategoryId"
                        ControlID="lstMovieCategories" />
                </SelectParameters>
            </asp:SqlDataSource>   
        </div>
        </form>
    </body>
    </html>

    2012年11月25日 11:35
  • 如果我的listView是:

    <divid="id_div_listView"

    class="win-selectionstylefilled"

                   

    data-win-control="WinJS.UI.ListView"

                   

    data-win-options="{ 

                        itemTemplate: select('#ListTemplate'),

                        itemDataSource: Data.photoList.dataSource,

                        selectionMode: 'multi',

                        tapBehavior: 'invoke',

                        swipeBehavior: 'select',

                        layout: { type: 'WinJS.UI.GridLayout', maxRows: 1 }

                    }"></

    div>

    那我在itemTemplate里添加class吗?

    2012年11月26日 9:31