zoukankan      html  css  js  c++  java

  • 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=" 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- 0px;
    border-top- 0px;
    border-bottom- 0px;
    border-left- 0px;
}
IMG
{
    border-right- 0px;
    border-top- 0px;
    border-bottom- 0px;
    border-left- 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
{
     950px;
}
.col-main
{
    min-height: 1px;
     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
{
     100%;
}

.divtop
{
     100%;
    height: 120px;
    margin-top: 2px;
    background-color: #Eef;
}

    .divtop .divtoptitle
    {
        padding-top: 50px;
        padding-left: 20px;
    }

.layout
{
     1006px;
    margin: 0 auto;
}

.margintop
{
    margin-top: 5px;
}

.marginleft
{
    margin-left: 5px;
}

.layout .left_first_300
{
    float: left;
     300px;
}

.notice
{
    float: left;
     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;
     180px;
}

.table_hd LI
{
    float: left;
    height: 20px;
     40px;
    padding-left: 24px;
    padding-right: 14px;
    cursor: pointer;
}

    .table_hd LI.tab-cur
    {
        font-weight:bold;
        float: left;
        height: 20px;
         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;
     180px;
}



.tab_pal LI
{
    padding-bottom: 0px;
    line-height: 22px;
    padding-left: 5px;
     225px;
    padding-right: 10px;
    float: left;
    height: 22px;
    overflow: hidden;
    padding-top: 0px;
    text-align: left;
    cursor: pointer;
}

.layout .left_second_700
{
    float: left;
     700px;
}

.left_second_700 .test04
{
     688px;
    height: 200px;
    border: 1px solid #EEE;
}

.left_second_700 .test05
{
    float: left;
     340px;
    height: 200px;
    border: 1px solid #EEE;
}

.left_second_700 .test06
{
    float: left;
     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方法永远不会有冲突；
  • 相关阅读:
    如何改变常用编辑器(eclipse)的字号大小
    IOConsole Updater error
    RNAfold的使用方法
    单因素方差分析(oneway ANOVA)
    Perl内部保留变量（系统变量）
    Perl 中的正则表达式
    Perl Eclipse 格式化代码
    卸载Oracle 9i
    Ubuntu的菜鸟常用的基础命令
    linux as4u2 下安装openssh
  • 原文地址：https://www.cnblogs.com/limengqiang/p/jQueryWidget.html
Copyright © 2011-2022 走看看