Bootstrap tab使用

发布时间:2015/7/22 23:52:30 浏览量:1473

效果:
1-1024x197.jpg

引用:

<link href="../../Resource/js/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
< script src="../../Resource/js/jquery/jquery-1.8.0.min.js" type="text/javascript"></script>
< script src="../../Resource/js/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

脚本:

<script>

        $(function () {

            $('#myTab a').click(function (e) {

                e.preventDefault();

                $(this).tab('show');

            });

            $('#divstyletab a').click(function (e) {

                e.preventDefault();

                $(this).tab('show');

            });

        });

    </script>

 html

<div style="margin: 10px; padding: 10px; width: 90%; height: 200px; border: 1px solid #dedede;">

    <ul class="nav nav-tabs" id="myTab">

        <li class="active"><a href="#divstyle" data-toggle="tab">风格设置</a></li>

        <li><a href="#divmystyle" data-toggle="tab">自定义风格</a></li>

        <li><a href="#divbanshi" data-toggle="tab">版式设置</a></li>

        <li><a href="#divcompent" data-toggle="tab">组件设置</a></li>

        <li><a href="#divcompentmyself" data-toggle="tab">自定义组件</a></li>

    </ul>

    <div class="tab-content">

        <div class="tab-pane active" id="divstyle">

            <div class="tabbable tabs-left" style="margin: 3px;">  <ul class="nav nav-tabs" id="divstyletab">  <li class="active"><a href="#divntyle" data-toggle="tab">最近</a></li>  <li><a href="#divpstyle" data-toggle="tab">人文</a></li>  </ul>  <div class="tab-content">  <div class="tab-pane active" id="divntyle">  </div>  <div class="tab-pane" id="divpstyle">  ppp</div>  </div> </div>

        </div>

        <div class="tab-pane" id="divmystyle">

            <div class="tabbable tabs-left" style="margin: 3px;">

                <ul class="nav nav-tabs" id="divmystyletab">

                    <li class="active"><a href="#divcolortyle" data-toggle="tab">配色方案</a></li>

                    <li><a href="#divbigbac" data-toggle="tab">修改大背景</a></li>

                </ul>

                <div class="tab-content">

                    <div class="tab-pane active" id="divcolortyle">

                        <ul id="skin">

                            <li id="Model0" title="灰色" class="selected">灰色</li>

                            <li id="Model1" title="紫色">紫色</li>

                            <li id="Model2" title="红色">红色</li>

                            <li id="Model3" title="天蓝色">天蓝色</li>

                            <li id="Model4" title="橙色">橙色</li>

                            <li id="Model5" title="淡绿色">淡绿色</li>

                        </ul>

                    </div>

                    <div class="tab-pane" id="divbigbac">

                        ppp

                    </div>

                </div>

            </div>

        </div>

        <div class="tab-pane" id="divbanshi">

            <ul id="skinside">

                <li id="winform1" title="灰色" class="selected">3:1</li>

                <li id="winform2" title="紫色">1:3</li>

            </ul>

        </div>

        <div class="tab-pane" id="divcompent">

            <div class="tabbable tabs-left" style="margin: 3px;">

                <ul class="nav nav-tabs" id="divccstyle">

                    <li class="active"><a href="#divbasecc" data-toggle="tab">基础组件</a></li>

                    <li><a href="#divyulecc" data-toggle="tab">娱乐组件</a></li>

                </ul>

                <div class="tab-content">

                    <div class="tab-pane active" id="divbasecc">

                        <div id="div_chk" style="width: 100%; height: 20px; padding-top: 10; background: white;">

                            显隐藏设置:

                            <input type="checkbox" runat="server" id="chk_1" name="ck" onclick="chk(this, 'm_1')" />温馨提示

                            <input type="checkbox" runat="server" id="chk_3" name="ck" onclick="chk(this, 'm_3')" />为什么

                            <input type="checkbox" runat="server" id="chk_4" name="ck" onclick="chk(this, 'm_4')" />名医推荐

                            <input type="checkbox" runat="server" id="chk_5" name="ck" onclick="chk(this, 'm_5')" />卫生信息

                            <input type="checkbox" runat="server" id="chk_2" name="ck" onclick="chk(this, 'm_2')" />新闻中心

                        </div>

                    </div>

                    <div class="tab-pane" id="divyulecc">

                        ppp

                    </div>

                </div>

            </div>

        </div>

        <div class="tab-pane" id="divcompentmyself">

            <input type="button" value="添加文本组件" id="btntext" data-toggle="modal" data-target="#myModal" href="../SysManage/ZuJianManage.aspx" />

            <input type="button" value="添加列表组件" id="btnlist" />

            <div id="chklist" runat="server">


            </div>

        </div>

    </div>

</div>

  bootstrapt跟easyui一样,都是支持属性渲染的。tabs-left样式 是控制tab也的显示形态为左边,就是最近 ,人文的显示方式 ,大家可以试试 tabs-right的效果 ,举一反三 。active是 标识是否是 当前tab页的属性。$(this).tab('show');是tab页的显示方法。tab也是支持嵌套的 。希望对大家有帮助。

网友回复
总数:0 当前页:1 / 0 首页 上页 下页 末页
回复

品码堂 (关于我们

桂ICP备13004001号