Permalink
Find file
4c72ade Sep 6, 2016
@Catouse @iamazhi
308 lines (290 sloc) 16.7 KB
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ZUI - 开源HTML5跨屏框架</title>
<link href="docs/css/zui.min.css" rel="stylesheet">
<link href="docs/css/doc.min.css" rel="stylesheet">
<style id="themeStyle"></style>
<link rel="shortcut icon" href="docs/favicon.ico" type="image/x-icon">
<link rel="icon" href="docs/favicon.ico" type="image/x-icon">
<!--[if lt IE 9]>
<script src="dist/lib/ieonly/html5shiv.js"></script>
<script src="dist/lib/ieonly/respond.js"></script>
<script src="dist/lib/ieonly/excanvas.js"></script>
<![endif]-->
</head>
<body>
<header id="header" class="bg-primary">
<div class="navbar navbar-inverse navbar-fixed-top" id="navbar" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".zui-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/" class="navbar-brand"><span class="path-zui-36"><i class="path-1"></i><i class="path-2"></i></span> <span class="brand-title">ZUI</span> &nbsp;<small class="zui-version"></small> <i data-toggle="tooltip" id="compactTogger" data-placement="bottom" class="icon icon-home"></i></a>
</div>
<nav class="collapse navbar-collapse zui-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li id="navDownloadLink"><a title="立即下载" href="docs/download/zui-1.5.0-dist.zip" target="_blank"><i class="icon icon-download-alt"></i><span> 立即下载</span></a></li>
<li><a title="论坛" href="http://forum.zui.sexy/forum/" target="_blank"><i class="icon icon-comments-alt"></i><span> 论坛</span></a></li>
<li><a title="在Github上Star项目" href="https://github.com/easysoft/zui" target="_blank"><i class="icon icon-github"></i><span> Star</span></a></li>
</ul>
</nav>
</div>
</div>
<div id="headContainer">
<div class="container">
<div id="heading">
<h1>ZUI</h1>
<p>一个基于 Bootstrap 深度定制开源前端实践方案,帮助你快速构建现代跨屏应用。</p>
<div id="download">
<a href="docs/download/zui-1.5.0-dist.zip" class="btn btn-primary btn-lg">立即下载 <i class="icon icon-download-alt"></i></a>
<a href="#basic/download" class="btn btn-white btn-lg">快速上手 <i class="icon icon-hand-right"></i></a>
<p><small>最新版本 <span class="zui-version"><i class='icon icon-spin icon-spinner-indicator'></i></span> &nbsp; <a style="color: #f1f1f1" href="https://github.com/easysoft/zui/archive/master.zip" target="_blank">下载源码</a></small></p>
</div>
<p>QQ群:384135104 &nbsp; <a href="http://forum.zui.sexy/forum/" style="color: #f1f1f1" target="_blank"><i class="icon icon-comments-alt"></i> 论坛</a></p>
</div>
<div id="search">
<div id="searchForm">
<input type="text" class="form-control input-lg" id="searchInput" placeholder="按钮, control, icon-star..."/>
<i class="icon icon-search"></i>
<button id="searchHelpBtn" type="button" class="btn btn-link"><i class="icon icon-question"></i></button>
</div>
</div>
</div>
<div class="text-center" id="ad">
<a href="http://zui.sexy/m/" target="_blank"><i class="icon icon-diamond"></i> &nbsp; MZUI &nbsp; // <span class="hidden-xs inline">为移动端设计,</span>基于 Flex 的 UI 框架</a>
</div>
</div>
</header>
<!-- 新开子页面 -->
<div id="page">
<div id="pageHeader">
<div class="wrapper container">
<i class="icon icon-star"></i>
<h2><a class="name" href="###">图标</a></h2>
<button type="button" class="btn btn-link" id="pageTogger" title="折叠/展开 章节" data-toggle="tooltip"></button>
<button data-toggle="tooltip" title="刷新" type="button" class="btn btn-link" id="pageReloadBtn"><i class="icon-repeat"></i></button>
<button data-toggle="tooltip" title="关闭(ESC)" type="button" class="btn btn-link path-close-btn path-btn" id="pageCloseBtn"><i class="path-1"></i></button>
</div>
</div>
<div id="pageBody" class="scrollbar-hover">
<div class="container">
<div id="pageAttrs" class="clearfix">
<div class="badge badge-zui" style="display: none" data-toggle="tooltip" title="此组件在标准版中提供">ZUI</div>
<div class="badge badge-lite" style="display: none" data-toggle="tooltip" title="此组件在简洁版中提供">LITE</div>
<div class="badge badge-lib" style="display: none" data-toggle="tooltip" title="此组件在lib目录中单独提供">LIB</div>
<a class="badge badge-party" style="display: none" data-toggle="tooltip" title="这是第三方组件,点击访问网站" target="_blank"><i class="icon icon-heart"></i> <span class="product-ver"></span></a>
<a class="badge badge-bootstrap" style="display: none" data-toggle="tooltip" title="该组件最初来源于 Bootstrap,点击访问 Bootstrap 网站" target="_blank" href="http://getbootstrap.com/">B</a>
<div class="badge badge-custom" style="display: none" data-toggle="tooltip" title="此组件可以拆分使用"><i class="icon icon-cogs"></i></div>
<div class="badge badge-version" style="display: none" data-toggle="tooltip" title="此组件的最早提供版本">1.2.0+</div>
<div class="badge badge-author hidden" data-toggle="tooltip" title="本文档作者"><i class="icon icon-user"></i> <span class="author-name">Catouse</span></div>
<a href="#" target="_blank" class="badge badge-source pull-right" data-toggle="tooltip" title="访问文档源码,Fork项目来完善文档"><i class="icon icon-pencil"></i></a>
<div class='dropdown pull-right badge-code-dropdown'>
<button type="button" data-toggle="dropdown" title="查看源码和打包信息" class="badge btn btn-link badge-code"><span class="badge-code-source"><i class="icon icon-file-code"></i> <span class="count"></span></span><span class="badge-code-pkgs"><i class="icon icon-cube"></i> <span class="count"></span></span></button>
<ul class="dropdown-menu"></ul>
</div>
</div>
</div>
<div class="loader" id="pageLoader"><i class="icon icon-spin icon-spinner-indicator"></i> <span class="loading-text">加载中...</span><span class="error-text">加载失败,请检查网络重试。<br>另一个导致无法加载文档的原因可能是该文档尚未完成。<br>欢迎你在 <a href="https://github.com/easysoft/zui">Github</a> 上 <a href="https://github.com/easysoft/zui/fork">Fork</a> 项目来完善文档。</span></div>
<div class="container">
<div id="pageContent"></div>
<nav></nav>
</div>
</div>
</div>
<!-- 当 file: 协议访问时的提示 -->
<div id="fileProtocolTip" class="hidden">
<div class="container-fixed-sm">
<h1>不支持 <code>file://</code> 协议</h1>
<p>看起来,你正在使用 <code>file://</code> 协议访问 ZUI 文档首页。因为 ZUI 文档内容需要进行异步加载,你需要使用 <code>http://</code> 协议或 <code>https://</code> 协议来访问本文档。</p>
<p>如果下载了完整的 ZUI 源码包,且系统上已经安装有 <a href="https://nodejs.org/zh-cn/" target="_blank">Node.js</a> 环境,只需按照如下步骤即可立即正常访问文档:</p>
<ol>
<li>进入 ZUI 源码目录;</li>
<li>执行 <code>npm install</code>;</li>
<li>执行 <code>npm start</code>;</li>
<li>在浏览器中访问 <a href="http://127.0.0.1:8088">http://127.0.0.1:8088</a>。</li>
</ol>
<p>你也可以访问在线文档:</p>
<ul>
<li>官方网站:<a href="http://zui.sexy">http://zui.sexy</a></li>
<li>开发中的网站:<a href="http://easysoft.github.io/zui/">https://easysoft.github.io/zui/</a></li>
</ul>
</div>
</div>
<div data-placement="left" title="切换界面布局" data-toggle="tooltip" id="changeViewWrapper">
<button type="button" class="btn btn-primary" id="changeViewBtn" data-toggle="modal" data-target="#changeViewModal"><i class="icon icon-columns"></i></button>
</div>
<!-- 远程内容加载图标 -->
<div class="text-muted loader loading"><i class="icon icon-spin icon-spinner-indicator"></i> 加载中...</div>
<!-- 内容目录 -->
<div id="grid" class="scrollbar-hover">
<div class="container">
<div class="row">
<div class="col col-md-d5 col-sm-6">
<div class="chapter" id="chapter-basic" data-id="basic">
<div class="chapter-heading fade scale show">
<h4><i class="icon icon-book"></i> <span class='name'>基础</span></h4>
</div>
<div class="chapter-body" id="sections-basic">
</div>
</div>
</div>
<div class="col col-md-d5 col-sm-6">
<div class="chapter" id="chapter-control" data-id="control">
<div class="chapter-heading fade scale show">
<h4><i class="icon icon-check-empty"></i> <span class='name'>控件</span></h4>
</div>
<div class="chapter-body" id="sections-control">
</div>
</div>
</div>
<div class="col col-md-d5 col-sm-6">
<div class="chapter" id="chapter-component" data-id="component">
<div class="chapter-heading fade scale show">
<h4><i class="icon icon-columns"></i> <span class='name'>组件</span></h4>
</div>
<div class="chapter-body" id="sections-component">
</div>
</div>
</div>
<div class="col col-md-d5 col-sm-6">
<div class="chapter" id="chapter-javascript" data-id="javascript">
<div class="chapter-heading fade scale show">
<h4><i class="icon icon-magic"></i> <span class='name'>JS插件</span></h4>
</div>
<div class="chapter-body" id="sections-javascript">
</div>
</div>
</div>
<div class="col col-md-d5 col-sm-6">
<div class="chapter" id="chapter-view" data-id="view">
<div class="chapter-heading fade scale show">
<h4><i class="icon icon-list-alt"></i> <span class='name'>视图</span></h4>
</div>
<div class="chapter-body" id="sections-view">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col col-md-3 col-sm-6">
<div class="chapter" id="chapter-learn" data-id="learn">
<div class="chapter-heading fade scale show">
<h4><i class="icon icon-node"></i> <span class='name'>交流探索</span></h4>
</div>
<div class="chapter-body" id="sections-learn">
</div>
</div>
</div>
<div class="col col-md-3 col-sm-6">
<div class="chapter" id="chapter-promotion" data-id="promotion">
<div class="chapter-heading fade scale show">
<h4><i class="icon icon-diamond"></i> <span class='name'>推荐</span></h4>
</div>
<div class="chapter-body" id="sections-promotion">
</div>
</div>
</div>
<div class="col col-md-3 col-sm-6">
<div class="chapter" id="chapter-resource" data-id="resource">
<div class="chapter-heading fade scale show">
<h4><i class="icon icon-coffee"></i> <span class='name'>更多资源</span></h4>
</div>
<div class="chapter-body" id="sections-resource">
</div>
</div>
</div>
<div class="col col-md-3 col-sm-6">
<div class="chapter" id="chapter-contribution" data-id="contribution">
<div class="chapter-heading fade scale show">
<h4><i class="icon icon-heart"></i> <span class='name'>贡献</span></h4>
</div>
<div class="chapter-body" id="sections-contribution">
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<hr>
<p class="text-muted small">文档版本 <span class="doc-version"><i class="icon icon-spin icon-spinner-indicator"></i></span> &nbsp; 共 <span class="text-page-count"></span> 篇内容,<span class="text-external-count"></span> 个外链主题</p>
</div>
</footer>
<!-- 一些html模板代码片段 -->
<div class="template">
<div class="card section fade scale slide-in-up-100 slide-in-right-50" id="sectionTemplate">
<div class="card-heading">
<i class="icon"></i>
<h5><a class="name" href="###"></a></h5>
</div>
<div class="card-content">
<ul class="topics">
</ul>
</div>
</div>
<div class="card-content section-preview icon-preview" id="iconPreviewTemplate">
<div class="icons"><i class="icon icon-10x"></i><i class="icon icon-5x"></i><i class="icon icon-2x"></i><i class="icon"></i></div>
<h3><small><i class="icon "></i></small> <span class="name color-accent"></span> <small>Unicode: \<span class="unicode">f3dd</span><span class="alias"> · 别名:<span class="alias-values"></span></span></small></h3>
<pre class="copyable"><code><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">&quot;icon <em class="name"></em>&quot;</span><span class="tag">&gt;&lt;/i&gt;</span></code></pre>
</div>
<button id="copyCodeBtn" data-html="true" data-animation="false" data-toggle="tooltip" data-title="复制代码" type="button" class="btn btn-copy-code" data-tip-id="copyCodeTip" data-container="body"><i class="icon icon-copy"></i></button>
</div>
<div class="modal fade" id="changeViewModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
<h4 class="modal-title">你想用哪种布局展示页面?</h4>
</div>
<div class="modal-body">
<div class="view-options">
<a class="view-option view-option-single">
<div class="view-shape">
<div class="s-1"></div>
</div>
<div class="title strong">单页面</div>
<p class="text-muted">页面在页面中间显示,并隐藏目录。</p>
</a>
<a class="view-option view-option-double">
<div class="view-shape">
<div class="s-1"></div>
</div>
<div class="title strong">双栏</div>
<p class="text-muted">目录在左侧显示,页面在右侧显示,更好的利用宽屏空间。</p>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
<script src="assets/jquery.js"></script>
<script src="assets/clipboard/clipboard.min.js"></script>
<script src="assets/less/less.min.js"></script>
<!-- ZUI Javascript组件 -->
<script src="docs/js/zui.min.js"></script>
<script src="docs/js/doc.min.js"></script>
<!-- 增强文档插件 -->
<script async src="assets/prettify/prettify.js"></script>
<script src="assets/marked/marked.min.js"></script>
<!-- Statistic -->
<div class="hide"><script src="http://s95.cnzz.com/stat.php?id=1253026255&web_id=1253026255"></script></div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-53781622-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>