jeui
/
tabs.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>je-table</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="wcodeth=device-wcodeth, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/jeui.css"  media="all">
    <script type="text/javascript" src="js/modules/jeui.js"></script>
</head>
<body>
<div class="je-p20">

    <blockquote class="je-quote je-f16">
        默认的Tabs  <div class="je-din je-ml30" tab="9" title="自动添加" id="tadadd">添加</div>
    </blockquote>
    <div id="je-tabs" class="je-tabs je-mt10 je-mb30">
        <ul class="je-tabs-title">
            <li>网站设置</li>
            <li>用户管理<em class="close"></em></li>
            <li>权限分配<em class="close"></em></li>
            <li>商品管理<em class="close"></em></li>
            <li>订单管理<em class="close"></em></li>
        </ul>
        <div class="je-tabs-content">
            <div class="je-tabs-item">
                <p>响应式Web设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。</p>
                <p>如今客户不仅仅使用iPhone和笔记本，而且使用iMac的27英寸显示器，10英寸的Kindle和很多平板设备。这些设备可能会使用不同的浏览器，并且每种表格因素和浏览器的组合都可能导致不同的页面渲染。并且这些行为可能在每个版本上都不太一样。</p>
            </div>
            <div class="je-tabs-item">
                <p>响应式Web设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。</p>
            </div>
            <div class="je-tabs-item">3</div>
            <div class="je-tabs-item">4</div>
            <div class="je-tabs-item">5</div>
        </div>
    </div>
    <blockquote class="je-quote je-f16">
        简洁式的Tabs
    </blockquote>
    <div id="je-tabs2" class="je-tabs brief je-mt10 je-mb30">
        <ul class="je-tabs-title">
            <li>网站设置</li>
            <li>用户管理</li>
            <li>权限分配</li>
            <li>商品管理</li>
            <li>订单管理</li>
        </ul>
        <div class="je-tabs-content">
            <div class="je-tabs-item">
                <p>响应式Web设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。</p>
                <p>如今客户不仅仅使用iPhone和笔记本，而且使用iMac的27英寸显示器，10英寸的Kindle和很多平板设备。这些设备可能会使用不同的浏览器，并且每种表格因素和浏览器的组合都可能导致不同的页面渲染。并且这些行为可能在每个版本上都不太一样。</p>
            </div>
            <div class="je-tabs-item">
                <p>响应式Web设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。</p>
            </div>
            <div class="je-tabs-item">3</div>
            <div class="je-tabs-item">4</div>
            <div class="je-tabs-item">5</div>
        </div>
    </div>
    <blockquote class="je-quote je-f16">
        卡片式的Tabs
    </blockquote>
    <div id="je-tabs3" class="je-tabs card je-mt10 je-mb10">
        <ul class="je-tabs-title">
            <li>网站设置</li>
            <li>用户管理<em class="close"></em></li>
            <li>权限分配<em class="close"></em></li>
            <li>商品管理<em class="close"></em></li>
            <li>订单管理<em class="close"></em></li>
        </ul>
        <div class="je-tabs-content">
            <div class="je-tabs-item">
                <p>响应式Web设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。</p>
                <p>如今客户不仅仅使用iPhone和笔记本，而且使用iMac的27英寸显示器，10英寸的Kindle和很多平板设备。这些设备可能会使用不同的浏览器，并且每种表格因素和浏览器的组合都可能导致不同的页面渲染。并且这些行为可能在每个版本上都不太一样。</p>
            </div>
            <div class="je-tabs-item">
                 <p>响应式Web设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。</p>
            </div>
            <div class="je-tabs-item">3</div>
            <div class="je-tabs-item">4</div>
            <div class="je-tabs-item">5</div>
        </div>
    </div>
</div>

<script type="text/javascript">
jeui.use(["jquery","jeTabs"],function () {
    var tab = $("#je-tabs").jeTabs();

    $("#tadadd").on("click",function(){
        var uid = jeui.uuid()
        tab.addTabs({
            title: '新选项'+ uid //用于演示
            ,content: '内容'+ uid
        })
    })

    $("#je-tabs2").jeTabs({tabIndex:2});
    $("#je-tabs3").jeTabs();
})
</script>
<!--
http://www.qdfuns.com/notes/13967/3cdebc6a132f33a3e65aa2b6019a7487.html
http://www.jq22.com/demo/jQueryNavHover20161129/
-->
</body>
</html>