Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zzx_123123
zui
提交
b127095d
Z
zui
项目概览
zzx_123123
/
zui
与 Fork 源项目一致
Fork自
易企天创 / zui
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Z
zui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
b127095d
编写于
4月 27, 2015
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
* change document.
上级
805bb90e
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
49 addition
and
41 deletion
+49
-41
docs/2/part/javascript-messager.html
docs/2/part/javascript-messager.html
+7
-7
docs/2/part/javascript-modaltrigger.html
docs/2/part/javascript-modaltrigger.html
+22
-14
docs/2/part/javascript-store.html
docs/2/part/javascript-store.html
+20
-20
未找到文件。
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: '
<
h1
>
此内容是自定义的
<
/h1
><
p
>
哈哈:)
<
/p
>
'});
/* 使用触发器对象直接显示 */
(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: '<h1>此内容是自定义的<
$('#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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录