js商品类别三级滑动菜单网上实例不少,大多为静态,且商品类别数量及格式统一。但公司的项目有新需求,商品类别不足的区域要隐藏,商品类别多的地方要扩大区域,商品类别数据用户可随时添加删除。
1.三级目录多商品类别图例:
2.无三级目录商品类别图例:
3.二级商品目录不足图例:
要实现上述功能的确费一番脑筋,不过参照大量js实例后还是实现完成了,这里说说其基本原理:建立用户控件,GridView控件嵌套两层DataList构成三层数据绑定,css样式布局定位。在RowDataBound事件中判断是否存在二级及三级菜单,动态确定页面的CSS样式。前台代码:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Catalog_Index1.ascx.cs"
Inherits="UserControl_Catalog_Index1" %>
<div class="category">
<div class="cat_list">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="vertical-align: middle;
height: auto">
<tr valign="top">
<td valign="top" style="height: auto">
<asp:GridView ID="grdList" AllowPaging="False" AutoGenerateColumns="False" RowStyle-Height="25"
HorizontalAlign="Center" BorderWidth="0px" GridLines="None" ShowFooter="False"
ShowHeader="False" DataKeyNames="CatalogNo" Width="100%" runat="server" CellPadding="0"
PagerSettings-Visible="false" OnRowDataBound="grdList_RowDataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<div class="h2_cat">
<div id="div_h2" runat="server" class="sidelist">
<span>
<h2>
<table cellspacing="0" width="100%" height="30px" cellpadding="0" border="0" style="border-bottom: dotted 1px #DDDDDD;">
<tr valign="top" height="100%" class="catalog">
<td width="15px" align="center" valign="middle">
<img alt="" src="../images/Head_images/index_style1.gif" />
</td>
<td width="155px" align="left" valign="middle">
<asp:HyperLink ID="hlkCatalog" runat="server" Target="_parent"></asp:HyperLink>
</td>
<td width="14px" align="left" valign="middle">
<img alt="" src="../images/Head_images/index_style2.gif" />
<asp:Label ID="lblCatalogName" runat="server" Text='<%# Eval("CatalogName")%>' Visible="False"> </asp:Label>
</td>
</tr>
</table>
</h2>
</span>
<div class="h3_cat" id="div_h3" runat="server">
<div class="shadow" id="shadow" runat="server">
<div class="shadow_border" id="shadow_border" runat="server">
<asp:DataList ID="dtCatalogTwo" runat="server" DataKeyField="CatalogNo" RepeatColumns="1"
RepeatDirection="Horizontal" RepeatLayout="Table" Width="655" BorderWidth="0px"
BackColor="white" GridLines="None" ShowHeader="false" CellPadding="0" OnItemDataBound="dtCatalogTwo_ItemDataBound">
<ItemTemplate>
<table cellspacing="0" cellpadding="0" border="0" width="655">
<tr>
<td valign="top">