BootStrap之H-ui前端框架篇

H-ui:实则为BootStrap的中文翻译版

               地址:http://www.h-ui.net/



h-ui.admin.js:

/*H-ui.admin.js v2.3.1 date:15:42 2015.08.19 by:guojunhui*/
/*获取顶部选项卡总长度*/
function tabNavallwidth(){
    var taballwidth=0,
        $tabNav = $(".acrossTab"),
        $tabNavWp = $(".Hui-tabNav-wp"),
        $tabNavitem = $(".acrossTab li"),
        $tabNavmore =$(".Hui-tabNav-more");
    if (!$tabNav[0]){return;}
    $tabNavitem.each(function(index, element) {
        taballwidth+=Number(parseFloat($(this).width()+70));});
    $tabNav.width(taballwidth+25);
    var w = $tabNavWp.width();
    if(taballwidth+25>w){
        $tabNavmore.show();}
    else{
        $tabNavmore.hide();
        $tabNav.css({left:0});}
}

/*左侧菜单响应式*/
function Huiasidedisplay(){
    if($(window).width()>=768){
        $(".Hui-aside").show();
    }
}

$(function(){
    //layer.config({extend: 'extend/layer.ext.js'});
    Huiasidedisplay();
    var resizeID;
    $(window).resize(function(){
        clearTimeout(resizeID);
        resizeID = setTimeout(function(){
            Huiasidedisplay();
        },500);
    });
    
    $(".Hui-nav-toggle").click(function(){
        $(".Hui-aside").slideToggle();
    });
    $(".Hui-aside").on("click",".menu_dropdown dd li a",function(){
        if($(window).width()<768){
            $(".Hui-aside").slideToggle();
        }
    });
    /*左侧菜单*/
    $.Huifold(".menu_dropdown dl dt",".menu_dropdown dl dd","fast",1,"click");
    /*选项卡导航*/
    
    $(".Hui-aside").on("click",".menu_dropdown a",function(){
        if($(this).attr('_href')){
            var bStop=false;
            var bStopIndex=0;
            var _href=$(this).attr('_href');
            var _titleName=$(this).html();
            var topWindow=$(window.parent.document);
            var show_navLi=topWindow.find("#min_title_list li");
            show_navLi.each(function() {
                if($(this).find('span').attr("data-href")==_href){
                    bStop=true;
                    bStopIndex=show_navLi.index($(this));
                    return false;
                }
            });
            if(!bStop){
                creatIframe(_href,_titleName);
                min_titleList();
            }
            else{
                show_navLi.removeClass("active").eq(bStopIndex).addClass("active");
                var iframe_box=topWindow.find("#iframe_box");
                iframe_box.find(".show_iframe").hide().eq(bStopIndex).show().find("iframe").attr("src",_href);
            }
        }
    });
    


    var num=0;
    var oUl=$("#min_title_list");
    var hide_nav=$("#Hui-tabNav");
    $(document).on("click","#min_title_list li",function(){
        var bStopIndex=$(this).index();
        var iframe_box=$("#iframe_box");
        $("#min_title_list li").removeClass("active").eq(bStopIndex).addClass("active");
        iframe_box.find(".show_iframe").hide().eq(bStopIndex).show();
    });
    $(document).on("click","#min_title_list li i",function(){
        var aCloseIndex=$(this).parents("li").index();
        $(this).parent().remove();
        $('#iframe_box').find('.show_iframe').eq(aCloseIndex).remove();    
        num==0?num=0:num--;
        tabNavallwidth();
    });
    $(document).on("dblclick","#min_title_list li",function(){
        var aCloseIndex=$(this).index();
        var iframe_box=$("#iframe_box");
        if(aCloseIndex>0){
            $(this).remove();
            $('#iframe_box').find('.show_iframe').eq(aCloseIndex).remove();    
            num==0?num=0:num--;
            $("#min_title_list li").removeClass("active").eq(aCloseIndex-1).addClass("active");
            iframe_box.find(".show_iframe").hide().eq(aCloseIndex-1).show();
            tabNavallwidth();
        }else{
            return false;
        }
    });
    tabNavallwidth();
    
    $('#js-tabNav-next').click(function(){
        num==oUl.find('li').length-1?num=oUl.find('li').length-1:num++;
        toNavPos();
    });
    $('#js-tabNav-prev').click(function(){
        num==0?num=0:num--;
        toNavPos();
    });
    
    function toNavPos(){
        oUl.stop().animate({'left':-num*100},100);
    }
    
    /*换肤*/
    $("#Hui-skin .dropDown-menu a").click(function(){
        var v = $(this).attr("data-val");
        setCookie("Huiskin", v);
        $("#skin").attr("href","skin/"+v+"/skin.css");
    });
});
/*弹出层*/
/*
    参数解释:
    title    标题
    url        请求的url
    id        需要操作的数据id
    w        弹出层宽度(缺省调默认值)
    h        弹出层高度(缺省调默认值)
*/
function layer_show(title,url,w,h){
    if (title == null || title == '') {
        title=false;
    };
    if (url == null || url == '') {
        url="404.html";
    };
    if (w == null || w == '') {
        w=800;
    };
    if (h == null || h == '') {
        h=($(window).height() - 50);
    };
    layer.open({
        type: 2,
        area: [w+'px', h +'px'],
        fix: false, //不固定
        maxmin: true,
        shade:0.4,
        title: title,
        content: url
    });
}
/*关闭弹出框口*/
function layer_close(){
    var index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);
}

function creatIframe(href,titleName){
    var topWindow=$(window.parent.document);
    var show_nav=topWindow.find('#min_title_list');
    show_nav.find('li').removeClass("active");
    var iframe_box=topWindow.find('#iframe_box');
    show_nav.append('<li class="active"><span data-href="'+href+'">'+titleName+'</span><i></i><em></em></li>');
    tabNavallwidth();
    var iframeBox=iframe_box.find('.show_iframe');
    iframeBox.hide();
    iframe_box.append('<div class="show_iframe"><div class="loading"></div><iframe frameborder="0" src='+href+'></iframe></div>');
    var showBox=iframe_box.find('.show_iframe:visible');
    //showBox.find('iframe').attr("src",href);
    showBox.find('iframe').load(function(){
        showBox.find('.loading').hide();
    });
}
function min_titleList(){
    var topWindow=$(window.parent.document);
    var show_nav=topWindow.find("#min_title_list");
    var aLi=show_nav.find("li");
}

function getTopWindow(){
    var topWindow=window.parent;
    while(topWindow.parent!=null){
        topWindow=topWindow.parent;
    }
    return topWindow;
}

function openTaskEditWin(title,url,isreplace){
        var bStop=false;
        var bStopIndex=0;
        var _href=url;
        var _titleName=title+"T";
    try{
        var topWindow=$(window.parent.document);
        var show_navLi=topWindow.find("#min_title_list li");
        show_navLi.each(function() {
            if(isreplace&&isreplace==true){
                if($(this).hasClass("active")){
                    bStop=true;
                    bStopIndex=show_navLi.index($(this));
                    $(this).first().attr("title",_titleName);
                    $(this).first().html(_titleName);
                    return false;
                }
            }else if($(this).find('span').text()==_titleName){
                bStop=true;
                bStopIndex=show_navLi.index($(this));
                return false;
            }
        });
        if(!bStop){
            parent.creatIframe(_href,_titleName);
            parent.min_titleList();
        }else{
            show_navLi.removeClass("active").eq(bStopIndex).addClass("active");
            var iframe_box=topWindow.find("#iframe_box");
            iframe_box.find(".show_iframe").hide().eq(bStopIndex).show().find("iframe").attr("src",_href);
        }
    }catch(e){
        location.href=_href;
        return;
    }
}



H-ui.admin是用H-ui前端框架开发的轻量级网站后台模版 采用源生html语言,完全免费,简单灵活,兼容性好 让您快速搭建中小型网站后台 程序员的的福音 \根目录 │ _blank.html 空白页(每次我们都拿空白页去创建,这样比较干净!) │ _footer.html 页脚公共代码片段 │ _header.html 头部公共代码片段 │ _meta.html meta公共代码片段 │ robots.txt 搜索引擎爬虫配置文件 │ login.html 管理员登陆 │ index.html 首页(主框架) │ welcome.html 我的桌面(默认永远打开的页面) │ member-开头的 用户相关 │ artice-开头的 资讯相关 │ picture-开头的 图片相关 │ product-开头的 产品相关 │ page-开头的 页面相关 │ system-开头的 系统相关 │ admin-开头的 管理员相关 │ charts-开头的 统计相关 …… ├─css │ H-ui.reset.css H-ui.reset css │ H-ui.css h-ui CSS │ H-ui.min.css h-ui CSS 压缩版 │ H-ui.login.css H-ui.admin后台登录样式 │ H-ui.admin.css H-ui.admin样式 │ style.css 写你自己的样式 │ ├─images UI相关的图片素材 │ ├─jsH-ui.js H-ui核心脚本 │ H-ui.admin.js 本站相关的js ├─lib │ jquery jQuery类库(v1.9.1) │ bootstrapSwitch 开关控件 │ Hui-iconfont_v1.0 阿里图标字体库(H-ui定制) │ font-awesome 字体库文件 │ icheck 单选框、复选框控件 │ laypage laypage 翻页插件 │ layer layer弹出层插件 │ laytpl JavaScript模板引擎 │ My97DatePicker 日期插件 │ Validform 表单验证插件 │ zepto zepto库 │ ueditor 百度编辑器 │ Highcharts 图表插件 │ dataTables 表格排序,检索插件 │ WebUploader 百度文件上传组件 │ lightbox2 图片预览组件 │ │ html5.js html5插件,让低版本IE支持html5元素 │ DD_belatedPNG_0.0.8a-min.js 解决IE6png透明 │ swfobject.js Flash插件 │ expressInstall.swf 检查flash插件 │ unslider.min.js Unslider图片滚动效果插件 │ stickUp.min.js 让页面元素"固定"位置 │ respond.min.js 让IE兼容media │ Echo.js 图片延迟加载插件 │ colpick.js 颜色插件 │ handlebars.js js模版引擎 │ waterfall.min.js 瀑布流插件 └─temp 测试数据、图片
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值