shangshang
/
hhqtest


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
							<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="../css/weui.css"/>
    <link rel="stylesheet" href="../css/weuix.css"/>

    <script src="../js/zepto.min.js"></script>
    <script src="../js/zepto.weui.js"></script>
    <script>
        $(function(){

            $('#t1').tab({
                defaultIndex: 0,
                activeClass: 'tab-green',
                onToggle: function (index) {

                }
            })

            $('#t2').tab({
                defaultIndex: 1,
                activeClass: 'tab-red'
            })

            $('#t3').tab({
                defaultIndex:2,
                activeClass: 'tab-blue'
            })

            $('#t4').tab({defaultIndex:1,activeClass:"bg-green"});

            $('#t5').tab({defaultIndex:2,activeClass:"bg-red"});

        })

    </script>

</head>

<body ontouchstart>
<div class="container">
    <div class="page-hd">
        <h1 class="page-hd-title">
            navbar/头部导航
        </h1>
        <p class="page-hd-desc">导航</p>
    </div>

    <div class="weui-tab" id="t1" style="height:44px;">
        <div class="weui-navbar">
            <div class="weui-navbar__item">
                杨玉环
            </div>
            <div class="weui-navbar__item">
                赵飞燕
            </div>
            <div class="weui-navbar__item">
                貂蝉
            </div>
        </div>

    </div>
<br>
    <div class="weui-tab" id="t2" style="height:44px;">
        <div class="weui-navbar">
            <div class="weui-navbar__item">
                杨玉环
            </div>
            <div class="weui-navbar__item">
                赵飞燕
            </div>
            <div class="weui-navbar__item">
                貂蝉
            </div>
        </div>

    </div>
      <br>
    <div class="weui-tab" id="t3" style="height:44px;">
        <div class="weui-navbar">
            <div class="weui-navbar__item">
                杨玉环
            </div>
            <div class="weui-navbar__item">
                赵飞燕
            </div>
            <div class="weui-navbar__item">
                貂蝉
            </div>
        </div>
       
    </div>
      <br>

        <div class="weui-tab" style="height:44px;"   id="t4">
            <div class="weui-tab-nav"> <a href="javascript:" class="weui-navbar__item weui-nav-green"> 中国 </a> <a href="javascript:" class="weui-navbar__item weui-nav-green"> 美国 </a> <a href="javascript:" class="weui-navbar__item weui-nav-green"> 小日本 </a> </div>
        </div>


        <div class="weui-tab" style="height:44px;"   id="t5">
            <div class="weui-tab-nav"> <a href="javascript:" class="weui-navbar__item weui-nav-red"> 中国 </a> <a href="javascript:" class="weui-navbar__item weui-nav-red"> 美国 </a> <a href="javascript:" class="weui-navbar__item weui-nav-red"> 小日本 </a><a href="javascript:" class="weui-navbar__item weui-nav-red"> 韩国 </a> </div>
        </div>


        <br>
    <br>
    <div class="weui-footer weui-footer_fixed-bottom">
        <p class="weui-footer__links">
            <a href="../index.html" class="weui-footer__link">WeUI首页</a>
        </p>
        <p class="weui-footer__text">Copyright &copy; Yoby</p>
    </div>
</div>

<script>
    //有4个颜色配置
    $(document).on("click", "#show-actions", function() {
        $.actions({
            title: "选择操作",
            onClose: function() {
                console.log("close");
            },
            actions: [
                {
                    text: "发布",
                    className: "color-primary",
                    onClick: function() {
                        $.alert("发布成功");
                    }
                },
                {
                    text: "编辑",
                    className: "color-warning",
                    onClick: function() {
                        $.alert("你选择了“编辑”");
                    }
                },
                {
                    text: "删除",
                    className: 'color-danger',
                    onClick: function() {
                        $.alert("你选择了“删除”");
                    }
                }
            ]
        });
    });

    $(document).on("click", "#show-actions-bg", function() {
        $.actions({
            actions: [
                {
                    text: "发布",
                    className: "bg-primary",
                },
                {
                    text: "编辑",
                    className: "bg-warning",
                },
                {
                    text: "删除",
                    className: 'bg-danger',
                } ,{
                    text: "删除",
                    className: 'bg-success',
                }
            ]
        });
    });
</script>
</body>
</html>