MyBootstrapEx
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"></meta>
    <meta name="keywords"   content="Jquery,Jquery控件,Bootstrap,前端,UI,开发,通用,后台,Java,.net,没想好,开源,原创,模板,JQ-Bootstrap">
    <meta name="description"   content="没想好的前端控件基于Jquery">
    <meta name="author"   content="北京没想好-935732994">
    <meta name="copyright"   content="本组件源码为原创，版权所有，禁止转载。否则将追究法律责任。">
    <title>JQ-Bootstrap</title>

    <link rel="stylesheet" href="css/bootstrap.min.css"></link>
    <link rel="stylesheet" href="css/bootstrapEx.css"></link>
    <link rel="stylesheet" href="js/prettyPrint/css/prettify.css">

    <script src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrapEx2.0.js"></script>
    <script type="text/javascript" src="js/prettyPrint/js/prettify.js"></script>
    <script type="text/javascript" src="js/BootstrapMenu/BootstrapMenu.min.js"></script>
    <script type="text/javascript" src="js/loading/jquery.shCircleLoader.js"></script>
    <script>
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?8f13232250322849787f2fe894b5783d";
          var s = document.getElementsByTagName("script")[0];
          s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>

<body>
    <div id="topnavbar" class="container-fluid">
    </div>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="">
                <div class="span12">
                    <div class="" id="maintabs">
                       <!-- <iframe id="if-main" src="Modal/index.html" style="min-height: 285px;" width="100%" height="100%" frameborder="0"></iframe>-->
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div id="footer" class="footer" style="text-align:center;">
                    <span> 版本 by 北京-没想好</span>
                </div>
            </div>
        </div>
    </div>
</body>
<script>

    $(document).ready(function () {

        //版本号
        $('#footer span').prepend("v" + $.fn.bsEx);

        //配置导航栏
        var menudata=[];
        $.ajax({
            url: "Data/menu.json",//json文件位置
            type: "GET",//请求方式为get
            dataType: "json", //返回数据格式为json
            async: false,
            success: function (data) {//请求成功完成后要执行的方法
                menudata = data;
            }
        })
        var navbar1 = new bsEx.Navbar({
            renderto:"#topnavbar",
            title:"JQ-Bootstrap扩展",titleclass:"",
            meuns:menudata,
            right:[//{text:"API",url:"API/index.html",target:"_blank"},
            {text:"联系我",children:[
                    {text:"@北京-没想好",istitle:true},
                    {text:"<a href='tencent://message/?uin=935732994&Site=''&Menu=yes' target='_black'>QQ</a>"},
                    {text:"留言",id:"btnsetmsg"}
                ]},{text:"皮肤",children:[
                    {text:"Paper",id:"Paper_style"},
                    {text:"Lumen",id:"Lumen_style"},
                    {text:"Simplex",id:"Simplex_style"},
                    {text:"United",id:"United_style"},
                    {text:"Cerulean",id:"Cerulean_style"},
                    {text:"Journal",id:"Journal_style"},
                    {text:"Spacelab",id:"Snited_style"},
                    {text:"加载可能会有延迟"},
                    {text:"样式来自:<a href='https://bootswatch.com/3/' target='_black'>bootswatch.com</a>"}
                ]}]
        });

        //留言版
        Modal1 = new bsEx.Modal({
            title:"留言板",
            isiframe:true,
            url:"SetMessage.html",
            initMax:true
        });
        $('#btnsetmsg').on('click',function(){
            Modal1.firstInit=false;
            Modal1.show();
            //Modal1.setHeigth("600px");//设置高度
            //Modal1.setWidth("500px");//设置宽度
        })

        //样式相关
        var changstyle = function(name){
            var href = window.location.href;
            if(href.indexOf("_style")>0){
                href = href.replace("_style="+bsEx.getparastr("_style"),"_style="+name);
            }else{
                href = href.indexOf("?")>0?href+"&_style="+name:href+"?_style="+name
            }
            window.location.href = href.replace('/#?','/?');
        }
        $('#Paper_style').on('click',function(){
            changstyle("paper");
        })
        $('#Lumen_style').on('click',function(){
            changstyle("lumen");
        })
        $('#Simplex_style').on('click',function(){
            changstyle("simplex");
        })
        $('#United_style').on('click',function(){
            changstyle("united");
        })
        $('#Cerulean_style').on('click',function(){
            changstyle("cerulean");
        })
        $('#Journal_style').on('click',function(){
            changstyle("journal");
        })
        $('#Snited_style').on('click',function(){
            changstyle("snited");
        })


        //注册页签
        var tab1 = new bsEx.Tab();
        tab1.renderto ="#maintabs";
        //配置首页页签
        tab1.tabs = [{
                id:"index-tab",title: "首页", active: true, isiframe: true, url: "homepage.html",navbarhide:navbar1.id
            }];
        tab1.right = [{
            text:"查看本页面源码",id:'btncode'
        }]

        $(document.body).append('<div id="mask" style="position: fixed;z-index: 10029;width: 100%;height: 100%;margin: auto;background: ;border-color: #b0b0b0;background: #c9c9c9;opacity: .6;left: 0;top: 0;"></div>');
        tab1.onbeforeadd = function(){
            //加载插件，可以忽略
            $("#mask").show();
            $("#mask").append('<div id="modallod"  style="height: 100px;width: 50px;margin:10px auto;top: 50%;left: 50%;display: block;position: absolute;float: left;"></div>');
            $('#modallod').shCircleLoader({
                keyframes:
                   "0%   {background:black}\
                    40%  {background:transparent}\
                    60%  {background:transparent}\
                    100% {background:black}"
            });
        }
        tab1.onadded = function(){
            //添加完成后关闭加载样式
            $('#modallod').remove();
            $("#mask").hide();
        }

        tab1.init();

        //注册菜单和页签关系 导航栏实例，页签实例，其他配置
        bsEx.initNavbarTab(navbar1,tab1,{showclosebtn:true});

        //重置布局
        function maintabssize(){
            setTimeout(function () {
                //console.log("窗口改变");
                var fheight = $('#footer').parent().height();
                var iftop =  $('#maintabs').offset().top;
                $('#maintabs').css('height', $(window).height() - fheight - iftop - 10);
                tab1.doLayout();
            }, 0);
        }
        maintabssize();
        bsEx.winresizeend(maintabssize);


        //查看源码
        $(document.body).append('<div id="modalcode"></div>');
        new bsEx.Modal({
             id:"mcode",
             renderto:"#modalcode",//绘制到div
             btns:[],//按钮组
             initMax:true,//初始是否最大化
             body:"",//内容
             title:"查看源码"
        }).init();
        $("#btncode").on("click",function(){
            var tab = tab1.getactive();
            var url = tab.bodyel.find("iframe").attr("src");
            var modal = bsEx.ui("mcode");
            $.ajax({
                url: url,
                type:"get",
                dataType:"text",
                cache: false,
                success: function(html){
                    $(modal.bodyel).css('height', $(bsEx.ui.mcode.bodyel).height()).css('overflow', 'auto').html('');
                    $(modal.bodyel).append('<pre class="prettyprint linenums"><code></code></pre>').find("code").text((html));
                    prettyPrint();
                }
            });
            modal.setTitle(tab.title+"源码");
            modal.show();
            //console.log(t)
            //另一种绘制方法

        })
    });
    //留言版
    function closewindow(txt){
        txt = txt || "发送成功";
        bsEx.Alert("提示",txt,3);
        Modal1.hide();
    }
</script>
</html>