From cf9f54f8a4d27e02aba3ea3163028175ef297480 Mon Sep 17 00:00:00 2001
From: Catouse <catouse@gmail.com>
Date: Thu, 5 Jun 2014 20:53:19 +0800
Subject: [PATCH]  * updated documents and examples.

---
 assets/css/doc.css      |  10 +++
 assets/js/doc.js        |  77 ++++++++++++++++++++
 example/kindeditor.html |  23 +++---
 javascript.html         | 156 ++++++++++++++++++++++++++++++++++------
 4 files changed, 233 insertions(+), 33 deletions(-)

diff --git a/assets/css/doc.css b/assets/css/doc.css
index 6c2f1cac..6326bb87 100644
--- a/assets/css/doc.css
+++ b/assets/css/doc.css
@@ -145,3 +145,13 @@ a[target='_blank']:hover:after {content: '\e684'; opacity: 1; }
 {
   padding: 0;
 }
+
+
+.popover-examples .popover
+{
+  position: relative;
+  display: block;
+  float: left;
+  width: 260px;
+  margin: 20px;
+}
diff --git a/assets/js/doc.js b/assets/js/doc.js
index 24a8724d..a5560ee2 100644
--- a/assets/js/doc.js
+++ b/assets/js/doc.js
@@ -29,4 +29,81 @@ $(function()
             $nav.children('li:not(.nav-heading)').slideUp('fast', function(){$nav.addClass('collapsed')});
         }
     });
+
+    // Chosen
+    $('.chosen-select').chosen();
+
+    // datetime picker
+    $('.form-datetime').datetimepicker(
+    {
+        weekStart: 1,
+        todayBtn:  1,
+        autoclose: 1,
+        todayHighlight: 1,
+        startView: 2,
+        forceParse: 0,
+        showMeridian: 1,
+        format: 'yyyy-mm-dd hh:ii'
+    });
+    $('.form-date').datetimepicker(
+    {
+        language:  'zh-CN',
+        weekStart: 1,
+        todayBtn:  1,
+        autoclose: 1,
+        todayHighlight: 1,
+        startView: 2,
+        minView: 2,
+        forceParse: 0,
+        format: 'yyyy-mm-dd'
+    });
+    $('.form-time').datetimepicker({
+        language:  'zh-CN',
+        weekStart: 1,
+        todayBtn:  1,
+        autoclose: 1,
+        todayHighlight: 1,
+        startView: 1,
+        minView: 0,
+        maxView: 1,
+        forceParse: 0,
+        format: 'hh:ii'
+    });
+
+    KindEditor.ready(function(K) 
+    {
+      K.create('textarea.kindeditor', 
+      {
+        allowFileManager : true,
+        bodyClass : 'article-content',
+        cssPath: 'dist/css/zui.css',
+        afterBlur: function(){$('#content').prev('.ke-container').removeClass('focus');},
+          afterFocus: function(){$('#content').prev('.ke-container').addClass('focus');}
+      });
+
+      K.create('textarea.kindeditorSimple', 
+      {
+        bodyClass : 'article-content',
+        cssPath: 'dist/css/zui.css',
+        resizeType : 1,
+        allowPreviewEmoticons : false,
+        allowImageUpload : false,
+        items : [
+        'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
+        'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
+        'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
+        afterBlur: function(){$('#contentSimple').prev('.ke-container').removeClass('focus');},
+          afterFocus: function(){$('#contentSimple').prev('.ke-container').addClass('focus');}
+      });
+
+      K.create('textarea.customStyle',
+      {
+        themeType : 'simple',
+        bodyClass : 'article-content',
+        cssPath: 'dist/css/zui.css',
+        afterBlur: function(){$('#contentCustom').prev('.ke-container').removeClass('focus');},
+          afterFocus: function(){$('#contentCustom').prev('.ke-container').addClass('focus');}
+      });
+
+    });
 });
diff --git a/example/kindeditor.html b/example/kindeditor.html
index c1861f3c..66284a53 100644
--- a/example/kindeditor.html
+++ b/example/kindeditor.html
@@ -112,18 +112,17 @@
   </nav>
     <article>
       <section id='kendeditor' class="page-section">
-      <h1>富文本编辑器Kindeditor</h1>
-      
-      <h3>类型</h3>
-      <h4>默认模式</h4>
-      <textarea id="content" name="content" class='form-control kindeditor' style="height:150px;visibility:hidden;">KindEditor</textarea>
-      <h4>简单模式</h4>
-      <textarea id="contentSimple" name="content" class='form-control kindeditorSimple' style="height:150px;visibility:hidden;">KindEditor</textarea>
-      
-      <h3>变化</h3>
-      <h4>简单风格</h4>
-      <textarea id="contentCustom" name="content" class='form-control customStyle' style="height:150px;visibility:hidden;">KindEditor</textarea>
-      
+        <h1>富文本编辑器Kindeditor</h1>
+        
+        <h3>类型</h3>
+        <h4>默认模式</h4>
+        <textarea id="content" name="content" class='form-control kindeditor' style="height:150px;visibility:hidden;">KindEditor</textarea>
+        <h4>简单模式</h4>
+        <textarea id="contentSimple" name="content" class='form-control kindeditorSimple' style="height:150px;visibility:hidden;">KindEditor</textarea>
+        
+        <h3>变化</h3>
+        <h4>简单风格</h4>
+        <textarea id="contentCustom" name="content" class='form-control customStyle' style="height:150px;visibility:hidden;">KindEditor</textarea>
       </section>
     </article>
 
diff --git a/javascript.html b/javascript.html
index b4063282..d09c0e23 100644
--- a/javascript.html
+++ b/javascript.html
@@ -17,8 +17,9 @@ base_url: "./"
   <title>ZUI</title>
 
   <link href="dist/css/zui.css" rel="stylesheet">
+  <link href="dist/css/datetimepicker.css" rel="stylesheet">
+  <link href="dist/css/chosen.css" rel="stylesheet">
   <link href="assets/css/doc.css" rel="stylesheet">
-  <link href="/dist/js/highlight/styles/monokai_sublime.css" rel="stylesheet"></head>
 <body>
   <header>
       <nav id="navbar" class="navbar navbar-inverse navbar-fixed-left navbar-collapsed" role="navigation">
@@ -75,6 +76,9 @@ base_url: "./"
             <li><a href="javascript.html#popovers">弹出框</a></li>
             <li><a href="javascript.html#collapse">折叠</a></li>
             <li><a href="javascript.html#carousel">轮播</a></li>
+            <li><a href="javascript.html#datetimepicker">日期选择</a></li>
+            <li><a href="javascript.html#chosen">Chosen</a></li>
+            <li><a href="javascript.html#richeditor">富文本编辑器</a></li>
           </ul>
           <ul class="nav navbar-nav collapsed">
             <li class="nav-heading">视图</li>
@@ -85,6 +89,11 @@ base_url: "./"
             <li><a href="views.html#comment">评论</a></li>
             <li><a href="views.html#dashboard">仪表盘</a></li>
           </ul>
+          <ul class="nav navbar-nav collapsed">
+            <li class="nav-heading">探索</li>
+            <li><a href="explore.html#sourcecode">下载源码</a></li>
+            <li><a href="explore.html#cases">这些网站在使用</a></li>
+          </ul>
         </div>
       </nav>
     </header>
@@ -278,7 +287,6 @@ base_url: "./"
         <tbody>
           <tr>
             <td>show.bs.modal</td>
-            <td>1</td>
             <td>
               <code>$('#myModal').on('show.bs.modal', functi'on () { // do something… })</code>
             </td>
@@ -1245,16 +1253,6 @@ base_url: "./"
       <div class="page-header">
         <h2>弹出框</h2>
       </div>
-      <style>
-    .popover-examples .popover
-    {
-      position: relative;
-      display: block;
-      float: left;
-      width: 260px;
-      margin: 20px;
-    }
-  </style>
       <div class="alert alert-danger">
         <h4>插件依赖</h4>
         <p>
@@ -1357,7 +1355,7 @@ base_url: "./"
       </div>
       <h3>动态演示</h3>
       <div class="example">
-        <a href="##" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</a>
+        <a href="##" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">打开弹出框</a>
       </div>
       <h4>不同方向</h4>
       <div class="example text-center">
@@ -1369,7 +1367,7 @@ base_url: "./"
 
       <h3>指定html元素作为弹出内容</h3>
       <div class="example">
-        <a href="##" class="btn btn-lg btn-danger" data-toggle="popover" data-placement="top" data-target="$next">Click to toggle popover</a>
+        <a href="##" class="btn btn-lg btn-danger" data-toggle="popover" data-placement="right" data-target="$next">打开弹出框</a>
         <div id="popoverContent1" class="popover">
           <h3 class="popover-title">Popover top</h3>
           <table class="table">
@@ -1397,7 +1395,6 @@ base_url: "./"
         <p>
           <code>js$(&#39;#example&#39;).popover(options)</code>
         </p>
-
       </div>
 
       <h3>选项</h3>
@@ -1529,7 +1526,6 @@ base_url: "./"
         <p>
           <code>js$(&#39;#element&#39;).popover(&#39;show&#39;)</code>
         </p>
-
       </div>
 
       <h4>.popover('hide')</h4>
@@ -1538,7 +1534,6 @@ base_url: "./"
         <p>
           <code>js$(&#39;#element&#39;).popover(&#39;hide&#39;)</code>
         </p>
-
       </div>
 
       <h4>.popover('toggle')</h4>
@@ -1547,7 +1542,6 @@ base_url: "./"
         <p>
           <code>js$(&#39;#element&#39;).popover(&#39;toggle&#39;)</code>
         </p>
-
       </div>
 
       <h4>.popover('destroy')</h4>
@@ -1556,8 +1550,8 @@ base_url: "./"
         <p>
           <code>js$(&#39;#element&#39;).popover(&#39;destroy&#39;)</code>
         </p>
-
       </div>
+
       <h3>事件</h3>
       <div class="table-responsive">
         <table class="table table-bordered table-striped">
@@ -1597,10 +1591,9 @@ base_url: "./"
       </div>
       <!-- /.table-responsive -->
       <div class="example">
-        <pre class="prettyprint linenums"><code class="language-js">$(<span class="string">'#myPopover'</span>).on(<span class="string">'hidden.bs.popover'</span>, <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span>
+<pre class="prettyprint linenums"><code class="language-js">$(<span class="string">'#myPopover'</span>).on(<span class="string">'hidden.bs.popover'</span>, <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span>
   <span class="comment">// do something…</span>
 })</code></pre>
-
       </div>
     </section>
 
@@ -1985,10 +1978,131 @@ base_url: "./"
       </table>
 
     </section>
+
+    <section id="datetimepicker">
+      <div class="page-header">
+        <h2>日期选择</h2>
+      </div>
+      
+      <p>日期选择插件可以帮助用户更方便准确的选择日期和时间。</p>
+      <p>在ZUI中包含的日期选择控件基于开源项目 <a href="http://www.malot.fr/bootstrap-datetimepicker/" target="_blank">DateTime Picker</a> 定制开发。</p>
+    
+      <h3>类型</h3>
+      <h4>日期选择</h4>
+      <div class="example">
+        <input type="text" class='form-control form-date' placeholder='选择或者输入一个日期：yyyy-MM-dd'>
+      </div>
+
+      <h4>时间选择</h4>
+      <div class="example">
+        <input type="text" class='form-control form-time' placeholder='选择或者输入一个时间：hh:mm'>
+      </div>
+
+      <h4>日期+时间选择</h4>
+      <div class="example">
+        <input type="text" class='form-control form-datetime' placeholder='选择或者输入一个日期+时间：yyyy-MM-dd hh:mm'>
+      </div>
+
+      <h3>变化</h3>
+      <h4>禁用输入</h4>
+      <p>只允许用户选择一个日期或时间，只需要给<code>input</code>加上<code>readonly</code>属性。</p>
+      <div class="example">
+        <div class="row">
+          <div class="col-md-4"><input type="text" class='form-control form-date' placeholder='选择或者输入一个日期：yyyy-MM-dd' readonly></div>
+          <div class="col-md-4"><input type="text" class='form-control form-time' placeholder='选择或者输入一个时间：hh:mm' readonly></div>
+          <div class="col-md-4"><input type="text" class='form-control form-datetime' placeholder='选择或者输入一个日期+时间：yyyy-MM-dd hh:mm' readonly></div>
+        </div>
+      </div>
+
+      <h4>使用输入框组</h4>
+      <p>输入框组可以添加额外的按钮来操作日期选择插件。</p>
+      <p>按钮中的<code>.icon-remove</code>用来移除输入的日期。<code>.icon-th</code>,<code>.icon-calendar</code>,<code>.icon-time</code>用来激活日期选择框。</p>
+      <div class="example">
+        <div class="row">
+          <div class="col-md-4">
+            <div class="input-group date form-datetime" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
+              <input class="form-control" size="16" type="text" value="" readonly>
+              <span class="input-group-addon"><span class="icon-remove"></span></span>
+              <span class="input-group-addon"><span class="icon-th"></span></span>
+            </div>
+          </div>
+          <div class="col-md-4">
+            <div class="input-group date form-date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
+              <input class="form-control" size="16" type="text" value="" readonly>
+              <span class="input-group-addon"><span class="icon-remove"></span></span>
+              <span class="input-group-addon"><span class="icon-calendar"></span></span>
+            </div>
+          </div>
+          <div class="col-md-4">
+            <div class="input-group date form-time" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
+              <input class="form-control" size="16" type="text" value="" readonly>
+              <span class="input-group-addon"><span class="icon-remove"></span></span>
+              <span class="input-group-addon"><span class="icon-time"></span></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="chosen">
+      <div class="page-header">
+        <h2>Chosen</h2>
+      </div>
+
+      <p>Chosen是用来增强单选列表和多选列表的更佳选择。</p>
+      <div class="example">
+        <div class="row">
+          <div class="col-md-6">
+            <select data-placeholder="选择一个宠物..." class="chosen-select form-control" tabindex="2">
+              <option value=""></option>
+              <option value="cat">小猫</option>
+              <option value="dog">小狗</option>
+              <option value="fish">金鱼</option>
+              <option value="dragon">龙</option>
+            </select>
+          </div>
+          <div class="col-md-6">
+            <select data-placeholder="选择一些爱吃的水果..." class="chosen-select form-control" tabindex="2" multiple>
+              <option value="strawberries">草莓</option>
+              <option value="apple">苹果</option>
+              <option value="orange">橙子</option>
+              <option value="cherry">樱桃</option>
+              <option value="banana">香蕉</option>
+              <option value="figs">无花果</option>
+            </select>
+          </div>
+        </div>
+
+      </div>
+    </section>
+
+    <section id="richeditor">
+      <div class="page-header">
+        <h2>富文本编辑器</h2>
+      </div>
+
+      <h3>类型</h3>
+      <h4>默认模式</h4>
+      <div class="example">
+        <textarea id="content" name="content" class='form-control kindeditor' style="height:150px;visibility:hidden;">Hello, world!</textarea>
+      </div>
+      <h4>简单模式</h4>
+      <div class="example">
+        <textarea id="contentSimple" name="content" class='form-control kindeditorSimple' style="height:150px;visibility:hidden;">Hello, world!</textarea>
+      </div>
+      <h3>变化</h3>
+      <h4>简单风格</h4>
+      <div class="example">
+        <textarea id="contentCustom" name="content" class='form-control customStyle' style="height:150px;visibility:hidden;">Hello, world!</textarea>
+      </div>
+    </section>
   </div>
 
   <script src="dist/js/jquery.js"></script>
   <script src="dist/js/zui.min.js"></script>
+  <script src="dist/js/datetimepicker/datetimepicker.js"></script>
+  <script src="dist/js/chosen.jquery.min.js"></script>
+  <script src="dist/js/kindeditor/kindeditor-all-min.js"></script>
   <script src="assets/js/doc.js"></script>
   <script src="dist/js/google-code-prettify/prettify.js"></script>
 </body>
-- 
GitLab