Skip to content

Z
zui

zzx_123123 / zui
与 Fork 源项目一致

Fork自 易企天创 / zui

通知 1
Star 0
Fork 0
Z
zui

体验新版 GitCode，发现更多精彩内容 >>

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

* change document.

上级 805bb90e
隐藏空白更改
内联 并排
Showing with 49 addition and 41 deletion
docs/2/part/javascript-messager.html
浏览文件 @ b127095d
......@@ -86,9 +86,9 @@
</tbody>
</table>
<pre class='prettyprint'><code>// 使用jQuery对象
var msg = new $.Messager('消息内容', {placement: 'bottom'});
var msg = new $.zui.Messager('消息内容', {placement: 'bottom'});
// 使用window对象
// var msg = new window.Messager('消息内容', {placement: 'bottom'});
// var msg = new $.zui.Messager('消息内容', {placement: 'bottom'});
// 显示消息
msg.show();
......@@ -98,12 +98,12 @@ msg.hide();
</code></pre>
<h4>快速显示</h4>
<p>使用jQuery对象或<code>window</code>对象的<code>messager</code>实例的<code>show()</code>方法来即时显示一个漂浮消息。</p>
<p>调用<code>$.messager.show()</code>或者<code>window.messager.show()</code>之后立即显示并返回新创建的<code>Messager</code>实例。可以使用返回的实例来手动执行<code>hide</code>方法隐藏此消息。</p>
<p>调用<code>$.zui.messager.show()</code>或者<code>$.zui.messager.show()</code>之后立即显示并返回新创建的<code>Messager</code>实例。可以使用返回的实例来手动执行<code>hide</code>方法隐藏此消息。</p>
<p><code>show()</code>方法提供两个参数，定义于<code>Messager</code>构造函数参数定义相同。</p>
<pre class='prettyprint'><code>// 使用jQuery对象
var msg = $.messager.show('消息内容', {placement: 'bottom'});
var msg = $.zui.messager.show('消息内容', {placement: 'bottom'});
// 使用window对象
// var msg = window.messager.show('消息内容', {placement: 'bottom'});
// var msg = $.zui.messager.show('消息内容', {placement: 'bottom'});
// 隐藏消息
msg.hide();
......@@ -177,14 +177,14 @@ function afterPageLoad() {
else
{
var options = $this.data();
$this.data('zui.messager', $.messager.show(options.content, options));
$this.data('zui.messager', $.zui.messager.show(options.content, options));
}
});
$('#pageContent .messager-example').click(function()
{
var $this = $(this);
$.messager.show($this.find('.messager-content').html(), $this.data());
$.zui.messager.show($this.find('.messager-content').html(), $this.data());
});
}
</script>
docs/2/part/javascript-modaltrigger.html
浏览文件 @ b127095d
......@@ -50,7 +50,7 @@
$('#triggerButton').modalTrigger({custom: '&lt;h1&gt;此内容是自定义的&lt;/h1&gt;&lt;p&gt;哈哈:)&lt;/p&gt;'});
/* 使用触发器对象直接显示 */
(new ModalTrigger({custom: '自定义内容'})).show();</code></pre>
(new $.zui.ModalTrigger({custom: '自定义内容'})).show();</code></pre>
<h4>指定页面元素作为内容</h4>
<p>通过指定一个jQuery选择器名称来获取其内容作为模态框的内容。</p>
......@@ -67,7 +67,7 @@ $('#triggerButton').modalTrigger({custom: '&lt;h1&gt;此内容是自定义的&lt
$('#triggerButton').modalTrigger({custom: '#myModalAlert'});
/* 使用触发器对象直接显示 */
(new ModalTrigger({custom: '#myModalAlert'})).show();</code></pre>
(new $.zui.ModalTrigger({custom: '#myModalAlert'})).show();</code></pre>
<h4>使用jQuery对象作为内容</h4>
<p>直接为custom参数赋值为一个jQuery对象，此对象的内容将显示在对话框中。此方式无法使用data属性调用。</p>
......@@ -75,7 +75,7 @@ $('#triggerButton').modalTrigger({custom: '#myModalAlert'});
$('#triggerButton').modalTrigger({custom: $('#myModalAlert')});
/* 使用触发器对象直接显示 */
(new ModalTrigger({custom: $('#myModalAlert')})).show();</code></pre>
(new $.zui.ModalTrigger({custom: $('#myModalAlert')})).show();</code></pre>
<h4>使用回调函数动态生成内容</h4>
<p>将一个回调函数赋值给custom参数，触发器对象会自动调用此函数来实时获得动态内容并显示在模态框中。</p>
......@@ -90,7 +90,7 @@ $('#triggerButton').modalTrigger({custom: function()
}});
/* 使用触发器对象直接显示 */
(new ModalTrigger({custom: function()
(new $.zui.ModalTrigger({custom: function()
{
return "当模态框显示时，时间是：" + (new Date).toString();
}})).show();</code></pre>
......@@ -123,7 +123,7 @@ $('#triggerButton').modalTrigger({custom: function()
$('#triggerButton').modalTrigger({showHeader: false});
/* 使用触发器对象直接显示 */
(new ModalTrigger({showHeader: false})).show();</code></pre>
(new $.zui.ModalTrigger({showHeader: false})).show();</code></pre>
<h4>自定义模态框标题</h4>
<p>如果不指定模态框的标题，会自动使用触发按钮的title属性或文本作为模态框的标题。</p>
......@@ -134,7 +134,7 @@ $('#triggerButton').modalTrigger({showHeader: false});
$('#triggerButton').modalTrigger({title: '新的标题'});
/* 使用触发器对象直接显示 */
(new ModalTrigger({title: '新的标题'})).show();</code></pre>
(new $.zui.ModalTrigger({title: '新的标题'})).show();</code></pre>
<h4>使用图标</h4>
<p>通过指定<code>icon</code>属性来在标题前面增加一个图标。</p>
......@@ -146,7 +146,7 @@ $('#triggerButton').modalTrigger({title: '新的标题'});
$('#triggerButton').modalTrigger({icon: 'heart'});
/* 使用触发器对象直接显示 */
(new ModalTrigger({icon: 'heart'})).show();</code></pre>
(new $.zui.ModalTrigger({icon: 'heart'})).show();</code></pre>
</article>
</section>
......@@ -162,12 +162,12 @@ $('#triggerButton').modalTrigger({icon: 'heart'});
<p>使得一个jquery对象能够监听事件（一般为点击）并启动模态框。</p>
<pre class='prettyprint'><code>$('#triggerButton').modalTrigger(options);</code></pre>
<p>也可以使用<code>modalTrigger</code>的别名方法<code>modal</code>，这样与传统模态框的初始化方法完全一致。</p>
<h4>使用window对象属性</h4>
<p>在window对象上已默认绑定了一个模态框触发器对象，可以直接使用<code>方法</code>并传递不同的参数来随时启动模态框。</p>
<pre class='prettyprint'><code>window.modalTrigger.show(options);</code></pre>
<h4>使用预设的modalTrigger实例</h4>
<p>在<code>$.zui</code>对象上已默认绑定了一个模态框触发器对象，可以直接使用<code>方法</code>并传递不同的参数来随时启动模态框。</p>
<pre class='prettyprint'><code>$.zui.modalTrigger.show(options);</code></pre>
<h4>创建新的触发器对象</h4>
<p>创建一个新的模态框触发器来保存配置并启动模态框。</p>
<pre class='prettyprint'><code>var myModalTrigger = new ModalTrigger(options);
<pre class='prettyprint'><code>var myModalTrigger = new $.zui.ModalTrigger(options);
myModalTrigger.show();</code></pre>
<h4>参数</h4>
......@@ -336,10 +336,10 @@ myModalTrigger.show();</code></pre>
<p>要使用触发器方法，需要首先获取触发器对象的实例。</p>
<h6>通过触发按钮的data属性</h6>
<pre class='prettyprint'><code>var modalTrigger = $('#triggerButton').data('zui.modaltrigger');</code></pre>
<h6>使用window对象绑定的触发器</h6>
<pre class='prettyprint'><code>var myTrigger = window.modalTrigger;</code></pre>
<h6>使用预设的<code>$.zui</code>对象绑定的触发器</h6>
<pre class='prettyprint'><code>var myTrigger = $.zui.modalTrigger;</code></pre>
<h6>创建新的触发器实例</h6>
<pre class='prettyprint'><code>var newTrigger = new ModalTrigger(options);</code></pre>
<pre class='prettyprint'><code>var newTrigger = new $.zui.ModalTrigger(options);</code></pre>
<h4>显示模态框</h4>
<p>在显示模态框时，可以重新传入新的参数，而不影响触发器对象原来的参数。</p>
......@@ -407,6 +407,14 @@ myModalTrigger.show();</code></pre>
</article>
</section>
<style>
.modal > .loader {
opacity: 1;
height: auto;
transform: scale(1);
}
</style>
<script>
function afterPageLoad() {
$(document).on('click', '.modal-backdrop.in, .modal', function(e) {
......
docs/2/part/javascript-store.html
浏览文件 @ b127095d
......@@ -6,7 +6,7 @@
<section>
<header><h3>如何使用</h3></header>
<article>
<p>要使用本地存储，直接使用<code>windows.store</code>对象。<code>store</code>提供了一系列方法来操作本地存储数据。</p>
<p>要使用本地存储，直接使用<code>$.zui.store</code>对象。<code>store</code>提供了一系列方法来操作本地存储数据。</p>
<p>以下列出store对象提供的属性和方法：</p>
<table class="table table-bordered">
<thead>
......@@ -144,21 +144,21 @@
</table>
<h4>代码示例</h4>
<pre class='prettyprint'>
store.set('name', 'catouse'); // 使用本地存储设置'name'值为'catouse'
store.set('date', {year: 2014, month: 8, day: 6}); // 将一个对象存储到本地存储
$.zui.store.set('name', 'catouse'); // 使用本地存储设置'name'值为'catouse'
$.zui.store.set('date', {year: 2014, month: 8, day: 6}); // 将一个对象存储到本地存储
console.log(store.get('name')); // 从本地存储获取'name'的值
console.log(store.get('date').year); // 从本地存储获取'date'值的year属性
console.log($.zui.store.get('name')); // 从本地存储获取'name'的值
console.log($.zui.store.get('date').year); // 从本地存储获取'date'值的year属性
store.forEach(function(key, value) // 遍历所有本地存储的条目
$.zui.store.forEach(function(key, value) // 遍历所有本地存储的条目
{
console.log(value);
});
console.log(store.key(0)); // 获取本地存储第一个条目的名称
console.log($.zui.store.key(0)); // 获取本地存储第一个条目的名称
store.remove('name'); // 从本地存储移除‘name’的值
store.clear(); // 清空所有本地存储的条目</pre>
$.zui.store.remove('name'); // 从本地存储移除‘name’的值
$.zui.store.clear(); // 清空所有本地存储的条目</pre>
</article>
</section>
......@@ -222,14 +222,14 @@ store.clear(); // 清空所有本地存储
<h4>代码示例</h4>
<pre class='prettyprint'>
/* 以下操作的键值仅针对当前页面 */
store.pageSet('name', 'catouse'); // 使用本地存储设置'name'值为'catouse'
store.pageSet('date', {year: 2014, month: 8, day: 6}); // 将一个对象存储到本地存储
$.zui.store.pageSet('name', 'catouse'); // 使用本地存储设置'name'值为'catouse'
$.zui.store.pageSet('date', {year: 2014, month: 8, day: 6}); // 将一个对象存储到本地存储
console.log(store.pageGet('name')); // 从本地存储获取'name'的值
console.log(store.pageGet('date').year); // 从本地存储获取'date'值的year属性
console.log($.zui.store.pageGet('name')); // 从本地存储获取'name'的值
console.log($.zui.store.pageGet('date').year); // 从本地存储获取'date'值的year属性
store.pageRemove('name'); // 从本地存储移除‘name’的值
store.pageClear(); // 清空所有本地存储的条目</pre>
$.zui.store.pageRemove('name'); // 从本地存储移除‘name’的值
$.zui.store.pageClear(); // 清空所有本地存储的条目</pre>
</article>
</section>
......@@ -275,21 +275,21 @@ store.pageClear(); // 清空所有本地存
<script>
function afterPageLoad(){
$('#storeExample .alert-' + (store.enable ? 'success' : 'warning')).removeClass('hide');
$('#storeExample .alert-' + ($.zui.store.enable ? 'success' : 'warning')).removeClass('hide');
var $storeTable = $('#storeTable');
function refershStore()
{
$storeTable.empty();
var index = 0;
store.forEach(function(key,value)
$.zui.store.forEach(function(key,value)
{
if(key.indexOf('//') === 0) return;
$storeTable.append('<tr><td>{0}</td><td class="store-name">{1}</td><td>{2}</td><td><a href="javascript:;" class="text-danger store-delete"><i class="icon-trash"></i></a></td></tr>'.format(index++, key, value));
});
$storeTable.find('.store-delete').click(function()
{
store.remove($(this).closest('tr').children('.store-name').text());
$.zui.store.remove($(this).closest('tr').children('.store-name').text());
refershStore();
});
}
......@@ -300,7 +300,7 @@ function afterPageLoad(){
val = $('#storeValue').val();
if(key)
{
store.setItem(key, val);
$.zui.store.setItem(key, val);
refershStore();
}
else
......@@ -311,7 +311,7 @@ function afterPageLoad(){
$('#storeClear').click(function()
{
store.clear();
$.zui.store.clear();
refershStore();
});
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或