H+ 后台主题UI框架

非常感谢您选择和使用H+，在使用H+之前请注意以下事项：

1.为了保证所有功能都可正常使用，请在服务器环境（本地测试可使用localhost）下运行；

2.请认真阅读本文档后再开始使用H+；

screen

内容导航

关于H+

H+是一个完全响应式，基于Bootstrap3.3.4最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。

结构

文件夹和文件

Hplus-v.3.0.1/
    ├── css/（css文件夹，包含框架主要css及示例、插件的css文件）
    ├── docs/（开发文档）
    ├── fonts/（字体图标，包含FontAwesome字体图标和Bootstrap自带的Glyphicons字体图标）
    ├── img/（图片）
    ├── js/（js文件夹，包含框架主要的js及示例、插件的js文件）
    ├── plugins/（存放Flash等插件）
    ├── 404.html（404页面）
    ├── 500.html（500页面）
    ├── agile_board.html（任务清单）
    ├── article.html（文章页面）
    ├── badges_labels.html（徽章，标签，进度条）
    ├── basic_gallery.html（基本图库）
    ├── blog.html（文章列表）
    ├── blueimp.html（Blueimp相册）
    ├── buttons.html（按钮）
    ├── calendar.html（日历）
    ├── carousel.html（图片切换）
    ├── chat_view.html（聊天窗口）
    ├── clients.html（客户管理）
    ├── code_editor.html（代码编辑器）
    ├── contacts.html（联系人）
    ├── css_animation.html（css动画）
    ├── diff.html（文本对比）
    ├── draggable_panels.html（拖动面板）
    ├── empy_page.html（空白页面）
    ├── faq.html（FAQ）
    ├── file_manager.html（文件管理）
    ├── form_advanced.html（高级表单）
    ├── form_avatar.html（富头像上传编辑器）
    ├── form_basic.html（基本表单）
    ├── form_builder.html（表单构建器）
    ├── form_editors.html（富文本编辑器）
    ├── form_file_upload.html（文件上传）
    ├── form_markdown.html（Markdown编辑器）
    ├── form_simditor.html（Simditor富文本编辑器）
    ├── form_validate.html（表单验证）
    ├── form_webuploader.html（百度 Web Uploader）
    ├── form_wizard.html（表单向导）
    ├── forum_main.html（论坛）
    ├── glyphicons.html（Glyphicons图标）
    ├── graph_echarts.html（百度ECHarts）
    ├── graph_flot.html（Flot图表）
    ├── graph_metrics.html（图表组合）
    ├── graph_morris.html（Morris.js图表）
    ├── graph_peity.html（Peity图表）
    ├── graph_rickshaw.html（Rickshaw图表）
    ├── graph_sparkline.html（Sparkline图表）
    ├── grid_options.html（栅格）
    ├── iconfont.html（阿里巴巴矢量图标库）
    ├── icons.html（字体图标）
    ├── index.html（主页）
    ├── index_v1.html（主页示例一）
    ├── index_v2.html（主页示例二）
    ├── index_v3.html（主页示例三）
    ├── index_v4.html（主页示例四）
    ├── index_v5.html（主页示例五）
    ├── invoice.html（单据）
    ├── invoice_print.html（单据打印）
    ├── jstree.html（树形视图）
    ├── layer.html（web弹层组件layer）
    ├── layerdate.html（日期选择器layerDate）
    ├── layerphoto.html（layer相册）
    ├── layouts.html（布局）
    ├── lockscreen.html（登录超时）
    ├── login.html（登录）
    ├── login_v2.html（登录2）
    ├── mail_compose.html（写邮件）
    ├── mail_detail.html（查看邮件）
    ├── mailbox.html（收件箱）
    ├── modal_window.html（模态窗口）
    ├── nestable_list.html（嵌套列表）
    ├── notifications.html（通知 & 提示）
    ├── pin_board.html（标签墙）
    ├── plyr.html（视频、音频播放）
    ├── profile.html（个人资料）
    ├── project_detail.html（项目详情）
    ├── projects.html（项目）
    ├── register.html（注册）
    ├── search_result.html（搜索结果）
    ├── skin-config.html（主题设置选项）
    ├── social_feed.html（信息流）
    ├── spinners.html（加载动画）
    ├── suggest.html（搜索建议）
    ├── sweetalert.html（Sweet alert）
    ├── table_basic.html（基础表格）
    ├── table_data_tables.html（数据表格）
    ├── table_foo_table.html（FooTable）
    ├── table_jqgrid.html（jqGird）
    ├── table_bootstrap.html（Bootstrap Table）
    ├── tabs_panels.html（选项卡 & 面板）
    ├── teams_board.html（团队管理）
    ├── timeline.html（时间轴）
    ├── timeline_v2.html（时间轴2）
    ├── toastr_notifications.html（Toastr通知）
    ├── tree_view.html（树形视图）
    ├── typography.html（排版）
    ├── webim.html（WebIM即时通讯）
    ├── widgets.html（小部件）

主页面的HTML元素

框架的正常结构元素包含以下几个方面（参考index.html）：

  1. #wrapper body元素之后的主容器
  2. nav .navbar-static-side 左侧导航菜单.
  3. #page-wrapper 页面内容的主容器
  4. nav .navbar-static-top 顶部菜单
  5. .footer 页脚主容器

iframe子页面的HTML元素

框架的正常子页面结构元素包含以下几个方面（参考empty_page.html）：

  1. .page-heading 页面标题及包屑式导航容器
  2. .wrapper-content html元素主容器
page structure

布局结构（经典布局）

在所有页面的 <head> 中，应包含的meta和css等如下：

<!DOCTYPE html>
<head>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"<
    <meta name="renderer" content="webkit">
    <title>H+ 后台主题UI框架 - 页面</title>

    <!-- CSS文件 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

</head>

主页

<body class="fixed-sidebar full-height-layout gray-bg">
    <div id="wrapper">
        <!--左侧导航开始-->
        <nav class="navbar-default navbar-static-side" role="navigation">
            <div class="nav-close"><i class="fa fa-times-circle"></i></div>
            <div class="sidebar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="nav-header">
                        <div class="dropdown profile-element">
                            <span><img alt="image" class="img-circle" src="img/profile_small.jpg" /></span>
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <span class="clear">
                               <span class="block m-t-xs"><strong class="font-bold">Beaut-zihan</strong></span>
                                <span class="text-muted text-xs block">超级管理员<b class="caret"></b></span>
                                </span>
                            </a>
                            <ul class="dropdown-menu animated fadeInRight m-t-xs">
                                <li><a class="J_menuItem" href="form_avatar.html">修改头像</a>
                                </li>
                                ……
                            </ul>
                        </div>
                        <div class="logo-element">H+
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa fa-home"></i>
                            <span class="nav-label">主页</span>
                            <span class="fa arrow"></span>
                        </a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a class="J_menuItem" href="index_v1.html" data-index="0">主页示例一</a>
                                <!--默认主页需在对应的菜单a元素上添加data-index="0"-->
                            </li>
                            <li>
                                <a class="J_menuItem" href="index_v2.html">主页示例二</a>
                            </li>
                            <li>
                                <a class="J_menuItem" href="index_v3.html">主页示例三</a>
                            </li>
                            ……
                        </ul>
                    </li>
                    <li>
                        <!--其他菜单项-->
                    </li>
                </ul>
            </div>
        </nav>
        <!--左侧导航结束-->
        <!--右侧部分开始-->
        <div id="page-wrapper" class="gray-bg dashbard-1">
            <div class="row border-bottom">
                <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                    ……
                </nav>
            </div>
            <div class="row content-tabs">
                <button class="roll-nav roll-left J_tabLeft"><i class="fa fa-angle-double-left"></i>
                </button>
                <nav class="page-tabs J_menuTabs">
                    <div class="page-tabs-content">
                        <a href="javascript:;" class="active J_menuTab" data-id="index_v1.html">首页</a>
                        <!--默认主页需在对应的选项卡a元素上添加data-id="默认主页的url"-->
                    </div>
                </nav>
                <button class="roll-nav roll-right J_tabRight"><i class="fa fa-angle-double-right"></i>
                </button>

            </div>
            <div class="row J_mainContent" id="content-main">
                <iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="index_v1.html?v=4.0" frameborder="0" data-id="index_v1.html" seamless></iframe>
                <!--默认主页需在对应的页面显示iframe元素上添加name="iframe0"和data-id="默认主页的url"-->
            </div>
            <div class="footer">
                <div class="pull-right">© 2014-2015 <a href="http://www.zi-han.net/" target="_blank">zihan's blog</a>
                </div>
            </div>
        </div>
        <!--右侧部分结束-->
    </div>

    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.7"></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="js/plugins/layer/layer.min.js"></script>

    <!-- 自定义js -->
    <script src="js/hplus.js?v=4.1.0"></script>
    <script type="text/javascript" src="js/contabs.js"></script>

    <!-- 第三方插件 -->
    <script src="js/plugins/pace/pace.min.js"></script>

</body>

iframe子页面

主内容包括页面顶部和页面内容

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-9">
        <h2>这里是标题</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">这是</a>
            </li>
            <li class="active">
                <strong>包屑式导航</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-3">
        <div class="title-action">
            <a href="" class="btn btn-primary">活动区域</a>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="wrapper wrapper-content">

        </div>
    </div>
</div>
注意：必要时在iframe子页面中需要引入js/content.js，此节可参考empty_page.html

上下式布局（可选布局）

二级菜单示例

<nav class="navbar navbar-static-top" role="navigation">
    <div class="navbar-header">
        <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
            <i class="fa fa-reorder"></i>
        </button>
        <a href="#" class="navbar-brand">Hplus</a>
    </div>
    <div class="navbar-collapse collapse" id="navbar">
        <ul class="nav navbar-nav">
            <li class="active">
                <a aria-expanded="false" role="button" href="layouts.html"> 返回布局页面</a>
            </li>
            <li class="dropdown">
                <a aria-expanded="false" role="button" href="#" class="dropdown-toggle" data-toggle="dropdown"> 菜单 <span class="caret"></span></a>
                <ul role="menu" class="dropdown-menu">
                    <li><a href="">菜单列表</a>
                    </li>
                    <li><a href="">菜单列表</a>
                    </li>
                    <li><a href="">菜单列表</a>
                    </li>
                    <li><a href="">菜单列表</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown">
                <a aria-expanded="false" role="button" href="#" class="dropdown-toggle" data-toggle="dropdown"> 菜单 <span class="caret"></span></a>
                <ul role="menu" class="dropdown-menu">
                    <li><a href="">菜单列表</a>
                    </li>
                    <li><a href="">菜单列表</a>
                    </li>
                    <li><a href="">菜单列表</a>
                    </li>
                    <li><a href="">M菜单列表</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown">
                <a aria-expanded="false" role="button" href="#" class="dropdown-toggle" data-toggle="dropdown"> 菜单 <span class="caret"></span></a>
                <ul role="menu" class="dropdown-menu">
                    <li><a href="">菜单列表</a>
                    </li>
                    <li><a href="">菜单列表</a>
                    </li>
                    <li><a href="">菜单列表</a>
                    </li>
                    <li><a href="">菜单列表</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown">
                <a aria-expanded="false" role="button" href="#" class="dropdown-toggle" data-toggle="dropdown"> 菜单 <span class="caret"></span></a>
                <ul role="menu" class="dropdown-menu">
                    <li><a href="">菜单列表</a>
                    </li>
                    <li><a href="">菜单列表</a>
                    </li>
                    <li><a href="">菜单列表</a>
                    </li>
                    <li><a href="">菜单列表</a>
                    </li>
                </ul>
            </li>

        </ul>
        <ul class="nav navbar-top-links navbar-right">
            <li>
                <a href="login.html">
                    <i class="fa fa-sign-out"></i> 退出
                </a>
            </li>
        </ul>
    </div>
</nav>

设置

H+为您提供了以下几种布局方式，可以灵活引用：

固定顶部导航

固定顶部导航是指当屏幕滚动时顶部导航固定在顶部显示

实现顶部导航固定我们需要在body元素上添加.fixed-nav 

    <body class="fixed-nav">

接下来我们需要修改.navbar-static-top为.navbar-fixed-top 

<nav class="navbar navbar-fixed-top" role="navigation">

RTL支持

RTL（从右向左阅读）

添加RTL支持需要我们在所有页面的body元素（包括iframe页面）上添加.rtls 

<body class="rtls">

接下来我们需要在head中引入相关的支持文件 

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/plugins/bootstrap-rtl/bootstrap-rtl.css" rel="stylesheet">

添加RTL支持之后界面会变成下图所示的样子：

布局2

布局2是上下布局，内容居中的布局形式

布局2的示例我们可以从查看index_v5.html

使用布局2后的效果如下图：

模板皮肤

除默认皮肤外，H+还包含了2套皮肤可供选择

可以通过为元素添加不同的class实现换肤，同时您也可以制作自己的皮肤

如：我们可以在body元素上添加.skin-1

在CSS文件style.css中，您可以修改这些皮肤的颜色和样式

  • .skin-1 - 蓝色主题
  • .skin-3 - 黄色/紫色主题
  • 默认皮肤不需要添加任何class
v3.0中移除了.skin-2（灰色皮肤）

主题设置

主题设置是一个实时预览主题改变效果的设置框，它放在主题的右上角的位置（点击齿轮图标可以展开和收起）

如果您在本地测试时看不到主题设置框，建议您放到localhost下面

我们没有直接在页面中添加主题设置的html代码，而是通过在hplus.js文件中添加了对应的函数来实现，您可以通过查找“// //主题设置”注释来查看对应代码

如果您需要移除主题设置框，只需要注释或移除对应的代码即可

如何从v3.x升级到v4.1.0

直接覆盖即可。

相关参考文档

H+基于Bootstrap，所以您可以参考以下文档：

  1. Bootstrap中文文档：http://v3.bootcss.com/getting-started/
  2. Bootstrap官方文档：http://getbootstrap.com/getting-started/

H+集成了很多国内外优秀的第三方插件，对于这些插件，暂时没有整理文档，因为我相信再怎么整理，都不如插件官方的文档权威，但是基本上都提供了官方的链接，请各位同学根据需要自行百度，备梯和参考官方文档。另外关于集成的插件，请多看看官方文档，不建议照着demo一试，不行，就找我，一般情况下，我不负责解决由于各种不注意，不细心，不学习所引起的插件使用问题。