jQuery插件开发实战
jQuery插件开发主要包括两种：类级别插件和对象级别插件开发，类级别插件开发我们可以理解为就是给jQuery提供静态方法，对象级别插件开发我们可以理解为jQuery对象添加方法，关于类级别和对象级别插件开发这里不再做详细介绍，大家可以参考这个链接：http://www.iteye.com/topic/545971。
下面我主要拿一个实例来讲一下对象级别的插件开发，此实例主要包括：DivTest01.aspx、divTest1.js、DivTest01.css、jquery-1.3.2-vsdoc2.js、jquery-1.4.2.js，其中DivTest01.css是DivTest01.aspx使用的样式，divTest1.js是通过jquery封装的对象级别的插件主要是控制公告中的标签显示样式的，jquery-1.3.2-vsdoc2.js主要是jquery智能感知的，有了它可以很方便，这里先把DivTest01.aspx这个页面的代码贴出来，如下图显示：
<!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> <link href="http://www.cnblogs.com/css/Global.css" rel="stylesheet" type="text/css" /> <link href="DivTest01.css" rel="stylesheet" type="text/css" /> <script src="http://www.cnblogs.com/JS/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script> <script type="text/javascript" src="http://www.cnblogs.com/FieldVarify/jquery-1.4.2.js"></script> <script type="text/javascript" src="divTest1.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function () { $.fn.InitTab("div_notice", "table_hd", "table_pal", true); }) </script> </head> <body> <form id="form1" runat="server"> <div id="homeLimq"> <div class="divtop"> <div class="divtoptitle"> 你好,欢迎光临李蒙强测试站点！！ </div> </div> <div class="layout margintop"> <!--最左侧300布局--> <div class="left_first_300"> <div id="div_notice" class="notice"> <div class="table_hd"> <ul> <li class="tab-cur">通知</li> <li>公告</li> </ul> </div> <div class="table_bd"> <div class="table_pal"> <ul> <li><a>测试公告1</a></li> <li><a>测试公告2</a></li> <li><a>测试公告3</a></li> <li><a>测试公告4</a></li> </ul> </div> <div style="display: none;" class="table_pal"> <ul> <li><a>测试公告5</a></li> <li><a>测试公告6</a></li> <li><a>测试公告7</a></li> <li><a>测试公告8</a></li> </ul> </div> </div> </div> <div id="div_test02" class="notice margintop"> <div class="table_hd"> <ul> <li class="tab-cur">新闻</li> <li>图表</li> </ul> </div> <div class="table_bd"> <div class="table_pal"> <ul> <li><a>测试公告1</a></li> <li><a>测试公告2</a></li> <li><a>测试公告3</a></li> <li><a>测试公告4</a></li> </ul> </div> <div style="display: none;" class="table_pal"> <ul> <li><a>测试公告5</a></li> <li><a>测试公告6</a></li> <li><a>测试公告7</a></li> <li><a>测试公告8</a></li> </ul> </div> </div> </div> <div id="div_test03" class="notice margintop"> <div class="table_hd"> <ul> <li class="tab-cur">你好1</li> <li>你好2</li> </ul> </div> <div class="table_bd"> <div class="table_pal"> <ul> <li><a>测试公告1</a></li> <li><a>测试公告2</a></li> <li><a>测试公告3</a></li> <li><a>测试公告4</a></li> </ul> </div> <div style="display: none;" class="table_pal"> <ul> <li><a>测试公告5</a></li> <li><a>测试公告6</a></li> <li><a>测试公告7</a></li> <li><a>测试公告8</a></li> </ul> </div> </div> </div> </div> <!--最右侧700布局--> <div class="left_second_700 marginleft"> <div id="div_test04" class="test04"> <div style="background-color: #eee; height: 28px"> <h4 style="margin: 0px; padding-left: 12px; padding-right: 0px; padding-top: 2px; padding-bottom: 0px; font-size: 14px;">模块4</h4> </div> <div> 模块4 </div> </div> <div id="div1" class="test05 margintop"> <div style="background-color: #eee; height: 28px"> <h4 style="margin: 0px; padding-left: 12px; padding-right: 0px; padding-top: 2px; padding-bottom: 0px; font-size: 14px;">模块5</h4> </div> <div> 模块5 </div> </div> <div id="div2" class="test06 margintop marginleft"> <div style="background-color: #eee; height: 28px"> <h4 style="margin: 0px; padding-left: 12px; padding-right: 0px; padding-top: 2px; padding-bottom: 0px; font-size: 14px;">模块5</h4> </div> <div> 模块5 </div> </div> </div> </div> <div style="width: 1001px; margin: 0 auto;"> </div> </div> </form> </body> </html>
DivTest01.aspx页面使用的样式，如下：
BODY { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } H1 { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } H2 { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } H3 { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } H4 { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } H5 { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } H6 { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } a { color:#3e3e3e; } a:hover { color:#0092d2; } HR { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } P { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } BLOCKQUOTE { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } DL { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } DT { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } DD { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } UL { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } OL { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } LI { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } PRE { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } FORM { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } FIELDSET { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } LEGEND { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } BUTTON { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } INPUT { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } TEXTAREA { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } TH { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } TD { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } BODY { font: 12px/1.5 tahoma,arial,宋体; } BUTTON { font: 12px/1.5 tahoma,arial,宋体; } INPUT { font: 12px/1.5 tahoma,arial,宋体; } SELECT { font: 12px/1.5 tahoma,arial,宋体; } TEXTAREA { font: 12px/1.5 tahoma,arial,宋体; } H1 { font-size: 100%; } H2 { font-size: 100%; } H3 { font-size: 100%; } H4 { font-size: 100%; } H5 { font-size: 100%; } H6 { font-size: 100%; } ADDRESS { font-style: normal; } CITE { font-style: normal; } DFN { font-style: normal; } EM { font-style: normal; } VAR { font-style: normal; } CODE { font-family: courier new,courier,monospace; } KBD { font-family: courier new,courier,monospace; } PRE { font-family: courier new,courier,monospace; } SAMP { font-family: courier new,courier,monospace; } SMALL { font-size: 12px; } UL { list-style-type: none; } OL { list-style-type: none; } A { text-decoration: none; } A:hover { text-decoration: underline; } SUP { vertical-align: text-top; } SUB { vertical-align: text-bottom; } LEGEND { color: #000; } FIELDSET { border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } IMG { border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } BUTTON { font-size: 100%; } INPUT { font-size: 100%; } SELECT { font-size: 100%; } TEXTAREA { font-size: 100%; } TABLE { border-spacing: 0; border-collapse: collapse; } #page { margin-left: auto; margin-right: auto; } #header { margin-left: auto; margin-right: auto; } #content { margin-left: auto; margin-right: auto; } #footer { margin-left: auto; margin-right: auto; } .w950 { width: 950px; } .col-main { min-height: 1px; width: 100%; float: left; } .col-sub { float: left; } .col-extra { float: left; } .layout:after { display: block; height: 0px; clear: both; content: ' '; } .main-wrap:after { display: block; height: 0px; clear: both; content: ' '; } .col-sub:after { display: block; height: 0px; clear: both; content: ' '; } .col-extra:after { display: block; height: 0px; clear: both; content: ' '; } .layout { zoom: 1; } .main-wrap { zoom: 1; } .col-sub { zoom: 1; } .col-extra { zoom: 1; } HTML { zoom: expression(function(ele){ele.style.zoom = "1";document.execCommand("BackgroundImageCache",false,true);}(this)); } #site-nav { BORDER-BOTTOM: #dcdcdc 1px solid; MIN-WIDTH: 950px; WIDTH: auto } #site-nav-bd { Z-INDEX: 10000; POSITION: relative; PADDING-BOTTOM: 3px; LINE-HEIGHT: 22px; MARGIN: 0px auto; PADDING-LEFT: 0px; WIDTH: 950px; PADDING-RIGHT: 0px; HEIGHT: 21px; COLOR: #000; PADDING-TOP: 3px } #site-nav A { COLOR: #666 } #site-nav A:hover { COLOR: #f50 } #site-nav .login-info { FLOAT: left } #site-nav .login-info A { MARGIN-RIGHT: 8px } #site-nav .login-info A.user-nick { COLOR: #0092d2; MARGIN-RIGHT: 0px } #site-nav .services .menu-bd DT { TEXT-ALIGN: left; LINE-HEIGHT: 1.5; COLOR: #8c8c8c; FONT-WEIGHT: bold } #site-nav .services .menu-bd DT A { COLOR: #057bd2 } #site-nav .services .menu-bd DT A { WHITE-SPACE: nowrap } #site-nav .services .menu-bd DD A { WHITE-SPACE: nowrap } #site-nav .services .menu-bd DD { TEXT-ALIGN: left; LINE-HEIGHT: 1.6 } #site-nav .services .menu-bd DD SPAN { COLOR: #8c8c8c } #site-nav .login-info .vip-areas { POSITION: relative } #site-nav .login-info .vip-areas .vip-content-show { DISPLAY: block !important } #site-nav .login-info .vip-areas:hover .vip-content { DISPLAY: block } #site-nav .login-info .vip-areas-hover .vip-content { DISPLAY: block } #site-nav .login-info .vip-icon0 { Z-INDEX: 10002; POSITION: relative; MARGIN: 0px 6px 0px -1px; WIDTH: 14px; DISPLAY: inline-block; HEIGHT: 14px; TOP: 0px; _margin-top: 3px } #site-nav .login-info .vip-icon1 { Z-INDEX: 10002; POSITION: relative; MARGIN: 0px 6px 0px -1px; WIDTH: 14px; DISPLAY: inline-block; HEIGHT: 14px; TOP: 0px; _margin-top: 3px } #site-nav .login-info .vip-icon2 { Z-INDEX: 10002; POSITION: relative; MARGIN: 0px 6px 0px -1px; WIDTH: 14px; DISPLAY: inline-block; HEIGHT: 14px; TOP: 0px; _margin-top: 3px } #site-nav .login-info .vip-icon3 { Z-INDEX: 10002; POSITION: relative; MARGIN: 0px 6px 0px -1px; WIDTH: 14px; DISPLAY: inline-block; HEIGHT: 14px; TOP: 0px; _margin-top: 3px } #site-nav .login-info .vip-icon4 { Z-INDEX: 10002; POSITION: relative; MARGIN: 0px 6px 0px -1px; WIDTH: 14px; DISPLAY: inline-block; HEIGHT: 14px; TOP: 0px; _margin-top: 3px } #site-nav .login-info .vip-icon5 { Z-INDEX: 10002; POSITION: relative; MARGIN: 0px 6px 0px -1px; WIDTH: 14px; DISPLAY: inline-block; HEIGHT: 14px; TOP: 0px; _margin-top: 3px } #site-nav .login-info .vip-icon6 { Z-INDEX: 10002; POSITION: relative; MARGIN: 0px 6px 0px -1px; WIDTH: 14px; DISPLAY: inline-block; HEIGHT: 14px; TOP: 0px; _margin-top: 3px } #site-nav .login-info .vip-icon7 { Z-INDEX: 10002; POSITION: relative; MARGIN: 0px 6px 0px -1px; WIDTH: 14px; DISPLAY: inline-block; HEIGHT: 14px; TOP: 0px; _margin-top: 3px } #site-nav .login-info .vip-icon0 { BACKGROUND-POSITION: 0px -448px } #site-nav .login-info .vip-icon1 { BACKGROUND-POSITION: 0px -468px } #site-nav .login-info .vip-icon2 { BACKGROUND-POSITION: 0px -488px } #site-nav .login-info .vip-icon3 { BACKGROUND-POSITION: 0px -508px } #site-nav .login-info .vip-icon4 { BACKGROUND-POSITION: 0px -528px } #site-nav .login-info .vip-icon5 { BACKGROUND-POSITION: 0px -548px } #site-nav .login-info .vip-icon6 { BACKGROUND-POSITION: 0px -568px } #site-nav .login-info .vip-content { BORDER-BOTTOM: #ded9bf 1px solid; POSITION: absolute; BORDER-LEFT: #ded9bf 1px solid; BACKGROUND-COLOR: #fcfbe5; WIDTH: 178px; DISPLAY: none; HEIGHT: 82px; BORDER-TOP: #ded9bf 1px solid; TOP: 19px; BORDER-RIGHT: #ded9bf 1px solid; LEFT: -8px; _top: 23px } #site-nav .login-info .vip-content B { POSITION: absolute; WIDTH: 70px; DISPLAY: block; BACKGROUND-POSITION: -41px 0px; HEIGHT: 7px; TOP: -7px; LEFT: 6px; _overflow: hidden } #site-nav .login-info .vip-content .vip-toy-icon1 { MARGIN: 12px 10px 5px; WIDTH: 37px; DISPLAY: block; FLOAT: left; HEIGHT: 56px; _display: inline } #site-nav .login-info .vip-content .vip-toy-icon2 { MARGIN: 12px 10px 5px; WIDTH: 37px; DISPLAY: block; FLOAT: left; HEIGHT: 56px; _display: inline } #site-nav .login-info .vip-content .vip-toy-icon3 { MARGIN: 12px 10px 5px; WIDTH: 37px; DISPLAY: block; FLOAT: left; HEIGHT: 56px; _display: inline } #site-nav .login-info .vip-content .vip-toy-icon4 { MARGIN: 12px 10px 5px; WIDTH: 37px; DISPLAY: block; FLOAT: left; HEIGHT: 56px; _display: inline } #site-nav .login-info .vip-content .vip-toy-icon5 { MARGIN: 12px 10px 5px; WIDTH: 37px; DISPLAY: block; FLOAT: left; HEIGHT: 56px; _display: inline } #site-nav .login-info .vip-content .vip-toy-icon6 { MARGIN: 12px 10px 5px; WIDTH: 37px; DISPLAY: block; FLOAT: left; HEIGHT: 56px; _display: inline } #site-nav .login-info .vip-content .vip-toy-icon6 { BACKGROUND-POSITION: 0px 0px } #site-nav .login-info .vip-content .vip-toy-icon5 { BACKGROUND-POSITION: 0px -60px } #site-nav .login-info .vip-content .vip-toy-icon4 { BACKGROUND-POSITION: 0px -120px } #site-nav .login-info .vip-content .vip-toy-icon3 { BACKGROUND-POSITION: 0px -180px } #site-nav .login-info .vip-content .vip-toy-icon2 { BACKGROUND-POSITION: 0px -240px } #site-nav .login-info .vip-content .vip-toy-icon1 { BACKGROUND-POSITION: 0px -300px } #site-nav .login-info .vip-content .vip-my-level { MARGIN-TOP: 10px; WIDTH: 100px; DISPLAY: block; FLOAT: left; HEIGHT: 20px; OVERFLOW: hidden } #site-nav .login-info .vip-content .vip-my-level A { MARGIN: -19px 10px 5px 60px; WIDTH: 38px; DISPLAY: block; HEIGHT: 14px } #site-nav .login-info .vip-content .vip-my-power { WIDTH: 96px; DISPLAY: block; FLOAT: left; HEIGHT: 22px; COLOR: #0092d2; TEXT-DECORATION: none } #site-nav .login-info .vip-content .vip-my-service { MARGIN-TOP: 4px; WIDTH: 51px; DISPLAY: block; BACKGROUND-POSITION: 0px -608px; FLOAT: left; HEIGHT: 16px } #site-nav .login-info .vip-content .vip-my-level .vip-my-level0 { BACKGROUND-POSITION: -18px -448px } #site-nav .login-info .vip-content .vip-my-level .vip-my-level1 { BACKGROUND-POSITION: -18px -468px } #site-nav .login-info .vip-content .vip-my-level .vip-my-level2 { BACKGROUND-POSITION: -18px -488px } #site-nav .login-info .vip-content .vip-my-level .vip-my-level3 { BACKGROUND-POSITION: -18px -508px } #site-nav .login-info .vip-content .vip-my-level .vip-my-level4 { BACKGROUND-POSITION: -18px -528px } #site-nav .login-info .vip-content .vip-my-level .vip-my-level5 { BACKGROUND-POSITION: -18px -548px } #site-nav .login-info .vip-content .vip-my-level .vip-my-level6 { BACKGROUND-POSITION: -18px -568px } #site-nav .quick-menu .mini-cart #mc-menu-hd { POSITION: relative; LINE-HEIGHT: 18px; MARGIN: 2px 0px 0px; WIDTH: 66px; PADDING-RIGHT: 16px; HEIGHT: 18px; COLOR: #666; OVERFLOW: hidden; _line-height: 19px } #site-nav .quick-menu .mini-cart B.leftline { Z-INDEX: 10002; POSITION: absolute; BORDER-LEFT: #bfbfbf 1px solid; WIDTH: 1px; DISPLAY: block; HEIGHT: 12px; OVERFLOW: hidden; TOP: 6px; LEFT: 0px } #site-nav .quick-menu .mini-cart B.rightline { Z-INDEX: 10002; POSITION: absolute; BORDER-LEFT: #bfbfbf 1px solid; WIDTH: 1px; DISPLAY: block; HEIGHT: 12px; OVERFLOW: hidden; TOP: 6px; LEFT: 0px } #site-nav .quick-menu .mini-cart B.rightline { LEFT: 108px } #site-nav .quick-menu .mini-cart-no-layer B.rightline { LEFT: 98px } #site-nav .quick-menu #mc-menu-hd:hover { BORDER-BOTTOM: #bfbfbf 1px solid; BORDER-LEFT: #bfbfbf 1px solid; BACKGROUND: white; COLOR: #f50; BORDER-TOP: #bfbfbf 1px solid; BORDER-RIGHT: #bfbfbf 1px solid; TEXT-DECORATION: none } #site-nav .quick-menu .hover #mc-menu-hd { BORDER-BOTTOM: #bfbfbf 1px; BORDER-LEFT: #bfbfbf 1px solid; BACKGROUND: white; HEIGHT: 21px; BORDER-TOP: #bfbfbf 1px solid; BORDER-RIGHT: #bfbfbf 1px solid; TEXT-DECORATION: none } #site-nav .quick-menu .hover #mc-menu-hd:hover { _border-bottom: none } #site-nav .quick-menu .mini-cart-no-layer #mc-menu-hd { PADDING-RIGHT: 6px } #site-nav .quick-menu .mini-cart #mc-menu-hd .mc-count { PADDING-BOTTOM: 0px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; FONT-FAMILY: 'simsun'; COLOR: #f50; FONT-WEIGHT: bold; PADDING-TOP: 0px } #site-nav .quick-menu .mini-cart #mc-menu-hd .mc-pt3 { PADDING-BOTTOM: 0px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; PADDING-TOP: 0px } #site-nav .quick-menu .mini-cart #mc-menu-hd B { RIGHT: 6px } #site-nav .quick-menu .mini-cart A .mini-cart-line { BORDER-BOTTOM: #f5f5f5 1px solid; POSITION: absolute; LINE-HEIGHT: 0; WIDTH: 65px; DISPLAY: block; HEIGHT: 0px; FONT-SIZE: 0px; TOP: 15px; LEFT: 22px } #site-nav .quick-menu .hover A .mini-cart-line { BORDER-BOTTOM-COLOR: white } #site-nav .quick-menu .mini-cart A:hover .mini-cart-line { BORDER-BOTTOM-COLOR: #f50 } #site-nav .quick-menu .mini-cart .mini-cart-content A { POSITION: static; BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: 1.5; BORDER-RIGHT-STYLE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: auto; PADDING-RIGHT: 0px; DISPLAY: inline; BORDER-TOP-STYLE: none; BACKGROUND: none transparent scroll repeat 0% 0%; HEIGHT: auto; BORDER-LEFT-STYLE: none; PADDING-TOP: 0px } #site-nav .quick-menu .mini-cart .menu-bd { } #site-nav .quick-menu .mini-cart .mini-cart-ready { BACKGROUND: #fff; HEIGHT: auto } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-hd { PADDING-BOTTOM: 10px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT-WEIGHT: bold; PADDING-TOP: 10px } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd { BORDER-BOTTOM: #f2f2f2 1px solid } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd LI { PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; FLOAT: none; HEIGHT: 40px; CLEAR: both; OVERFLOW: hidden; PADDING-TOP: 0px } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd A { COLOR: #3e3e3e } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd A:link { COLOR: #3e3e3e } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd A:visited { COLOR: #3e3e3e } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-ft { COLOR: #3e3e3e } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-hd { COLOR: #3e3e3e } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd A:hover { COLOR: #f50 } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd A:active { COLOR: #f50 } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-del A:hover { COLOR: #f50 } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-del A:active { COLOR: #f50 } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-img { TEXT-ALIGN: center; WIDTH: 40px; ZOOM: 1; DISPLAY: inline; FLOAT: left; HEIGHT: 40px; OVERFLOW: hidden; MARGIN-RIGHT: 10px } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-img IMG { VERTICAL-ALIGN: middle } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-info { COLOR: #999 } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-count { FLOAT: right; MARGIN-LEFT: 8px } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-del { FLOAT: right; MARGIN-LEFT: 8px } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-count { FONT-FAMILY: arial,verdana; COLOR: #999 } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-del { MARGIN-TOP: -20px; CLEAR: both } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-info SPAN { MARGIN-RIGHT: 6px } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-del A { COLOR: #0092d2 } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-del A:link { COLOR: #0092d2 } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-del A:visited { COLOR: #0092d2 } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-info { LINE-HEIGHT: 20px; HEIGHT: 20px; OVERFLOW: hidden } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-title { LINE-HEIGHT: 20px; HEIGHT: 20px; OVERFLOW: hidden } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-title A { WIDTH: 160px; TEXT-OVERFLOW: ellipsis; ZOOM: 1; DISPLAY: inline; WHITE-SPACE: nowrap; OVERFLOW: hidden; -o-text-overflow: ellipsis } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-ft { TEXT-ALIGN: right; FONT-WEIGHT: bold } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-ft { PADDING-TOP: 8px } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bt { PADDING-TOP: 8px } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bt { HEIGHT: 20px; COLOR: #c33; CLEAR: both; OVERFLOW: hidden } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bt A { } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bt A { BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: center; PADDING-BOTTOM: 0px; LINE-HEIGHT: 22px; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0px 0px 0px 10px; PADDING-LEFT: 0px; WIDTH: 113px; PADDING-RIGHT: 0px; ZOOM: 1; DISPLAY: inline-block; BACKGROUND-POSITION: 0px 0px; BORDER-TOP-STYLE: none; FLOAT: right; HEIGHT: 22px; COLOR: white; BORDER-LEFT-STYLE: none; PADDING-TOP: 0px; _line-height: 21px } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bt A:link { COLOR: white } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bt A:visited { COLOR: white } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bt A:hover { COLOR: white } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bt A:active { COLOR: white } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-price { COLOR: #f60; MARGIN-LEFT: 4px } #site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bt A:hover { COLOR: white !important; TEXT-DECORATION: none } #site-nav .quick-menu .mini-cart .mini-cart-content STRONG { FONT-WEIGHT: bold }
#homeLimq { width: 100%; } .divtop { width: 100%; height: 120px; margin-top: 2px; background-color: #Eef; } .divtop .divtoptitle { padding-top: 50px; padding-left: 20px; } .layout { width: 1006px; margin: 0 auto; } .margintop { margin-top: 5px; } .marginleft { margin-left: 5px; } .layout .left_first_300 { float: left; width: 300px; } .notice { float: left; width: 298px; height: 200px; border: 1px solid #EEE; } .notice .table_pal { padding-bottom: 0px; padding-left: 5px; padding-right: 0px; padding-top: 8px; } .table_bd { border-top: #e8e8e8 1px solid; } .table_hd { background-color: #eee; margin-bottom: -1px; height: 29px; color: #404040; } .table_hd UL { margin-left: 12px; padding-top: 8px; width: 180px; } .table_hd LI { float: left; height: 20px; width: 40px; padding-left: 24px; padding-right: 14px; cursor: pointer; } .table_hd LI.tab-cur { font-weight:bold; float: left; height: 20px; width: 40px; padding-left: 24px; padding-right: 14px; background-color: #FFF; cursor: pointer; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-right: 1px solid #d5d5d5; } .table_bd UL { margin-left: 12px; padding-top: 7px; width: 180px; } .tab_pal LI { padding-bottom: 0px; line-height: 22px; padding-left: 5px; width: 225px; padding-right: 10px; float: left; height: 22px; overflow: hidden; padding-top: 0px; text-align: left; cursor: pointer; } .layout .left_second_700 { float: left; width: 700px; } .left_second_700 .test04 { width: 688px; height: 200px; border: 1px solid #EEE; } .left_second_700 .test05 { float: left; width: 340px; height: 200px; border: 1px solid #EEE; } .left_second_700 .test06 { float: left; width: 341px; height: 200px; border: 1px solid #EEE; }
这个页面主要是通过div层实现的一个简单的布局，运行效果见下图：
这里主要是通过jquery对象级别插件开发实现页面中通知和公告li标签的切换，我们通过一个单独的js文件divTest1.js去实现，代码如下：
/// <reference path="http://www.cnblogs.com/JS/jquery-1.3.2-vsdoc2.js" /> (function( $ ){ $.fn.InitTab = function (parentId, tab_class, content_class, ismouseover) { // 得到样式名称为tab-hd集合并循环 var tabs = $("#" + parentId).find("." + content_class); $("#" + parentId).find("." + tab_class + " li").each( function (i, val) { // 给每一个li加入mouseover事件 if (ismouseover) { $(val).bind({ mouseover: function () { ChangeTab(val, parentId, tab_class); ChangeContent(tabs[i], parentId, content_class); } } ); } else { $(val).bind({ click: function () { ChangeTab(val, parentId, tab_class); ChangeContent(tabs[i], parentId, content_class); } } ); } } ); }; function ChangeTab(val, parentId, tab_class) { // 通过最顶层的父id找到子节点中带有样式和li标签的元素 $("#" + parentId).find("." + tab_class + " li").each( function (i, vaul) { vaul.className = ""; }); val.className = "tab-cur"; }; function ChangeContent(val, parentId, content_class) { $("#" + parentId).find("." + content_class).each(function (i, vaul) { vaul.style.display = "none"; }); val.style.display = "block"; }; //// 插件的defaults //$.fn.TabChange.defaults = { // parentId: 'div_notice', // tab_class: 'table_hd', // content_class: 'table_pal', // ismouseover:'true' //}; })(jQuery);
这样我们在页面中调用只要在页面中添加如下代码即可实现切换：
$(document).ready(function () { $.fn.InitTab("div_notice", "table_hd", "table_pal", true); })
用这种方式的好处有几个方面：1、代码的可维护性非常强；2、方法的适应的场景比较多，可通过传入不同的参数来控制其他标签的切换；3、js方法永远不会有冲突；
