Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
易企天创
zui
提交
62bf5598
Z
zui
项目概览
易企天创
/
zui
大约 1 年 前同步成功
通知
6
Star
0
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
37
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Z
zui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
37
Issue
37
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
62bf5598
编写于
3月 04, 2019
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
* update document files.
上级
aaf0be39
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
146 addition
and
10 deletion
+146
-10
docs/part/basic-grid.md
docs/part/basic-grid.md
+4
-0
docs/part/control-label.md
docs/part/control-label.md
+45
-2
docs/part/javascript-chosen.md
docs/part/javascript-chosen.md
+48
-6
docs/part/javascript-modaltrigger.md
docs/part/javascript-modaltrigger.md
+6
-0
docs/part/javascript-sortable.md
docs/part/javascript-sortable.md
+12
-0
docs/part/view-calendar.md
docs/part/view-calendar.md
+18
-1
docs/part/view-uploader.md
docs/part/view-uploader.md
+13
-1
未找到文件。
docs/part/basic-grid.md
浏览文件 @
62bf5598
...
...
@@ -70,3 +70,7 @@ filter: zhagexitong zgxt
</tr>
</tbody>
</table>
## 非响应式栅格
ZUI 中还包含了一些辅助类用与快捷应用栅格宽度,但不受响应式规则的影响。这些辅助类为
`.col-1`
、
`.col-2`
~
`.col-12`
。
\ No newline at end of file
docs/part/control-label.md
浏览文件 @
62bf5598
...
...
@@ -88,8 +88,8 @@ filter: biaoqian bq
### 小圆点徽标
<div
class=
"example"
>
<span
class=
"label label-dot"
>
12
</span>
<span
class=
"label label-dot label-info"
>
Primary
</span>
<span
class=
"label label-dot label-info"
>
Success
</span>
<span
class=
"label label-dot label-info"
>
Info
</span>
<span
class=
"label label-dot label-warning"
>
Warning
</span>
<span
class=
"label label-dot label-danger"
>
Danger
</span>
</div>
<span
class=
"label label-dot"
>
12
</span>
<span
class=
"label label-dot label-info"
>
Primary
</span>
<span
class=
"label label-dot label-info"
>
Success
</span>
<span
class=
"label label-dot label-info"
>
Info
</span>
<span
class=
"label label-dot label-warning"
>
Warning
</span>
<span
class=
"label label-dot label-danger"
>
Danger
</span>
</div>
```
html
<span
class=
"label label-dot"
>
Default
</span>
...
...
@@ -115,6 +115,49 @@ filter: biaoqian bq
<span
class=
"label label-dot label-danger"
>
Danger
</span>
```
### 轮廓外观
使用
`.label-outline`
来为标签应用轮廓外观。
<div
class=
"example"
>
<span
class=
"label label-outline"
>
Default
</span>
<span
class=
"label label-primary label-outline"
>
Primary
</span>
<span
class=
"label label-success label-outline"
>
Success
</span>
<span
class=
"label label-info label-outline"
>
Info
</span>
<span
class=
"label label-warning label-outline"
>
Warning
</span>
<span
class=
"label label-danger label-outline"
>
Danger
</span>
</div>
```
html
<span
class=
"label label-primary label-outline"
>
Primary
</span>
```
<div
class=
"example"
>
<span
class=
"label label-badge label-outline"
>
Default
</span>
<span
class=
"label label-badge label-primary label-outline"
>
Primary
</span>
<span
class=
"label label-badge label-success label-outline"
>
Success
</span>
<span
class=
"label label-badge label-info label-outline"
>
Info
</span>
<span
class=
"label label-badge label-warning label-outline"
>
Warning
</span>
<span
class=
"label label-badge label-danger label-outline"
>
Danger
</span>
</div>
```
html
<span
class=
"label label-badge label-primary label-outline"
>
Primary
</span>
```
<div
class=
"example"
>
<span
class=
"label label-dot label-outline"
>
Default
</span>
<span
class=
"label label-dot label-primary label-outline"
>
Primary
</span>
<span
class=
"label label-dot label-success label-outline"
>
Success
</span>
<span
class=
"label label-dot label-info label-outline"
>
Info
</span>
<span
class=
"label label-dot label-warning label-outline"
>
Warning
</span>
<span
class=
"label label-dot label-danger label-outline"
>
Danger
</span>
</div>
```
html
<span
class=
"label label-dot label-primary label-outline"
>
Primary
</span>
```
### 按钮中的徽标
<div
class=
"example"
>
...
...
docs/part/javascript-chosen.md
浏览文件 @
62bf5598
...
...
@@ -2,7 +2,7 @@
id: chosen
description: 提供数据选择和筛选功能
icon: icon-search
filter:
filter:
---
# Chosen
...
...
@@ -114,6 +114,38 @@ $('select.chosen-select').chosen({
<p>
扩展检索本身并不提供拼音检索功能,如果你需要支持使用拼音检索时,需要你自己在chosen初始化之前在
<code>
data-keys
</code>
属性中写入拼音字符串。
</p>
</div>
### 紧凑的单项选择
使用
`compact_search`
选项来应用更加紧凑的单选选择框,搜索框与选择框合并一起显示。
<div
class=
"example"
>
<select
class=
"chosen-select form-control"
data-compact_search=
"true"
>
<option
value=
""
></option>
<option
value=
"cat"
>
小猫
</option>
<option
value=
"fish"
>
金鱼
</option>
<option
value=
"dragon"
>
龙
</option>
<option
value=
"mammoth"
>
猛犸
</option>
<option
value=
"gollum"
>
咕噜
</option>
</select>
</div>
```
html
<select
class=
"chosen-select form-control"
>
<option
value=
""
></option>
<option
value=
"cat"
>
小猫
</option>
<option
value=
"fish"
>
金鱼
</option>
<option
value=
"dragon"
>
龙
</option>
<option
value=
"mammoth"
>
猛犸
</option>
<option
value=
"gollum"
>
咕噜
</option>
</select>
```
```
js
$
(
'
select.chosen-select
'
).
chosen
({
compact_search
:
true
// 启用紧凑的单项选择
});
```
## 用法
### 引入资源
...
...
@@ -218,6 +250,12 @@ Chosen 为独立组件,你需要从本地或 CDN 单独引入 lib 目录下的
<td>
默认为
`false`
</td>
<td>
默认情况下,仅仅会从选项或检索关键字的开始进行匹配,例如
`"he"`
仅仅能匹配
`"hello"`
,不能匹配
`"ahead"`
,如果启用此选项,则可以从关键的任意位置进行匹配。
</td>
</tr>
<tr>
<td>
`compact_search`
</td>
<td>
是否启用紧凑的单选选择外观
</td>
<td>
默认为
`false`
</td>
<td>
如果设置为
`true`
,则搜索框与选择框合并一起显示。
</td>
</tr>
<tr>
<td>
`single_backstroke_delete`
</td>
<td>
启用退格键删除
</td>
...
...
@@ -397,11 +435,15 @@ $('select.chosen-icons').chosenIcons(options);
<script>
function onPageLoad() {return false;}
function afterPageLoad() {
if($.fn.chosen) $('#pageBody .chosen-select').chosen({
allow_single_deselect: true,
search_contains: true,
width: '100%'
});
if($.fn.chosen) {
$('#pageBody .chosen-select').each(function() {
$(this).chosen($.extend({
allow_single_deselect: true,
search_contains: true,
width: '100%'
}, $(this).data()));
});
}
if($.fn.chosenIcons) $('#chosenIcons').chosenIcons();
setTimeout($.doc.stopPageLoading, 500);
}
...
...
docs/part/javascript-modaltrigger.md
浏览文件 @
62bf5598
...
...
@@ -431,6 +431,12 @@ myModalTrigger.show();
* 自定义加载动画所使用的html</td>
<td>`
icon-
*
`定义的图标名称请参考[图标](#search/icon:spin)。</td>
</tr>
<tr>
<td>`
scrollInside
`</td>
<td>是否在对话框内部显示滚动条</td>
<td>默认为 `
false
`,即在对话框所属的页面上显示滚动条</td>
<td></td>
</tr>
</tbody>
</table>
...
...
docs/part/javascript-sortable.md
浏览文件 @
62bf5598
...
...
@@ -125,6 +125,18 @@ $('#sortableList').sortable();
<td>
默认
`'sortable-sorting'`
</td>
<td>
当有元素被拖动时添加到父级元素上的类。
</td>
</tr>
<tr>
<td>
`dropToClass`
</td>
<td>
拖动时添加到拖动元素上的类
</td>
<td>
默认
`'drop-to'`
</td>
<td></td>
</tr>
<tr>
<td>
`stopPropagation`
</td>
<td>
是否阻止元素上的事件冒泡
</td>
<td>
默认
`false`
</td>
<td></td>
</tr>
<tr>
<td>
`mouseButton`
</td>
<td>
响应的鼠标按钮
</td>
...
...
docs/part/view-calendar.md
浏览文件 @
62bf5598
...
...
@@ -132,7 +132,7 @@ $('#calendar').calendar();
var
calendar
=
$
(
'
#calendar
'
).
data
(
'
zui.calendar
'
);
```
#### 切换
或刷新
视图
#### 切换视图
要切换不同的视图或所显示的日期范围,请使用日历对象的
`display(view, date)`
方法。
...
...
@@ -144,6 +144,23 @@ calendar.display('month'); // 切换视图为月份视图,使
calendar
.
display
();
// 重新刷新当前视图
```
#### 重置日历数据
要重置日历数据并对界面进行刷新,则可以使用日历对象上的
`resetData(data)`
方法。
```
js
/* 重置日历数据 */
var
calendar
=
$
(
'
#calendar
'
).
data
(
'
zui.calendar
'
);
calendar
.
resetData
({
calendars
:
{
// 新的日历数据
},
events
:
[
// 新的事件数据
]
});
```
#### 增加事件
##### 增加一个事件
...
...
docs/part/view-uploader.md
浏览文件 @
62bf5598
...
...
@@ -398,6 +398,18 @@ var uploader = $('#myUploader').data('zui.uploader');
</ul>
</td>
</tr>
<tr>
<td>
`autoResetFails`
</td>
<td>
是否自动重置上传失败的文件
</td>
<td>
`false`
(默认)
</td>
<td>
<p>
可选值如下:
</p>
<ul>
<li>
`false`
,不自动重置上传失败的文件;
</li>
<li>
`true`
,自动重置上传失败的文件;
</li>
</ul>
</td>
</tr>
<tr>
<td>
`removeUploaded`
</td>
<td>
移除已上传文件
</td>
...
...
@@ -729,7 +741,7 @@ var uploader = $('#myUploader').data('zui.uploader');
<thead>
<tr>
<th>
属性
</th>
<td>
说明
</td>
<td>
说明
</td>
</tr>
</thead>
<tbody>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录