ASP.NET实例——漂亮的自适应宽度的导航条(仿Discuz!)
PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!......
虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时候ASP.NET也能有这么多成熟的,流行的开放源代码呢?)。
这个导航条是动态的,主要是要用后台代码判断点击选择的是哪个菜单项,然后修改,进而设置当前选择菜单项的样式。
【效果】
【素材】
素材1:导航条背景
素材2:菜单项链接、鼠标悬浮及当前选项样式背景
【前台界面】
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Products.aspx.cs" Inherits="WestGarden.Web.Products" StylesheetTheme="NetShop" %> <!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>ASP.NET实例——漂亮的自适应宽度的导航条(仿Discuz!)</title>
</head>
<body>
<div id="hd">
<div class="wp">
<form id="form1" runat="server">
<div id="nv">
<asp:Repeater ID="repCategories" runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:HyperLink runat="server" ID="lnkCategory" NavigateUrl='<%# string.Format("~/Products.aspx?page=0&categoryId={0}", Eval("CategoryId")) %>' Text='<%# Eval("Name") %>' />
<asp:HiddenField runat="server" ID="hidCategoryId" Value='<%# Eval("CategoryId") %>' />
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</div>
</form>
</div>
</div>
</body>
</html>
【后台代码】
using System;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient; namespace WestGarden.Web
{
public partial class Products : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string connString = "Server=.\\SQLEXPRESS;Database=NetShop;Trusted_Connection=SSPI;";
string cmdText = "SELECT * FROM Category"; SqlConnection conn = new SqlConnection();
conn.ConnectionString = connString; SqlCommand cmd = new SqlCommand();
cmd.Connection = conn;
cmd.CommandType = CommandType.Text;
cmd.CommandText = cmdText; conn.Open(); SqlDataReader dr = cmd.ExecuteReader(); repCategories.DataSource = dr;
repCategories.DataBind(); dr.Close();
conn.Close(); string categoryId = Request.QueryString["categoryId"];
if (!string.IsNullOrEmpty(categoryId))
SelectCategory(categoryId);
} private void SelectCategory(string categoryId)
{
foreach (RepeaterItem item in repCategories.Items)
{
HiddenField hidCategoryId = (HiddenField)item.FindControl("hidCategoryId");
if (hidCategoryId.Value.ToLower() == categoryId.ToLower())
{
HyperLink lnkCategory = (HyperLink)item.FindControl("lnkCategory");
if(string.IsNullOrEmpty(lnkCategory.CssClass))
lnkCategory.CssClass = lnkCategory.CssClass + "a";
else
lnkCategory.CssClass = lnkCategory.CssClass + " a"; break;
}
}
}
}
}
【CSS样式】
body { font: 12px/1.5 Tahoma,Helvetica,'SimSun',sans-serif; color: #444444; } a { color: #333333; text-decoration: none; }
a:hover { text-decoration: underline; } .wp { margin: 0px auto; width: 960px; } #hd { border-bottom: 0px solid #C2D5E3; }
#hd .wp { padding: 10px 0px 0px; } #nv { overflow: hidden; height: 33px; background: url(Images/nv.png) no-repeat scroll 0px 0px #2B7ACD; } #nv li { float: left; padding-right: 1px; height: 33px; line-height: 33px; background: url(Images/nv_a.png) no-repeat 100% 0; font-weight: 700; font-size: 14px; }
.ie_all #nv li { line-height: 36px; }
.ie6 #nv li { line-height: 33px; } #nv li a { float: left; padding: 0 15px; height: 33px; }
#nv li a { color: #FFFFFF; } #nv li a.a { margin-left: -1px; background: url(Images/nv_a.png) no-repeat scroll 50% -33px rgb(0, 90, 180); }
#nv li a.a { color: #00FF00; } #nv li a:hover { background: url(Images/nv_a.png) no-repeat 50% -66px; }
【说明】
1、实例所使用的样式表,基本都是Discuz中的,其中的样式命名基本没做改动。
2、前台界面主要使用了Repeater控件,HyperLink和HiddenField控件如果不用的话,可以直接用<a>和<span>标签代替,把数据绑上就可以了。
3、实例的关键是这个HiddenField控件(也可以设置属性不显示的<span>标签),里面存放了分类项的ID,后台代码主要是根据这个ID来判断该菜单项是不是当前选项。
4、后台代码12--31行是从数据库NetShop中获取分类表Category中的分类项名字和ID,这些代码,如果采用结构我想编程会很简捷。
5、后台代码34-36行是获取链接地址,从地址中取出菜单项ID(categoryId),然后调用函数SelectCategory()。
6、函数SelectCategory()的主要功能是根据从地址中获取的菜单ID,查找对应项在Repeater的位置,然后,修改该项的class。
7、素材的几个背景图片是做在一起的,在CSS中,主要是通过背景起始位置来控制链接、鼠标悬浮及当前选项的背景。
8、自适应宽度的关键在于,设置菜单项背景时,起始水平位置是50%,这样,只要菜单项的宽度不超过背景图片的宽度,也就是160px,都不会有什么问题。
【源代码下载】
http://download.csdn.net/detail/yousuosi/5834551
ASP.NET实例——漂亮的自适应宽度的导航条(仿Discuz!)的更多相关文章
- 漂亮的自适应宽度的多色彩CSS图片按钮
一.素材 二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...
- Asp.net 导航条【1】
PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!...... 虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时 ...
- JS实现自适应宽度的Tag切换
效果体验:http://hovertree.com/texiao/js/3.htm 该效果使用纯JavaScript代码,实现TAB页切换效果,TAB标签根据内容自适应宽度,点击TAB标签切换内容页. ...
- 从三栏自适应宽度布局到css布局的讨论
如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...
- UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案
UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...
- RelativeLayout中的格局,自适应宽度布局
RelativeLayout中的布局,自适应宽度布局 该图片中为android布局:总布局为 RelativeLayoutAtLeft 为居左 <TextView android:backgro ...
- Qt的tablewidget行列头自适应宽度
Qt构造一个TableWidget后,窗口最大化后,列头默认不能自适应宽度,研究了一下,Qt提供了两种方式来处理这个问题,如下: 1. 使用horizontalHeader()->setRe ...
- [Winform]DataGridView列自适应宽度
引言 在做winform项目中,数据控件DataGridView的使用多多少少是会用到的,如果不设置它的属性,默认情况下是不会自适应宽度的,你想查看某项的数据,就不得不将标题栏拖来拖去,挺烦的. 方法 ...
- CSS 圣杯布局升级版---多个固定宽度一个自适应宽度
1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...
随机推荐
- 介绍 Android 的 Camera 框架
总体介绍 Android Camera 框架从整体上看是一个 client/service 的架构,有两个进程:一个是 client 进 程,可以看成是 AP 端,主要包括 JAVA 代码与一些 na ...
- 记录一次Spring boot 搭建框架连接Mysql数据库注解事务不回滚的故障
搭建了一个新框架,使用了spring boot 替换以简化原来繁杂的spring配置,使用Spring注解管理事务,持久层使用mybatis. 连接mysql数据库完成项目的过程中发现不支持事务,因为 ...
- 常见SQLException异常
ORA-00904: invalid column name 无效列名 ORA-00942: table or view does not exist 表或者视图不存在 ORA-01400: c ...
- matlab注释使用,以及相应的注释快捷键
1.多行注释 单行注释是加% %{ 若干语句 %} 2.快捷键 多行注释: 选中要注释的若干语句, 编辑器菜单Text-<Comment, 或者快捷键Ctrl+R 取消注释: 选中要取消注释的语 ...
- [转载] FFmpeg API 变更记录
最近一两年内FFmpeg项目发展的速度很快,本来是一件好事.但是随之而来的问题就是其API(接口函数)一直在发生变动.这么一来基于旧一点版本的FFmpeg的程序的代码在最新的类库上可能就跑不通了. 例 ...
- linux ubuntu 安装jdk
junluobj@junluobj:~$sudo mkdir /usr/lib/jvmwww.linuxidc.com@linuxidc:~$tar zvxf jdk-8u20-linux-x64.t ...
- Supervisor行为分析和实践
1.简介 Erlang要编写高容错性.稳定性的系统,supervisor就是用来解决这一问题的核心思想.通过建立一颗监控树,来组织进程之间的关系,通过确定重启策略.子进程说明书等参数信息来确定 ...
- 数组排序,字符串math,replace练习
1. 关于数组排序 排序一直是程序设计中的热门话题.在js中,数组有个sort()方法.在不传参数默认情况下,数组的sort()方法原理是:对数每项调用toString()方法,比较字符串按升 ...
- C#单例模式的三种写法
第一种最简单,但没有考虑线程安全,在多线程时可能会出问题,不过俺从没看过出错的现象,表鄙视我…… public class Singleton{ private static Singleton ...
- AE+C# 向axPageLayoutControl1添加图例
原文 AE+C# 向axPageLayoutControl1添加图例 //Get the GraphicsContainer IGraphicsContainer graphicsContainer ...