水平带背景颜色样式

创建水平的标签页，首先要在最外层容器添加类.tab-horizontal，如需使用下述带背景颜色的样式，在该处添加.tab-bgc类。内部组成为：标签栏，推荐用<li>标签，添加tabs类。 内容部分，创建一个容器并添加类tab-content，每一页的内容容器上添加tab-item。

• 简介
• 评价

SpongeBob SquarePants

        《海绵宝宝》是美国著名的系列电视动画，1999年在尼克国际儿童频道开播，至今仍持续制播中，创始者是史蒂芬·海伦伯格。原名是《穿方形裤子的海绵鲍勃》。

        《海绵宝宝》（SpongeBob Squarepants) 是美国尼克儿童频道最著名的动画片，也是美国电视节目历史上最受观众喜爱的系列动画片之一。该片曾获得全美儿童电视动画片收视冠军。曾连续于2002～2004年获得艾美奖最佳儿童节目奖，并于2004年获得美国电视评论家奖最佳儿童节目奖。而该片创作者及执行制片人史蒂芬·希伦伯格是尼克儿童频道最受欢迎的创作者之一，曾获2002年格雷斯公主电影基金奖，并获得南加州首个环保公益组织“拯救海滩”的最高荣誉。详见《海绵宝宝》参考资料在各奖项中的获奖情况表。

Source

                    
    <div class="tab-horizontal tab-bgc">
        <ul class="tabs removeTextNodes">
            <li>简介</li>
            <li>登入</li>
            <li>评价</li>
        </ul>
        <div class="tab-content">
            <div class="tab-item">
                ...
            </div>
            ...
        </div>
    </div>
                    
                

                    
    <div class="tab-horizontal tab-line">
        <ul class="tabs">
            <li>Home</li>
            ...
        </ul>
        <div class="tab-content">
            <div class="tab-item">
                ...
            </div>
            ...
        </div>
    </div>
                    
                

                    
    <div class="tab-horizontal tab-triangle">
        <ul class="tabs">
            <li>Home</li>
            ...
        </ul>
        <div class="tab-content">
            <div class="tab-item">
               ...
            </div>
           ...
        </div>
    </div>
                    
                

垂直线条样式

创建垂直的标签页，首先要在最外层容器添加类.tab-vertical,如需使用下述有标签条的样式，在该处添加.tab-line类。内部组成与上述带水平背景样式相同。

• Home
• Info
• Contact

SNX UI

A warm and beautiful story.

SNX UI

A warm and beautiful story.

SNX UI

A warm and beautiful story.

Source

                    
    <div class="tab-vertical tab-line">
        <ul class="tabs">
            <li>Home</li>
            ...
        </ul>
        <div class="tab-content" style="height: 120px">
            <div class="tab-item">
                ...
            </div>
            ...
        </div>
    </div>
                    
                

                    
    <div class="tab-vertical tab-bgc">
        <ul class="tabs">
            ...
        </ul>
        <div class="tab-content">
            <div class="tab-item">
                ...
            </div>
            ...
        </div>
    </div>
                    
                

                    
    $(".tab-vertical").tabs(Option);
    $(".tab-vertical").tabs(“Method”, {Option});
                    
                

                    
    <div class="dropdown">
        <button class="btn btn-fl skyblue btn-dropdown" data-dropdown="#dropdown1">Choose one
            <span class="triangle"></span>
        </button>
        <ul class="dropdown-list" id="dropdown1">
            <li class="dropdown-header"><a>...</a></li>
            <li><a href="#">...</a></li>
            ...
        </ul>
    </div>
                    
                

                    
    <div class="dropdown dropdown-yl">
        <button class="btn btn-yl skyblue btn-dropdown" data-dropdown="#dropdown3">Choose one
            <span class="triangle"></span>
        </button>
        <ul class="dropdown-list" id="dropdown3">
            <li class="divider"><span class="line"></span></li>
            <li class="disabled"><a href="#">you could tell me why.....................</a></li>
            ...
        </ul>
    </div>
                    
                

                    
    <div class="dropdown dropdown-top">
        <button class="btn btn-fl skyblue btn-dropdown" data-dropdown="#dropdown5">Choose one
            <span class="triangle-top"></span>
        </button>
        <ul class="dropdown-list" id="dropdown5">
            <li><a href="#">...</a></li>
            ...
        </ul>
    </div>
                    
                

                    
    <div class="dropdown dropdown-block">
        <button class="btn btn-fl skyblue btn-dropdown" data-dropdown="#dropdown9">Choose one
            <span class="triangle"></span>
        </button>
        <ul class="dropdown-list" id="dropdown9">
            <li><a href="#">...</a></li>
        </ul>
    </div>
                    
                

                    
    <div class="btn-group dropdown dropdown-yl">
        <button type="submit" class="btn btn btn-lu green">青い鳥</button>
        <button type="button" class="btn btn btn-lu green btn-dropdown" data-dropdown="#dropdown11">
            <span class="triangle"></span>
        </button>
        <ul class="dropdown-list" id="dropdown11">
            <li><a>...</a></li>
        </ul>
    </div>
                    
                

ListGroup的删除样式

创建列表组，首先要在外层容器添加类.list-group,如果想要使其能够滑动删除，务必添加.list-touchmoveable类。并且调用参数与方法，参看参数与方法部分。 内部组成中，为每个列表项添加.list-item即可。

SNX UI

A warm and beautiful story.

SNX UI

A warm and beautiful story.

SNX UI

A warm and beautiful story.

Source

                    
    <div class="list-group list-chooseable list-touchmovable">
        <div class="list-item">
            ...
        </div>
        ...
    </div>
                    
                

                    
    <div class="list-group list-chooseable">
        <div class="list-item">
            <div>
                <form class="form form-order">
                    <label>
                        <input type="checkbox">
                        Option one is this and that—be sure to include why it's great
                    </label>
                </form>
            </div>
        </div>
        ...
    </div>
                    
                

                    
    <div class="list-group list-organ">
        <div class="list-item">
            ...
        </div>
        <div class="list-content">
            ...
        </div>
       ...
    </div>
                    
                

                    
    $('.list-touchmovable').listGroup(Method,{Options});
    $('.list-organ').listGroup(Method);
                    
                

                    
    [position]  top/right/bottom/left

    <div class="popup">
        <button class="btn btn-fl [colors]">popup-[position]
            <span class="triangle"></span>
        </button>
        <div class="popup-list popup-[position]">
            <div class="popup-triangle"></div>
            <div class="popup-header">
                popup-header
            </div>
            <div class="popup-body">
                <p>
                    This is popup body for the information.
                    Sed posuere consectetur est at lobortis.
                </p>
            </div>
        </div>
    </div>
                    
                

                    
    <div class="popup">
        <button class="btn btn-lu [colors]">popup-top and the button is very very long
            <span class="triangle"></span>
        </button>
        <div class="popup-list popup-[postition]">
            <div class="popup-triangle"></div>
            <div class="popup-body">
               ...
            </div>
        </div>
    </div>
                    
                

                    
    <div class="tooltip">
        <button class="btn btn-lu [colors]">tooltip-[position]</button>
        <div class="tooltip-list tooltip-[position]">
            <div class="tooltip-triangle"></div>
            <div class="tooltip-body">
               ...
            </div>
        </div>
    </div>
                    
                

                    
    <div class="tooltip">
        <button class="tooltip btn btn-fl [colors]">tooltip-top and the button is very very long</button>
        <div class="tooltip-list tooltip-[position]">
            <div class="tooltip-triangle"></div>
            <div class="tooltip-body">
               ...
            </div>
        </div>
    </div>
                    
                

                    
    * Without color, progress is blue.

    <div class=" progressbar [colors]">
        <div class="probar-stripe" style="width: 72%">
            72%
        </div>
    </div>
                    
                

                    
    <div class=" progressbar [colors]">
        <div class="probar-stripe animate-stripe" style="width: 48%">
        </div>
    </div>
                    
                

                    
    <div class="progressbar">
        <div></div>
    </div>

    $('.progressbar').progress("animate");
                    
                

                    
    <div class="progresscircle [colors]">
        <div class="pie-right"><div></div></div>
        <div class="pie-left"><div></div></div>
        <div class="circle-inner">75%</div>
    </div>
                    
                

                    
    <div class="loading">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="loading-round">
        <span></span>
        <span></span>
    </div>
                    
                

                    
                        $('.progressbar').progress(init[可选], {Options});
                        $('.progressbar').progress(Method);
                    
                

                    
    <div class="alert alert-bgc" role="alert">
        ...
    </div>

    $('.alert').alert('close');
                    
                

                    
    <div class="alert alert-yl" role="alert">
        ...
    </div>

    $('.alert').alert('close');
                    
                

                    
    <div class="g-2 alert alert-bgc alert-hide" role="alert" style="display: none">
        ...
    </div>


    $('.test-alert').click(function () {
        $('.alert-hide').alert();
    });
                    
                

                    
    $('.alert').alert(Method);
    $('.alert').alert(init[可选], {Options});
                    
                

                    
    <button class="btn btn-fl skyblue btn-lg btn-modal" data-modal="#modal1">Modal demo1</button>
    <div class="modal" id="modal1">
        <div class="content">
            <div class="modal-main">
                <button type="button" class="close">×</button>
                <div class="modal-header">
                    <h2 class="modal-title">SNX-UI Modal title</h2>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    ...
                </div>
            </div>
        </div>
    </div>
                    
                

                    
    <button class="btn btn-lu skyblue btn-lg btn-modal" data-modal="#modal3">Modal demo3</button>
    <div class="modal" id="modal3">
        <div class="content content-sm">
            <div class="modal-main">
                <button type="button" class="close">×</button>
                <div class="modal-header">
                    <h2 class="modal-title">SNX-UI Modal title</h2>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    ...
                </div>
            </div>
        </div>
    </div>
                    
                

                    
    <nav class="nav nav-success nav-padding">
        <ul id="scroll-menu">
            <li class="scroll-choosed"><a href="#l-one">Spring</a></li>
            <li><a href="#l-two">Summer</a></li>
            ...
        </ul>
    </nav>
    <div class="scrollview" style="max-height: 200px; overflow: auto">
        <ele id="l-one">i am one</ele>
        <ele id="l-two">i am two</ele>
        ...
    </div>
                    
                

图片轮播样式

不需要添加特别的类，如果需要左右点击翻页，可以添加类.imgscroll-left，.imgscroll-right。 插件的使用方法参看参数与方法部分。该部分存在尺寸问题，请先使用固定尺寸。

Source

                    
    <div class="images">
        <img class="img-choosed" src="../image/m1.jpg">
        ...
        <div class="imgscroll-left"></div>
        <div class="imgscroll-right"></div>
    </div>