Skip to content

Z
zui

zzx_123123 / zui
与 Fork 源项目一致

Fork自 易企天创 / zui

通知 1
Star 0
Fork 0
Z
zui

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 cf9f54f8 编写于 作者: C Catouse
浏览文件
操作

* updated documents and examples.

上级 1cdfcd91
隐藏空白更改
内联 并排
Showing with 233 addition and 33 deletion
assets/css/doc.css
浏览文件 @ cf9f54f8
......@@ -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;
}
assets/js/doc.js
浏览文件 @ cf9f54f8
......@@ -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');}
});
});
});
example/kindeditor.html
浏览文件 @ cf9f54f8
......@@ -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>
......
javascript.html
浏览文件 @ cf9f54f8
......@@ -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>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或