index.html 11.5 KB
Newer Older
C
Catouse 已提交
1
<!DOCTYPE html>
C
Catouse 已提交
2 3 4 5 6 7
<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>
C
Catouse 已提交
8

C
Catouse 已提交
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
    <link href="docs/css/zui.min.css" rel="stylesheet">
    <link href="docs/css/doc.min.css" rel="stylesheet">
  </head>
  <body>
    <header id="header">
      <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">Toggle navigation</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> ZUI &nbsp;<small class="zui-version"></small></a>
          </div>
          <nav class="collapse navbar-collapse zui-navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
              <li id="navDownloadLink"><a href="https://github.com/easysoft/zui/releases" target="_blank"><i class="icon icon-download-alt"></i><span> 立即下载</span></a></li>
              <li><a href="http://forum.zui.sexy/" target="_blank"><i class="icon icon-comments-alt"></i><span> 论坛</span></a></li>
              <li><a 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>一个开源前端实践方案,帮助你快速构现代跨屏应用。</p>
            <div id="download">
              <a href="https://github.com/easysoft/zui/releases" class="btn btn-primary btn-lg">立即下载 <i class="icon icon-download-alt"></i></a>
              <p><small>最新版本 <span class="zui-version"><i class='icon icon-spin icon-spinner-indicator'></i></span></small></p>
            </div>
          </div>
          <div id="search">
            <div id="searchForm">
              <input type="text" class="form-control input-lg" id="searchInput" placeholder="icon-star, button, control..."/>
              <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>
    </header>

    <div id="pageContainer">
      <div class="container">
        <div id="page">
          <div id="pageHeader">
            <div class="wrapper">
              <i class="icon icon-star"></i>
              <h2><a class="name" href="###">图标</a></h2>
              <small class="text-muted desc">使用和查找图标</small>
              <button type="button" class="btn btn-link" id="pageTogger"></button>
            </div>
            <button data-toggle="tooltip" title="最大化" type="button" class="btn btn-link path-max-btn path-btn"><i class="path-1"></i></button>
            <button data-toggle="tooltip" title="关闭(ESC)" type="button" class="btn btn-link path-close-btn path-btn"><i class="path-1"></i></button>
          </div>
          <div id="pageBody" class="scrollbar-hover">
C
Catouse 已提交
69 70 71 72 73 74 75 76 77 78 79 80
            <div class="container">
              <div id="pageAttrs" class="clearfix">
                <div class="badge badge-zui" data-toggle="tooltip" title="此组件在标准版中提供">ZUI</div>
                <div class="badge badge-lite" data-toggle="tooltip" title="此组件在简洁版中提供">LITE</div>
                <div class="badge badge-lib" data-toggle="tooltip" title="此组件在lib目录中单独提供">LIB</div>
                <a class="badge badge-party" data-toggle="tooltip" title="这是第三方组件,点击访问网站" target="_blank"><i class="icon icon-heart"></i> <span class="product-ver"></span></a>
                <div class="badge badge-custom" data-toggle="tooltip" title="此组件可以拆分使用"><i class="icon icon-cogs"></i></div>
                <div class="badge badge-version" data-toggle="tooltip" title="此组件的最早提供版本">1.2.0+</div>
                <div class="badge badge-author" data-toggle="tooltip" title="本文档作者"><i class="icon icon-user"></i> <span class="author-name">Catouse</span></div>
                <a target="_blank" href="https://github.com/easysoft/zui/tree/master/docs/part" class="badge badge-source pull-right" data-toggle="tooltip" title="访问文档源码,Fork项目来完善文档"><i class="icon icon-code"></i></a>
              </div>
            </div>
C
Catouse 已提交
81 82 83 84 85 86 87
            <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 id="pageContent"></div>
            <nav></nav>
          </div>
        </div>
      </div>
    </div>
C
Catouse 已提交
88

C
Catouse 已提交
89
    <div class="text-muted loader loading"><i class="icon icon-spin icon-spinner-indicator"></i> 正在拼命加载中...</div>
C
Catouse 已提交
90

C
Catouse 已提交
91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148
    <div id="grid">
      <div class="container">
        <div class="row">
          <div class="col col-md-4">
            <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 class="chapter" id="chapter-start" data-id="start">
              <div class="chapter-heading fade scale show">
                <h4><i class="icon icon-flag"></i> <span class='name'>开始</span></h4>
              </div>
              <div class="chapter-body" id="sections-start">
              </div>
            </div>
            <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-4">
            <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 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-4">
            <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 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>
C
Catouse 已提交
149
        </div>
C
Catouse 已提交
150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177
        <div class="row">
          <div class="col col-md-4">
            <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-4">
            <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-4">
            <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>
C
Catouse 已提交
178
        </div>
C
Catouse 已提交
179 180 181 182 183 184 185 186 187 188 189 190 191 192 193
      </div>
    </div>

    <!-- 一些html模板代码片段 -->
    <div class="template">
      <div class="card section fade scale slide-in-up-100 slide-in-right-50" id="sectionTemplate">
        <div class="card-heading">
          <!-- <a class="btn-toggle" href="###"><i class="icon icon-angle-right"></i></a> -->
          <i class="icon"></i>
          <h5><a class="name" href="###"></a></h5>
          <small class="text-muted desc"></small>
        </div>
        <div class="card-content">
          <ul class="topics">
          </ul>
C
Catouse 已提交
194 195
        </div>
      </div>
C
Catouse 已提交
196 197 198 199
      <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><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 <span class="name"></span>&quot;</span><span class="tag">&gt;&lt;/i&gt;</span></code></pre>
C
Catouse 已提交
200
      </div>
C
Catouse 已提交
201 202
    </div>

C
Catouse 已提交
203 204 205 206 207 208 209 210 211
    <!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
    <script src="assets/jquery.js"></script>

    <!-- 增强文档插件 -->
    <script src="assets/google-code-prettify/prettify.js"></script>

    <!-- ZUI Javascript组件 -->
    <script src="docs/js/zui.js"></script>
    <script src="src/js/doc.js"></script>
C
Catouse 已提交
212

C
Catouse 已提交
213 214 215 216 217 218 219
    <!-- Static -->
    <script src="http://s95.cnzz.com/stat.php?id=1253026255&web_id=1253026255"></script>
    <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');
C
Catouse 已提交
220

C
Catouse 已提交
221 222 223 224
      ga('create', 'UA-53781622-1', 'auto');
      ga('send', 'pageview');
    </script>
  </body>
C
Catouse 已提交
225
</html>