Hplus(H+) 后台主题 UI 框架

This commit is contained in:
RuoYi
2024-09-05 20:27:19 +08:00
commit 9e4f964eef
642 changed files with 229209 additions and 0 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

+625
View File
@@ -0,0 +1,625 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H+ 后台主题UI框架 开发文档</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="js/google-code-prettify/prettify.css" rel="stylesheet">
<style>
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, "Microsoft YaHei", Arial, sans-serif;
}
.documentation .jumbotron .row {
padding-top: 60px;
}
.anchor {
padding-top: 50px;
}
h3,
h4 {
margin-top: 30px;
}
</style>
</head>
<body class="documentation">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">菜单切换</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">H+开发文档</a>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>H+ 后台主题UI框架</h2>
<p>非常感谢您选择和使用H+,在使用H+之前请注意以下事项:</p>
<p>1.为了保证所有功能都可正常使用,请在服务器环境(本地测试可使用localhost)下运行;</p>
<p>2.请认真阅读本文档后再开始使用H+</p>
</div>
<div class="col-md-6">
<img src="img/preview.png" alt="screen" class="img-responsive" />
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>内容导航</h2>
<ul>
<li><a href="#documentation">关于文档</a>
</li>
<li><a href="#folder_structure">文件夹结构</a>
</li>
<li><a href="#layout_structure">布局结构</a>
</li>
<li><a href="#options">设置选项</a>
<ul>
<li><a href="#fixed_navbar">固定顶部导航</a>
</li>
<li><a href="#rtl_support">RTL支持</a>
</li>
<li><a href="#layout_2">布局2</a>
</li>
<li><a href="#skins">模板皮肤</a>
</li>
<li><a href="#themeconfig">主题设置</a>
</li>
</ul>
</li>
<li><a href="#change_log">如何从v3.x升级到v4.1.0</a>
</li>
<li><a href="#links">相关参考文档</a>
</li>
<li><a href="#contact">付费二次开发服务</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a name="documentation" class="anchor"></a>
<h3>关于H+</h3>
<p>H+是一个完全响应式,基于Bootstrap3.3.4最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术,她提供了诸多的强大的可以重新组合的UI组件,并集成了最新的jQuery版本(v2.1.1),当然,也集成了很多功能强大,用途广泛的jQuery插件,她可以用于所有的Web应用程序,如网站管理后台,网站会员中心,CMS,CRM,OA等等,当然,您也可以对她进行深度定制,以做出更强系统。</p>
<div class="row">
<a name="folder_structure" class="anchor"></a>
<div class="col-md-6">
<h3>结构</h3>
<h4>文件夹和文件</h4>
<div><pre class="prettyprint linenums">
<code>Hplus-v.3.0.1/
├── <strong>css/</strong>(css文件夹,包含框架主要css及示例、插件的css文件)
├── <strong>docs/</strong>(开发文档)
├── <strong>fonts/</strong>(字体图标,包含FontAwesome字体图标和Bootstrap自带的Glyphicons字体图标)
├── <strong>img/</strong>(图片)
├── <strong>js/</strong>(js文件夹,包含框架主要的js及示例、插件的js文件)
├── <strong>plugins/</strong>(存放Flash等插件)
├── 404.html404页面)
├── 500.html500页面)
├── agile_board.html(任务清单)
├── article.html(文章页面)
├── badges_labels.html(徽章,标签,进度条)
├── basic_gallery.html(基本图库)
├── blog.html(文章列表)
├── blueimp.htmlBlueimp相册)
├── buttons.html(按钮)
├── calendar.html(日历)
├── carousel.html(图片切换)
├── chat_view.html(聊天窗口)
├── clients.html(客户管理)
├── code_editor.html(代码编辑器)
├── contacts.html(联系人)
├── css_animation.htmlcss动画)
├── diff.html(文本对比)
├── draggable_panels.html(拖动面板)
├── empy_page.html(空白页面)
├── faq.htmlFAQ
├── file_manager.html(文件管理)
├── form_advanced.html(高级表单)
├── form_avatar.html(富头像上传编辑器)
├── form_basic.html(基本表单)
├── form_builder.html(表单构建器)
├── form_editors.html(富文本编辑器)
├── form_file_upload.html(文件上传)
├── form_markdown.htmlMarkdown编辑器)
├── form_simditor.htmlSimditor富文本编辑器)
├── form_validate.html(表单验证)
├── form_webuploader.html(百度 Web Uploader
├── form_wizard.html(表单向导)
├── forum_main.html(论坛)
├── glyphicons.htmlGlyphicons图标)
├── graph_echarts.html(百度ECHarts
├── graph_flot.htmlFlot图表)
├── graph_metrics.html(图表组合)
├── graph_morris.htmlMorris.js图表)
├── graph_peity.htmlPeity图表)
├── graph_rickshaw.htmlRickshaw图表)
├── graph_sparkline.htmlSparkline图表)
├── 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.htmlweb弹层组件layer
├── layerdate.html(日期选择器layerDate
├── layerphoto.htmllayer相册)
├── 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(通知 &amp; 提示)
├── 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.htmlSweet alert
├── table_basic.html(基础表格)
├── table_data_tables.html(数据表格)
├── table_foo_table.htmlFooTable
├── table_jqgrid.htmljqGird
├── table_bootstrap.htmlBootstrap Table
├── tabs_panels.html(选项卡 &amp; 面板)
├── teams_board.html(团队管理)
├── timeline.html(时间轴)
├── timeline_v2.html(时间轴2
├── toastr_notifications.htmlToastr通知)
├── tree_view.html(树形视图)
├── typography.html(排版)
├── webim.htmlWebIM即时通讯)
├── widgets.html(小部件)
</code></pre>
</div>
</div>
<div class="col-md-6">
<h3>主页面的HTML元素</h3>
<p>框架的正常结构元素包含以下几个方面(参考index.html):</p>
<ol>
<li><code>#wrapper</code> body元素之后的主容器</li>
<li><code>nav .navbar-static-side</code> 左侧导航<b>菜单</b>.</li>
<li><code>#page-wrapper</code> 页面内容的主容器</li>
<li><code>nav .navbar-static-top</code> 顶部菜单</li>
<li><code>.footer</code> 页脚主容器</li>
</ol>
<h3>iframe子页面的HTML元素</h3>
<p>框架的正常子页面结构元素包含以下几个方面(参考empty_page.html):</p>
<ol>
<li><code>.page-heading</code> 页面标题及包屑式导航容器</li>
<li><code>.wrapper-content</code> html元素主容器</li>
</ol>
<hr>
<a target="_blank" href="img/page.png"><img class="img-responsive" src="img/page.png" alt="page structure">
</a>
</div>
</div>
<div class="row">
<a name="layout_structure" class="anchor"></a>
<div class="col-lg-12">
<h3>布局结构(经典布局)</h3>
<p>在所有页面的 <code>&lt;head&gt;</code> 中,应包含的meta和css等如下:</p>
<pre class="prettyprint linenums">
&lt;!DOCTYPE html>
&lt;head>
&lt;!-- Meta --&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&lt;
&lt;meta name="renderer" content="webkit"&gt;
&lt;title&gt;H+ 后台主题UI框架 - 页面&lt;/title&gt;
&lt;!-- CSS文件 --&gt;
&lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;link href="css/font-awesome.css" rel="stylesheet"&gt;
&lt;link href="css/animate.css" rel="stylesheet"&gt;
&lt;link href="css/style.css" rel="stylesheet"&gt;
&lt;/head&gt;</pre>
<h3>主页</h3>
<pre class="prettyprint linenums">
&lt;body class="fixed-sidebar full-height-layout gray-bg"&gt;
&lt;div id="wrapper"&gt;
&lt;!--左侧导航开始--&gt;
&lt;nav class="navbar-default navbar-static-side" role="navigation"&gt;
&lt;div class="nav-close"&gt;&lt;i class="fa fa-times-circle"&gt;&lt;/i&gt;&lt;/div&gt;
&lt;div class="sidebar-collapse"&gt;
&lt;ul class="nav" id="side-menu"&gt;
&lt;li class="nav-header"&gt;
&lt;div class="dropdown profile-element"&gt;
&lt;span&gt;&lt;img alt="image" class="img-circle" src="img/profile_small.jpg" /&gt;&lt;/span&gt;
&lt;a data-toggle="dropdown" class="dropdown-toggle" href="#"&gt;
&lt;span class="clear"&gt;
&lt;span class="block m-t-xs"&gt;&lt;strong class="font-bold"&gt;Beaut-ruoyi&lt;/strong&gt;&lt;/span&gt;
&lt;span class="text-muted text-xs block"&gt;超级管理员&lt;b class="caret"&gt;&lt;/b&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;/a&gt;
&lt;ul class="dropdown-menu animated fadeInRight m-t-xs"&gt;
&lt;li&gt;&lt;a class="J_menuItem" href="form_avatar.html"&gt;修改头像&lt;/a&gt;
&lt;/li&gt;
……
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="logo-element"&gt;H+
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="#"&gt;
&lt;i class="fa fa-home"&gt;&lt;/i&gt;
&lt;span class="nav-label"&gt;主页&lt;/span&gt;
&lt;span class="fa arrow"&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;ul class="nav nav-second-level"&gt;
&lt;li&gt;
&lt;a class="J_menuItem" href="index_v1.html" data-index="0"&gt;主页示例一&lt;/a&gt;
&lt;!--默认主页需在对应的菜单a元素上添加data-index="0"--&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a class="J_menuItem" href="index_v2.html"&gt;主页示例二&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a class="J_menuItem" href="index_v3.html"&gt;主页示例三&lt;/a&gt;
&lt;/li&gt;
……
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;!--其他菜单项--&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/nav&gt;
&lt;!--左侧导航结束--&gt;
&lt;!--右侧部分开始--&gt;
&lt;div id="page-wrapper" class="gray-bg dashbard-1"&gt;
&lt;div class="row border-bottom"&gt;
&lt;nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0"&gt;
……
&lt;/nav&gt;
&lt;/div&gt;
&lt;div class="row content-tabs"&gt;
&lt;button class="roll-nav roll-left J_tabLeft"&gt;&lt;i class="fa fa-angle-double-left"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;nav class="page-tabs J_menuTabs"&gt;
&lt;div class="page-tabs-content"&gt;
&lt;a href="javascript:;" class="active J_menuTab" data-id="index_v1.html"&gt;首页&lt;/a&gt;
&lt;!--默认主页需在对应的选项卡a元素上添加data-id="默认主页的url"--&gt;
&lt;/div&gt;
&lt;/nav&gt;
&lt;button class="roll-nav roll-right J_tabRight"&gt;&lt;i class="fa fa-angle-double-right"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;div class="row J_mainContent" id="content-main"&gt;
&lt;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&gt;&lt;/iframe&gt;
&lt;!--默认主页需在对应的页面显示iframe元素上添加name="iframe0"和data-id="默认主页的url"--&gt;
&lt;/div&gt;
&lt;div class="footer"&gt;
&lt;div class="pull-right"&gt;&copy; 2014-2015 &lt;a href="http://www.ruoyi.vip/" target="_blank"&gt;ruoyi&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!--右侧部分结束--&gt;
&lt;/div&gt;
&lt;!-- 全局js --&gt;
&lt;script src="js/jquery.min.js?v=2.1.4"&gt;&lt;/script&gt;
&lt;script src="js/bootstrap.min.js?v=3.3.7"&gt;&lt;/script&gt;
&lt;script src="js/plugins/metisMenu/jquery.metisMenu.js"&gt;&lt;/script&gt;
&lt;script src="js/plugins/slimscroll/jquery.slimscroll.min.js"&gt;&lt;/script&gt;
&lt;script src="js/plugins/layer/layer.min.js"&gt;&lt;/script&gt;
&lt;!-- 自定义js --&gt;
&lt;script src="js/hplus.js?v=4.1.0"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/contabs.js"&gt;&lt;/script&gt;
&lt;!-- 第三方插件 --&gt;
&lt;script src="js/plugins/pace/pace.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;</pre>
<h3>iframe子页面</h3>
<p>主内容包括页面顶部和页面内容</p>
<pre class="prettyprint linenums">
&lt;div class="row wrapper border-bottom white-bg page-heading"&gt;
&lt;div class="col-lg-9"&gt;
&lt;h2&gt;这里是标题&lt;/h2&gt;
&lt;ol class="breadcrumb"&gt;
&lt;li&gt;
&lt;a href="index.html"&gt;这是&lt;/a&gt;
&lt;/li&gt;
&lt;li class="active"&gt;
&lt;strong&gt;包屑式导航&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
&lt;div class="col-lg-3"&gt;
&lt;div class="title-action"&gt;
&lt;a href="" class="btn btn-primary"&gt;活动区域&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="row"&gt;
&lt;div class="col-lg-12"&gt;
&lt;div class="wrapper wrapper-content"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
<b>注意:必要时在iframe子页面中需要引入js/content.js,此节可参考empty_page.html</b>
<hr>
<h3>上下式布局(可选布局)</h3>
<p>二级菜单示例</p>
<pre class="prettyprint linenums">
&lt;nav class="navbar navbar-static-top" role="navigation"&gt;
&lt;div class="navbar-header"&gt;
&lt;button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button"&gt;
&lt;i class="fa fa-reorder"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;a href="#" class="navbar-brand"&gt;Hplus&lt;/a&gt;
&lt;/div&gt;
&lt;div class="navbar-collapse collapse" id="navbar"&gt;
&lt;ul class="nav navbar-nav"&gt;
&lt;li class="active"&gt;
&lt;a aria-expanded="false" role="button" href="layouts.html"&gt; 返回布局页面&lt;/a&gt;
&lt;/li&gt;
&lt;li class="dropdown"&gt;
&lt;a aria-expanded="false" role="button" href="#" class="dropdown-toggle" data-toggle="dropdown"&gt; 菜单 &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
&lt;ul role="menu" class="dropdown-menu"&gt;
&lt;li&gt;&lt;a href=""&gt;菜单列表&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href=""&gt;菜单列表&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href=""&gt;菜单列表&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href=""&gt;菜单列表&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li class="dropdown"&gt;
&lt;a aria-expanded="false" role="button" href="#" class="dropdown-toggle" data-toggle="dropdown"&gt; 菜单 &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
&lt;ul role="menu" class="dropdown-menu"&gt;
&lt;li&gt;&lt;a href=""&gt;菜单列表&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href=""&gt;菜单列表&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href=""&gt;菜单列表&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href=""&gt;M菜单列表&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li class="dropdown"&gt;
&lt;a aria-expanded="false" role="button" href="#" class="dropdown-toggle" data-toggle="dropdown"&gt; 菜单 &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
&lt;ul role="menu" class="dropdown-menu"&gt;
&lt;li&gt;&lt;a href=""&gt;菜单列表&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href=""&gt;菜单列表&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href=""&gt;菜单列表&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href=""&gt;菜单列表&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li class="dropdown"&gt;
&lt;a aria-expanded="false" role="button" href="#" class="dropdown-toggle" data-toggle="dropdown"&gt; 菜单 &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
&lt;ul role="menu" class="dropdown-menu"&gt;
&lt;li&gt;&lt;a href=""&gt;菜单列表&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href=""&gt;菜单列表&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href=""&gt;菜单列表&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href=""&gt;菜单列表&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="nav navbar-top-links navbar-right"&gt;
&lt;li&gt;
&lt;a href="login.html"&gt;
&lt;i class="fa fa-sign-out"&gt;&lt;/i&gt; 退出
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/nav&gt;
</pre>
<hr>
<a name="options" class="anchor"></a>
<h3>设置</h3>
<p>H+为您提供了以下几种布局方式,可以灵活引用:
<ul>
<li><a href="#fixed_navbar">固定顶部导航</a>
</li>
<li><a href="#rtl_support">RTL支持</a>
</li>
<li><a href="#layout_2">布局2</a>
</li>
<li><a href="#skins">模板皮肤</a>
</li>
</ul>
</p>
<a name="fixed_navbar" class="anchor"></a>
<h4>固定顶部导航</h4>
<p>
固定顶部导航是指当屏幕滚动时顶部导航固定在顶部显示
</p>
<p>
实现顶部导航固定我们需要在body元素上添加<code>.fixed-nav</code>
</p>
<pre class="prettyprint linenums">
&lt;body class="fixed-nav"&gt;
</pre>
<p>
接下来我们需要修改.navbar-static-top为<code>.navbar-fixed-top</code>
</p>
<pre class="prettyprint linenums">
&lt;nav class="navbar navbar-fixed-top" role="navigation"&gt;
</pre>
<a name="rtl_support" class="anchor"></a>
<h4>RTL支持</h4>
<p>
RTL(从右向左阅读)
</p>
<p>
添加RTL支持需要我们在所有页面的body元素(包括iframe页面)上添加<code>.rtls</code>
</p>
<pre class="prettyprint linenums">
&lt;body class="rtls"&gt;
</pre>
<p>
接下来我们需要在head中引入相关的支持文件
</p>
<pre class="prettyprint linenums">
&lt;!-- Bootstrap --&gt;
&lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;link href="css/plugins/bootstrap-rtl/bootstrap-rtl.css" rel="stylesheet"&gt;
</pre>
<p>
添加RTL支持之后界面会变成下图所示的样子:
</p>
<img class="img-responsive" src="img/rtl_support.png" alt="">
<a name="layout_2" class="anchor"></a>
<h4>布局2</h4>
<p>
布局2是上下布局,内容居中的布局形式
</p>
<p>
布局2的示例我们可以从查看index_v5.html
</p>
<p>
使用布局2后的效果如下图:
</p>
<img class="img-responsive" src="img/index_4.png" alt="">
<a name="skins" class="anchor"></a>
<h4>模板皮肤</h4>
<p>除默认皮肤外,H+还包含了2套皮肤可供选择</p>
<p><strong>可以通过为元素添加不同的class实现换肤,同时您也可以制作自己的皮肤</strong>
</p>
<p>如:我们可以在body元素上添加<code>.skin-1</code></p>
<p>在CSS文件style.css中,您可以修改这些皮肤的颜色和样式</p>
<ul>
<li><code>.skin-1</code> - 蓝色主题</li>
<li><code>.skin-3</code> - 黄色/紫色主题</li>
<li>默认皮肤不需要添加任何class</li>
</ul>
<b>v3.0中移除了.skin-2(灰色皮肤)</b>
<a name="themeconfig" class="anchor"></a>
<h4>主题设置</h4>
<p>主题设置是一个实时预览主题改变效果的设置框,它放在主题的右上角的位置(点击齿轮图标可以展开和收起)</p>
<p>如果您在本地测试时看不到主题设置框,建议您放到localhost下面</p>
<p>我们没有直接在页面中添加主题设置的html代码,而是通过在hplus.js文件中添加了对应的函数来实现,您可以通过查找“// //主题设置”注释来查看对应代码</p>
<p>如果您需要移除主题设置框,只需要注释或移除对应的代码即可</p>
<a name="change_log" class="anchor"></a>
<h3>如何从v3.x升级到v4.1.0</h3>
<p>直接覆盖即可。</strong>
</p>
<a name="links" class="anchor"></a>
<h3>相关参考文档</h3>
<p>H+基于Bootstrap,所以您可以参考以下文档:
</p>
<ol>
<li>Bootstrap中文文档:<a href="http://v3.bootcss.com/getting-started/" target="_blank">http://v3.bootcss.com/getting-started/</a></li>
<li>Bootstrap官方文档:<a href="http://getbootstrap.com/getting-started/" target="_blank">http://getbootstrap.com/getting-started/</a></li>
</ol>
<p>H+集成了很多国内外优秀的第三方插件,对于这些插件,暂时没有整理文档,因为我相信再怎么整理,都不如插件官方的文档权威,但是基本上都提供了官方的链接,请各位同学根据需要自行百度,备梯和参考官方文档。另外关于集成的插件,请多看看官方文档,不建议照着demo一试,不行,就找我,一般情况下,我不负责解决由于各种不注意,不细心,不学习所引起的插件使用问题。
</p>
<hr>
</div>
</div>
</div>
<footer>
<p>&copy; Hplus</p>
</footer>
</div>
</div>
<script src="../js/jquery.min.js?v=2.1.4"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="js/prettify.js"></script>
<script>
$(function () {
window.prettyPrint && prettyPrint();
})
</script>
</body>
</html>
+30
View File
@@ -0,0 +1,30 @@
.com { color: #93a1a1; }
.lit { color: #195f91; }
.pun, .opn, .clo { color: #93a1a1; }
.fun { color: #dc322f; }
.str, .atv { color: #D14; }
.kwd, .linenums .tag { color: #1e347b; }
.typ, .atn, .dec, .var { color: teal; }
.pln { color: #48484c; }
.prettyprint {
padding: 8px;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
}
.prettyprint.linenums {
-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
margin: 0 0 0 33px; /* IE indents via margin-left */
}
ol.linenums li {
padding-left: 12px;
color: #bebec5;
line-height: 18px;
text-shadow: 0 1px 0 #fff;
}
+28
View File
@@ -0,0 +1,28 @@
var q=null;window.PR_SHOULD_USE_CONTINUATION=!0;
(function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a=
[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c<i;++c){var j=f[c];if(/\\[bdsw]/i.test(j))a.push(j);else{var j=m(j),d;c+2<i&&"-"===f[c+1]?(d=m(f[c+2]),c+=2):d=j;b.push([j,d]);d<65||j>122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;c<b.length;++c)i=b[c],i[0]<=j[1]+1?j[1]=Math.max(j[1],i[1]):f.push(j=i);b=["["];o&&b.push("^");b.push.apply(b,a);for(c=0;c<
f.length;++c)i=f[c],b.push(e(i[0])),i[1]>i[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c<b;++c){var j=f[c];j==="("?++i:"\\"===j.charAt(0)&&(j=+j.substring(1))&&j<=i&&(d[j]=-1)}for(c=1;c<d.length;++c)-1===d[c]&&(d[c]=++t);for(i=c=0;c<b;++c)j=f[c],j==="("?(++i,d[i]===void 0&&(f[c]="(?:")):"\\"===j.charAt(0)&&
(j=+j.substring(1))&&j<=i&&(f[c]="\\"+d[i]);for(i=c=0;c<b;++c)"^"===f[c]&&"^"!==f[c+1]&&(f[c]="");if(a.ignoreCase&&s)for(c=0;c<b;++c)j=f[c],a=j.charAt(0),j.length>=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p<d;++p){var g=a[p];if(g.ignoreCase)l=!0;else if(/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){s=!0;l=!1;break}}for(var r=
{b:8,t:9,n:10,v:11,f:12,r:13},n=[],p=0,d=a.length;p<d;++p){g=a[p];if(g.global||g.multiline)throw Error(""+g);n.push("(?:"+y(g)+")")}return RegExp(n.join("|"),l?"gi":"g")}function M(a){function m(a){switch(a.nodeType){case 1:if(e.test(a.className))break;for(var g=a.firstChild;g;g=g.nextSibling)m(g);g=a.nodeName;if("BR"===g||"LI"===g)h[s]="\n",t[s<<1]=y++,t[s++<<1|1]=a;break;case 3:case 4:g=a.nodeValue,g.length&&(g=p?g.replace(/\r\n?/g,"\n"):g.replace(/[\t\n\r ]+/g," "),h[s]=g,t[s<<1]=y,y+=g.length,
t[s++<<1|1]=a)}}var e=/(?:^|\s)nocode(?:\s|$)/,h=[],y=0,t=[],s=0,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=document.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);m(a);return{a:h.join("").replace(/\n$/,""),c:t}}function B(a,m,e,h){m&&(a={a:m,d:a},e(a),h.push.apply(h,a.e))}function x(a,m){function e(a){for(var l=a.d,p=[l,"pln"],d=0,g=a.a.match(y)||[],r={},n=0,z=g.length;n<z;++n){var f=g[n],b=r[f],o=void 0,c;if(typeof b===
"string")c=!1;else{var i=h[f.charAt(0)];if(i)o=f.match(i[1]),b=i[0];else{for(c=0;c<t;++c)if(i=m[c],o=f.match(i[1])){b=i[0];break}o||(b="pln")}if((c=b.length>=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m),
l=[],p={},d=0,g=e.length;d<g;++d){var r=e[d],n=r[3];if(n)for(var k=n.length;--k>=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/,
q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g,
"");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a),
a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e}
for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g<d.length;++g)e(d[g]);m===(m|0)&&d[0].setAttribute("value",
m);var r=s.createElement("OL");r.className="linenums";for(var n=Math.max(0,m-1|0)||0,g=0,z=d.length;g<z;++g)l=d[g],l.className="L"+(g+n)%10,l.firstChild||l.appendChild(s.createTextNode("\xa0")),r.appendChild(l);a.appendChild(r)}function k(a,m){for(var e=m.length;--e>=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*</.test(m)?"default-markup":"default-code";return A[a]}function E(a){var m=
a.g;try{var e=M(a.h),h=e.a;a.a=h;a.c=e.c;a.d=0;C(m,h)(a);var k=/\bMSIE\b/.test(navigator.userAgent),m=/\n/g,t=a.a,s=t.length,e=0,l=a.c,p=l.length,h=0,d=a.e,g=d.length,a=0;d[g]=s;var r,n;for(n=r=0;n<g;)d[n]!==d[n+2]?(d[r++]=d[n++],d[r++]=d[n++]):n+=2;g=r;for(n=r=0;n<g;){for(var z=d[n],f=d[n+1],b=n+2;b+2<=g&&d[b+1]===f;)b+=2;d[r++]=z;d[r++]=f;n=b}for(d.length=r;h<p;){var o=l[h+2]||s,c=d[a+2]||s,b=Math.min(o,c),i=l[h+1],j;if(i.nodeType!==1&&(j=t.substring(e,b))){k&&(j=j.replace(m,"\r"));i.nodeValue=
j;var u=i.ownerDocument,v=u.createElement("SPAN");v.className=d[a+1];var x=i.parentNode;x.replaceChild(v,i);v.appendChild(i);e<o&&(l[h+1]=i=u.createTextNode(t.substring(b,o)),x.insertBefore(i,v.nextSibling))}e=b;e>=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"],
H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],
J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+
I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),
["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",
/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),
["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes",
hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p<h.length&&l.now()<e;p++){var n=h[p],k=n.className;if(k.indexOf("prettyprint")>=0){var k=k.match(g),f,b;if(b=
!k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p<h.length?setTimeout(m,
250):a&&a()}for(var e=[document.getElementsByTagName("pre"),document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],h=[],k=0;k<e.length;++k)for(var t=0,s=e[k].length;t<s;++t)h.push(e[k][t]);var e=q,l=Date;l.now||(l={now:function(){return+new Date}});var p=0,d,g=/\blang(?:uage)?-([\w.]+)(?!\S)/;m()};window.PR={createSimpleLexer:x,registerLangHandler:k,sourceDecorator:u,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",
PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ"}})();