Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zzx_123123
zui
提交
4c80f9a5
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,发现更多精彩内容 >>
提交
4c80f9a5
编写于
9月 01, 2016
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
* update document files.
上级
93ce3e21
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
474 addition
and
317 deletion
+474
-317
docs/index.json
docs/index.json
+7
-11
docs/part/javascript-collapse.md
docs/part/javascript-collapse.md
+200
-71
docs/part/javascript-popover.md
docs/part/javascript-popover.md
+241
-229
docs/part/javascript-tab.md
docs/part/javascript-tab.md
+6
-6
docs/part/view-datatable.md
docs/part/view-datatable.md
+20
-0
未找到文件。
docs/index.json
浏览文件 @
4c80f9a5
...
...
@@ -909,20 +909,13 @@
"icon"
:
"icon-comment-line"
,
"desc"
:
"弹出交互式面板"
,
"name"
:
"弹出面板"
,
"update"
:
"1.5.0"
,
"topics"
:
[{
"name"
:
"静态类型"
},
{
"name"
:
"不带箭头指示"
},
{
"name"
:
"动态演示"
},
{
"name"
:
"指定html元素作为弹出内容"
},
{
"name"
:
"选项"
},
{
"name"
:
"方法"
},
{
"name"
:
"事件"
"name"
:
"用法"
}],
"filter"
:
"tanchumianban tcmb"
},
{
...
...
@@ -930,10 +923,13 @@
"icon"
:
"icon-collapse"
,
"desc"
:
"为元素提供折叠和展开功能"
,
"name"
:
"折叠"
,
"update"
:
"1.5.0"
,
"topics"
:
[{
"name"
:
"
类型
"
"name"
:
"
结构
"
},
{
"name"
:
"变化"
"name"
:
"折叠分组"
},
{
"name"
:
"使用方法"
}],
"filter"
:
"zhedie zd"
},
{
...
...
docs/part/javascript-collapse.md
浏览文件 @
4c80f9a5
...
...
@@ -7,134 +7,263 @@ filter: zhedie zd
# 折叠
## 使用方法
折叠插件使用直观的动画来展示或显示内容。
## 结构
需要
[
transition.js
](
http://v3.bootcss.com/javascript/#transitions
)
支持。
要实现折叠,一般需要两个元素:
`.collapse`
隐藏条目,
`.collapse.in`
显示条目。
-
折叠内容元素,包含使用动画来切换显示或隐藏的内容,需要添加
`.collapse`
类,如果被折叠内容在一开始就是显示的,还需要为其添加
`.in`
类;
-
触发元素,需要添加
`[data-toggle="collapse"]`
属性,并且使用
`[href]`
或
`[data-target="#selector"]`
属性来自定用于折叠内容元素。
调用方式一:仅仅通过向页面元素添加
`data-toggle="collapse"`
和
`data-target`
就可以为其赋予控制可折叠页面元素的能力。
`data-target`
属性接受一个CSS选择器作为其控制对象。请确保为可折叠页面元素添加
`.collapse`
。 如果你希望可折叠页面元素的默认状态是展开的,请添加
`.in`
。 为了给一组可折叠页面元素添加控制器,添加
`data-parent="#selector"`
即可
### 示例
调用方式二:手动触发
`$(".collapse").collapse()`
<example>
<p>
<button
type=
"button"
class=
"btn"
data-toggle=
"collapse"
data-target=
"#collapseExample"
>
使用 data-target 属性
</button>
<a
href=
"#collapseExample"
data-toggle=
"collapse"
class=
"btn btn-link"
>
直接使用 href 属性
</a>
</p>
<div
class=
"collapse"
id=
"collapseExample"
>
<div
class=
"bg-primary with-padding"
>
<p>
被折叠元素内容。
</p>
<p>
多个触发元素可以指向同一个折叠内容。
</p>
</div>
</div>
</example>
```
html
<p>
<button
type=
"button"
class=
"btn"
data-toggle=
"collapse"
data-target=
"#collapseExample"
>
使用 data-target 属性
</button>
<a
href=
"#collapseExample"
data-toggle=
"collapse"
class=
"btn btn-link"
>
直接使用 href 属性
</a>
</p>
<div
class=
"collapse"
id=
"collapseExample"
>
<div
class=
"bg-primary with-padding"
>
<p>
被折叠元素内容。
</p>
<p>
多个触发元素可以指向同一个折叠内容。
</p>
</div>
</div>
```
##
结合面板使用
##
折叠分组
<div
class=
"example"
>
<div
class=
"panel-group"
id=
"accordion"
>
多个折叠如果放置在同一个父级容器元素内,可以创建一个折叠分组(手风琴效果),只需要为每个触发元素添加
`[data-parent="#selector"]`
属性,其属性值指向父级容器即可。
<example>
<div
id=
"accordion"
>
<p>
<a
href=
"#collapseExample1"
data-toggle=
"collapse"
data-parent=
"#accordion"
class=
"btn btn-link"
>
折叠 1
</a>
</p>
<div
class=
"collapse in"
id=
"collapseExample1"
>
<div
class=
"bg-primary with-padding"
>
<p>
被折叠元素内容。
</p>
<p>
多个触发元素可以指向同一个折叠内容。
</p>
</div>
</div>
<p>
<a
href=
"#collapseExample2"
data-toggle=
"collapse"
data-parent=
"#accordion"
class=
"btn btn-link collapsed"
>
折叠 2
</a>
</p>
<div
class=
"collapse"
id=
"collapseExample2"
>
<div
class=
"bg-success with-padding"
>
<p>
被折叠元素内容。
</p>
<p>
多个触发元素可以指向同一个折叠内容。
</p>
</div>
</div>
<p>
<a
href=
"#collapseExample3"
data-toggle=
"collapse"
data-parent=
"#accordion"
class=
"btn btn-link collapsed"
>
折叠 3
</a>
</p>
<div
class=
"collapse"
id=
"collapseExample3"
>
<div
class=
"bg-danger with-padding"
>
<p>
被折叠元素内容。
</p>
<p>
多个触发元素可以指向同一个折叠内容。
</p>
</div>
</div>
</div>
</example>
<style>
#accordion > div + p {padding-top: 10px;}
</style>
### 结合面板组使用
<example>
<div
class=
"panel-group"
id=
"accordionPanels"
aria-multiselectable=
"true"
>
<div
class=
"panel panel-default"
>
<div
class=
"panel-heading"
>
<div
class=
"panel-heading"
id=
"headingOne"
>
<h4
class=
"panel-title"
>
<a
data-toggle=
"collapse"
data-parent=
"#accordion"
href=
"#collapseOne"
>
Item 1
</a>
<a
data-toggle=
"collapse"
data-parent=
"#accordionPanels"
href=
"#collapseOne"
>
折叠面板 1
</a>
</h4>
</div>
<div
id=
"collapseOne"
class=
"panel-collapse collapse fade"
>
<div
class=
"panel-body"
>
The content of Item1.
<code>
.panel-collapse .collapse .fade
</code>
</div>
<div
id=
"collapseOne"
class=
"panel-collapse collapse in"
>
<div
class=
"panel-body"
>
折叠面板内容 1
</div>
</div>
</div>
<div
class=
"panel panel-default"
>
<div
class=
"panel-heading"
>
<div
class=
"panel-heading"
id=
"headingTwo"
>
<h4
class=
"panel-title"
>
<a
data-toggle=
"collapse"
data-parent=
"#accordion"
href=
"#collapseTwo"
>
Item 2
</a>
<a
class=
"collapsed"
data-toggle=
"collapse"
data-parent=
"#accordionPanels"
href=
"#collapseTwo"
>
折叠面板 2
</a>
</h4>
</div>
<div
id=
"collapseTwo"
class=
"panel-collapse collapse in"
>
<div
class=
"panel-body"
>
<p>
The content of Item2.
<code>
.panel-collapse .collapse .in
</code>
默认显示。
</p>
</div>
<div
id=
"collapseTwo"
class=
"panel-collapse collapse"
>
<div
class=
"panel-body"
>
折叠面板内容 2
</div>
</div>
</div>
<div
class=
"panel panel-default"
>
<div
class=
"panel-heading"
>
<div
class=
"panel-heading"
id=
"headingThree"
>
<h4
class=
"panel-title"
>
<a
data-toggle=
"collapse"
data-parent=
"#accordion"
href=
"#collapseThree"
>
Item 3
</a>
<a
class=
"collapsed"
data-toggle=
"collapse"
data-parent=
"#accordionPanels"
href=
"#collapseThree"
>
折叠面板 3
</a>
</h4>
</div>
<div
id=
"collapseThree"
class=
"panel-collapse collapse"
>
<div
class=
"panel-body"
>
The content of item3.
<code>
.panel-collapse .collapse
</code>
</div>
<div
class=
"panel-body"
>
折叠面板内容 3
</div>
</div>
</div>
</div>
</example>
```
html
<div
class=
"panel-group"
id=
"accordionPanels"
aria-multiselectable=
"true"
>
<div
class=
"panel panel-default"
>
<div
class=
"panel-heading"
id=
"headingOne"
>
<h4
class=
"panel-title"
>
<a
data-toggle=
"collapse"
data-parent=
"#accordionPanels"
href=
"#collapseOne"
>
折叠面板 1
</a>
</h4>
</div>
<div
id=
"collapseOne"
class=
"panel-collapse collapse in"
>
<div
class=
"panel-body"
>
折叠面板内容 1
</div>
</div>
</div>
<div
class=
"panel panel-default"
>
<div
class=
"panel-heading"
id=
"headingTwo"
>
<h4
class=
"panel-title"
>
<a
class=
"collapsed"
data-toggle=
"collapse"
data-parent=
"#accordionPanels"
href=
"#collapseTwo"
>
折叠面板 2
</a>
</h4>
</div>
<div
id=
"collapseTwo"
class=
"panel-collapse collapse"
>
<div
class=
"panel-body"
>
折叠面板内容 2
</div>
</div>
</div>
<div
class=
"panel panel-default"
>
<div
class=
"panel-heading"
id=
"headingThree"
>
<h4
class=
"panel-title"
>
<a
class=
"collapsed"
data-toggle=
"collapse"
data-parent=
"#accordionPanels"
href=
"#collapseThree"
>
折叠面板 3
</a>
</h4>
</div>
<div
id=
"collapseThree"
class=
"panel-collapse collapse"
>
<div
class=
"panel-body"
>
折叠面板内容 3
</div>
</div>
</div>
</div>
```
##
结合按钮使用
##
使用方法
<div
class=
"example"
contenteditable=
"true"
>
<button
type=
"button"
class=
"btn btn-info"
data-toggle=
"collapse"
data-target=
"#collapseButton"
>
hulala
</button>
<div
id=
"collapseButton"
class=
"in"
style=
"height: auto;"
>
Ho la la hu la la, hu la hu la.
</div>
</div>
### 手动初始化
通常情况下,直接使用
`[data-*]`
属性就可以使折叠正常工作,但也提供了手动使用 JavaScript 代码进行初始化方式。
## 方法和事件
-
`$().collapse()`
-
`$().collapse(options)`
<table
class=
"table table-bordered table-striped"
>
其中
`options`
参数为可以选的,用于指定初始化的选项,可用选项如下:
<table
class=
"table table-bordered"
>
<thead>
<tr>
<th
style=
"width: 80px;"
>
方法
</th>
<th>
例子
</th>
<th>
选项
</th>
<th>
类型
</th>
<th>
默认值
</th>
<th>
描述
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
.collapse(options)
</td>
<td>
`$('#myCollapse').collapse({ toggle: false })`
</td>
<td>
赋予页面元素可折叠功能。接受一个可选的object作为参数。
</td>
</tr>
<tr>
<td>
.collapse('toggle')
</td>
<td>
`$('#myCollapse').collapse('toggle')`
</td>
<td>
展示或隐藏一个可折叠的页面元素。
</td>
<td>
`parent`
</td>
<td>
selector |
`false`
</td>
<td>
`false`
</td>
<td>
可用设定一个选择器字符串,用于指定折叠分组的父级元素。
</td>
</tr>
<tr>
<td>
.collapse('show')
</td>
<td>
`$('#myCollapse').collapse('show')`
</td>
<td>
展示一个可折叠页面元素。
</td>
</tr>
<tr>
<td>
.collapse('hide')
</td>
<td>
`$('#myCollapse').collapse('hide')`
</td>
<td>
隐藏一个可折叠页面元素。
</td>
<td>
`toggle`
</td>
<td>
'true' |
`false`
</td>
<td>
`true`
</td>
<td>
是否在初始化时显示折叠内容。
</td>
</tr>
</tbody>
</table>
<table
class=
"table table-bordered table-striped"
>
```
javascript
$
(
'
#myCollapseContent
'
).
collapse
({
toggle
:
false
});
```
### 方法
#### `$().collapse('show')`
显示折叠内容。
#### `$().collapse('hide')`
隐藏折叠内容。
#### `$().collapse('toggle')`
切换显示折叠内容。
#### 调用方法
```
javascript
// 显示折叠内容
$
(
'
#myCollapseContent
'
).
collapse
(
'
show
'
)
```
### 事件
当折叠内容显示或隐藏时会在折叠内容元素上触发以下事件:
<table
class=
"table table-bordered"
>
<thead>
<tr>
<th
style=
"width: 80px;"
>
事件
</th>
<th>
使用
</th>
<th>
事件
</th>
<th>
描述
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
show.zui.collapse
</td>
<td>
`$('#myCollapse').on('show.zui.collapse', function () { // do something… })`
</td>
<td>
当
`show`
方法被调用时,此事件将被立即触发。
</td>
<td>
`show.zui.collapse`
</td>
<td>
当折叠内容显示时触发。
</td>
</tr>
<tr>
<td>
shown.zui.collapse
</td>
<td>
`$('#myCollapse').on('shown.zui.collapse', function () { // do something… })`
</td>
<td>
当可折叠页面元素显示出来之后(同时CSS过渡效果也已执行完毕),此事件被触发。
</td>
<td>
`shown.zui.collapse`
</td>
<td>
当折叠内容显示后触发,此时动画已执行完毕。
</td>
</tr>
<tr>
<td>
hide.zui.collapse
</td>
<td>
`$('#myCollapse').on('hide.zui.collapse', function () { // do something… })`
</td>
<td>
当
`hide`
方法被调用时,此事件将被立即触发。
</td>
<td>
`hide.zui.collapse`
</td>
<td>
当折叠内容隐藏时触发。
</td>
</tr>
<tr>
<td>
hidden.zui.collapse
</td>
<td>
`$('#myCollapse').on('hidden.zui.collapse', function () { // do something… })`
</td>
<td>
当可折叠页面元素隐藏之后(同时CSS过渡效果也已执行完毕),此事件被触发。
</td>
<td>
`hidden.zui.collapse`
</td>
<td>
当折叠内容隐藏后触发,此时动画已执行完毕。
</td>
</tr>
</tbody>
</table>
```
$('#myCollapseContent').on('hidden.zui.collapse', function () {
console.log('折叠内容已隐藏。');
})
```
docs/part/javascript-popover.md
浏览文件 @
4c80f9a5
...
...
@@ -8,7 +8,7 @@ filter: tanchumianban tcmb
# 弹出面板
<style>
.
popover-examples
.popover
.
example-popover-static
.popover
{
position: relative;
display: block;
...
...
@@ -21,303 +21,315 @@ filter: tanchumianban tcmb
## 静态类型
<div
class=
"example
popover-examples
"
>
<div
class=
"example
example-popover-static clearfix
"
>
<div
class=
"popover top"
>
<div
class=
"arrow"
></div>
<h3
class=
"popover-title"
>
Popover top
</h3>
<h3
class=
"popover-title"
>
从上方弹出
</h3>
<div
class=
"popover-content"
>
<p>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
<h4>
江雪
<small>
唐·柳宗元
</small></h4>
<p>
千山鸟飞绝,万径人踪灭。
</p>
<p>
孤舟蓑笠翁,独钓寒江雪。
</p>
</div>
</div>
<div
class=
"popover right"
>
<div
class=
"arrow"
></div>
<h3
class=
"popover-title"
>
Popover right
</h3>
<h3
class=
"popover-title"
>
从右侧弹出
</h3>
<div
class=
"popover-content"
>
<p>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
<h4>
江雪
<small>
唐·柳宗元
</small></h4>
<p>
千山鸟飞绝,万径人踪灭。
</p>
<p>
孤舟蓑笠翁,独钓寒江雪。
</p>
</div>
</div>
<div
class=
"popover bottom"
>
<div
class=
"arrow"
></div>
<h3
class=
"popover-title"
>
Popover bottom
</h3>
<h3
class=
"popover-title"
>
从下方弹出
</h3>
<div
class=
"popover-content"
>
<p>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
<h4>
江雪
<small>
唐·柳宗元
</small></h4>
<p>
千山鸟飞绝,万径人踪灭。
</p>
<p>
孤舟蓑笠翁,独钓寒江雪。
</p>
</div>
</div>
<div
class=
"popover left"
>
<div
class=
"arrow"
></div>
<h3
class=
"popover-title"
>
Popover left
</h3>
<h3
class=
"popover-title"
>
从左侧弹出
</h3>
<div
class=
"popover-content"
>
<p>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
<h4>
江雪
<small>
唐·柳宗元
</small></h4>
<p>
千山鸟飞绝,万径人踪灭。
</p>
<p>
孤舟蓑笠翁,独钓寒江雪。
</p>
</div>
</div>
<div
class=
"clearfix"
></div>
</div>
### 不带箭头指示
<div
class=
"example popover-examples"
>
<div
class=
"popover"
>
<div
class=
"arrow"
></div>
<h3
class=
"popover-title"
>
Popover top
</h3>
<div
class=
"popover left"
>
<h3
class=
"popover-title"
>
不带箭头
</h3>
<div
class=
"popover-content"
>
<p>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
<h4>
江雪
<small>
唐·柳宗元
</small></h4>
<p>
千山鸟飞绝,万径人踪灭。
</p>
<p>
孤舟蓑笠翁,独钓寒江雪。
</p>
</div>
</div>
<div
class=
"clearfix"
></div>
</div>
## 动态演示
<template
class=
"pre-scrollable linenums"
/>
<div
class=
"example"
>
<a
href=
"##"
class=
"btn btn-lg btn-danger"
data-toggle=
"popover"
title=
""
data-content=
"我是内容!"
data-original-title=
"我时标题"
>
打开弹出框
</a>
```
html
<div
class=
"popover top"
>
<div
class=
"arrow"
></div>
<h3
class=
"popover-title"
>
从上方弹出
</h3>
<div
class=
"popover-content"
>
<h4>
江雪
<small>
唐·柳宗元
</small></h4>
<p>
千山鸟飞绝,万径人踪灭。
</p>
<p>
孤舟蓑笠翁,独钓寒江雪。
</p>
</div>
</div>
### 在不同方向弹出
<div
class=
"example text-center
"
>
<button
type=
"button"
class=
"btn btn-default"
data-toggle=
"popover"
data-placement=
"left"
data-content=
"我是内容。"
data-original-title=
"我时标题"
title=
""
>
左侧弹框
</button
>
<button
type=
"button"
class=
"btn btn-default"
data-toggle=
"popover"
data-placement=
"top"
data-content=
"我是内容。"
data-original-title=
"我时标题"
title=
""
>
上方弹框
</button
>
<button
type=
"button"
class=
"btn btn-default"
data-toggle=
"popover"
data-placement=
"bottom"
data-content=
"我是内容。"
data-original-title=
"我时标题"
title=
""
>
下方弹框
</button
>
<
button
type=
"button"
class=
"btn btn-default"
data-toggle=
"popover"
data-placement=
"right"
data-content=
"我是内容。"
data-original-title=
"我时标题"
title=
""
>
右侧弹框
</button
>
<div
class=
"popover right"
>
<div
class=
"arrow"
></div>
<h3
class=
"popover-title"
>
从右侧弹出
</h3>
<div
class=
"popover-content
"
>
<h4>
江雪
<small>
唐·柳宗元
</small></h4
>
<p>
千山鸟飞绝,万径人踪灭。
</p
>
<p>
孤舟蓑笠翁,独钓寒江雪。
</p
>
<
/div
>
</div>
### 指定html元素作为弹出内容
<div
class=
"example"
>
<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"
>
<tbody><tr>
<td>
Lorem ipsum dolor.
</td>
<td>
Nisi, ad, quisquam!
</td>
<td>
Eum, excepturi, placeat.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor.
</td>
<td>
Explicabo, nobis, nesciunt!
</td>
<td>
Sequi, doloribus, natus.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor.
</td>
<td>
Ipsum, suscipit, quibusdam?
</td>
<td>
Minus, tenetur, neque.
</td>
</tr>
</tbody></table>
<div
class=
"popover bottom"
>
<div
class=
"arrow"
></div>
<h3
class=
"popover-title"
>
从下方弹出
</h3>
<div
class=
"popover-content"
>
<h4>
江雪
<small>
唐·柳宗元
</small></h4>
<p>
千山鸟飞绝,万径人踪灭。
</p>
<p>
孤舟蓑笠翁,独钓寒江雪。
</p>
</div>
</div>
<div
class=
"popover left"
>
<div
class=
"arrow"
></div>
<h3
class=
"popover-title"
>
从左侧弹出
</h3>
<div
class=
"popover-content"
>
<h4>
江雪
<small>
唐·柳宗元
</small></h4>
<p>
千山鸟飞绝,万径人踪灭。
</p>
<p>
孤舟蓑笠翁,独钓寒江雪。
</p>
</div>
</div>
<div
class=
"popover left"
>
<h3
class=
"popover-title"
>
不带箭头
</h3>
<div
class=
"popover-content"
>
<h4>
江雪
<small>
唐·柳宗元
</small></h4>
<p>
千山鸟飞绝,万径人踪灭。
</p>
<p>
孤舟蓑笠翁,独钓寒江雪。
</p>
</div>
</div>
```
##
用法
##
动态演示
通过JavaScript启用弹出框:
<div
class=
"example"
>
<button
class=
"btn btn-danger"
data-toggle=
"popover"
title=
"江雪"
data-content=
"千山鸟飞绝,万径人踪灭。"
>
显示/隐藏弹出面板
</button>
</div>
```
$('#example').popover(options)</code></pre
>
```
html
<button
class=
"btn btn-danger"
data-toggle=
"popover"
title=
"江雪"
data-content=
"千山鸟飞绝,万径人踪灭。"
>
显示/隐藏弹出面板
</button
>
```
### 使用要点
```
javascript
$
(
'
[data-toggle="popover"]
'
).
popover
();
```
*
弹出框依赖
[
工具提示插件
](
#javascript/tooltips
)
,因此需要先加载工具提示插件。
*
出于性能方面的考虑,工具提示和弹框组件的data属性api是选择性加入的,也就是说
**你必须自己初始化他们**
。
*
弹出框在按钮组和输入框组中使用时,需要额外的设置:当提示框与
`.btn-group`
或
`.input-group`
联合使用时,你需要指定
`container: 'body'`
选项(见下面的文档)以避免不需要的副作用(例如,当弹出框显示之后,与其合作的页面元素可能变得更宽或是去圆角)。
*
在禁止使用的页面元素上使用弹出框时需要额外增加一个元素将其包裹起来:为了给
`disabled`
或
`.disabled`
元素添加弹出框时,将需要增加弹出框的页面元素包裹在一个
`<div>`
中,然后对这个
`<div>`
元素应用弹出框。
### 在不同方向弹出
## 选项
可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到
`data-`
之后,例如
`data-animation=""`
。
<div
class=
"table-responsive"
>
<table
class=
"table table-bordered table-striped"
>
<thead>
<tr>
<th
style=
"width: 100px;"
>
名称
</th>
<th
style=
"width: 100px;"
>
类型
</th>
<th
style=
"width: 50px;"
>
默认值
</th>
<th>
描述
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
animation
</td>
<td>
boolean
</td>
<td>
true
</td>
<td>
是否应用淡入淡出动画。
</td>
</tr>
<tr>
<td>
html
</td>
<td>
boolean
</td>
<td>
false
</td>
<td>
是否允许内容中包含html。
</td>
</tr>
<tr>
<td>
placement
</td>
<td>
string | function
</td>
<td>
'right'
</td>
<td>
top | bottom | left | right | auto.
<br>
显示位置
</td>
</tr>
<tr>
<td>
selector
</td>
<td>
string
</td>
<td>
false
</td>
<td>
当需要给动态的DOM元素应用工具提示时,需要手动制定选择器。
</td>
</tr>
<tr>
<td>
trigger
</td>
<td>
string
</td>
<td>
'click'
</td>
<td>
click | hover | focus | manual,决定交互方式。
</td>
</tr>
<tr>
<td>
title
</td>
<td>
string | function
</td>
<td>
''
</td>
<td>
标题
</td>
</tr>
<tr>
<td>
content
</td>
<td>
string | function
</td>
<td>
''
</td>
<td>
内容
</td>
</tr>
<tr>
<td>
delay
</td>
<td>
number | object
</td>
<td>
0
</td>
<td>
<p>
是否延迟展示。
</p>
<p>
<code>
delay: { show: 500, hide: 100 }
</code>
</p>
</td>
</tr>
<tr>
<td>
container
</td>
<td>
string | false
</td>
<td>
false
</td>
<td>
<p>
决定相对位置的父级容器。
</p>
</td>
</tr>
<tr>
<td>
tipClass
</td>
<td>
string
</td>
<td></td>
<td>
为动态生成的
<code>
div.popover
</code>
标签添加额外的CSS CLASS。
</td>
</tr>
<tr>
<td>
tipId
</td>
<td>
string
</td>
<td></td>
<td>
为动态生成的
<code>
div.popover
</code>
标签设置一个id属性。
</td>
</tr>
</tbody>
</table>
<div
class=
"example text-center"
>
<button
type=
"button"
class=
"btn"
data-toggle=
"popover"
data-placement=
"left"
data-content=
"千山鸟飞绝,万径人踪灭。"
title=
"江雪"
>
从左侧弹出
</button>
<button
type=
"button"
class=
"btn"
data-toggle=
"popover"
data-placement=
"top"
data-content=
"千山鸟飞绝,万径人踪灭。"
title=
"江雪"
>
从上方弹出
</button>
<button
type=
"button"
class=
"btn"
data-toggle=
"popover"
data-placement=
"bottom"
data-content=
"千山鸟飞绝,万径人踪灭。"
title=
"江雪"
>
从下方弹出
</button>
<button
type=
"button"
class=
"btn"
data-toggle=
"popover"
data-placement=
"right"
data-content=
"千山鸟飞绝,万径人踪灭。"
title=
"江雪"
>
从右侧弹出
</button>
</div>
<div>
<h4>
为单个弹出框应用data属性
</h4>
<p>
对单个弹出框可以通过data属性单独指定选项,如上所示。
</p>
</div>
```
html
<button
type=
"button"
class=
"btn"
data-toggle=
"popover"
data-placement=
"left"
data-content=
"千山鸟飞绝,万径人踪灭。"
title=
"江雪"
>
从左侧弹出
</button>
```
## 方法
```
html
<button
type=
"button"
class=
"btn"
data-toggle=
"popover"
data-placement=
"top"
data-content=
"千山鸟飞绝,万径人踪灭。"
title=
"江雪"
>
从上方弹出
</button>
```
```
html
<button
type=
"button"
class=
"btn"
data-toggle=
"popover"
data-placement=
"bottom"
data-content=
"千山鸟飞绝,万径人踪灭。"
title=
"江雪"
>
从下方弹出
</button>
```
$('#element').popover(options)
```
html
<button
type=
"button"
class=
"btn"
data-toggle=
"popover"
data-placement=
"right"
data-content=
"千山鸟飞绝,万径人踪灭。"
title=
"江雪"
>
从右侧弹出
</button>
```
```
javascript
$
(
'
[data-toggle="popover"]
'
).
popover
();
```
为一组元素初始化弹出框。
## 用法
### .popover('show')
### 初始化
出于性能方面的考虑,工具提示和弹框组件的data属性api是选择性加入的,也就是说
**你必须自己初始化他们**
。
-
`$().popover()`
-
`$().popover(options)`
参数
`options`
用于设置初始化选项,是可以选的。初始化选项也可以通过元素上的
`[data-*]`
属性来设置。
### 选项
可用的初始化选项如下:
<table
class=
"table table-bordered table-striped"
>
<thead>
<tr>
<th
style=
"width: 100px;"
>
名称
</th>
<th
style=
"width: 100px;"
>
类型
</th>
<th
style=
"width: 50px;"
>
默认值
</th>
<th>
描述
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`animation`
</td>
<td>
`true`
、
`false`
</td>
<td>
`true`
</td>
<td>
是否应用淡入淡出动画。
</td>
</tr>
<tr>
<td>
`container`
</td>
<td>
字符串或
`false`
</td>
<td>
`false`
</td>
<td>
可以设置为一个 CSS 选择器字符串用于指定动态创建的弹出面板元素被添加到的父级容器元素,例如
`container: 'body'`
。默认为
`false`
,此时动态创建的弹出面板元素被添加到触发元素所在的父级元素。
</td>
</tr>
<tr>
<td>
`content`
</td>
<td>
字符串或函数
</td>
<td>
`''`
</td>
<td>
用设定弹出面板显示的内容,如果指定为函数,则应该在函数内返回用于内容的字符串。
</td>
</tr>
<tr>
<td>
`delay`
</td>
<td>
数字或对象
</td>
<td>
`0`
</td>
<td>
如果指定为数字,则在指定数值的毫秒数后再显示。如果指定为对象,则可以分别为显示或隐藏之前延迟的数值,例如:
`delay: { show: 500, hide: 100 }`
。
</td>
</tr>
<tr>
<td>
`html`
</td>
<td>
`true`
、
`false`
</td>
<td>
`false`
</td>
<td>
是否允许弹出面板内容包含 HTML 格式源码。如果设置为 false,则仅仅使用 jQuery 的 text() 方法来设置弹出面板内容。
</td>
</tr>
<tr>
<td>
`placement`
</td>
<td>
字符串或函数
</td>
<td>
`'right'`
</td>
<td>
设置弹出面板显示的位置,可选值有:
`'top'`
,
`'bottom'`
,
`'left'`
,
`'right'`
,
`'auto'`
。如果设置为
`'auto'`
,则会自动决定位置。也可以指定为一个函数,来动态返回应该显示的位置。
</td>
</tr>
<tr>
<td>
`selector`
</td>
<td>
字符串或
`false`
</td>
<td>
`false`
</td>
<td>
如果指定了该选项,则会在代理元素来触发显示弹出面板,这样可以对于一些动态内容使用弹出面板。
</td>
</tr>
<tr>
<td>
`template`
</td>
<td>
字符串
</td>
<td>
`'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'`
</td>
<td>
HTML 模板字符串用来创建弹出面板显示内容元素。要求顶级元素必须有
`.popover`
类,弹出面板的内容会设置为
`.popover-content`
的内容,标题会设置为
`.popover-title`
的内容,
`.arrow`
将作为箭头元素。
</td>
</tr>
<tr>
<td>
`title`
</td>
<td>
字符串或函数
</td>
<td>
`''`
</td>
<td>
用设定弹出面板显示的标题,如果指定为函数,则应该在函数内返回用于标题的字符串。
</td>
</tr>
<tr>
<td>
`trigger`
</td>
<td>
`string`
</td>
<td>
`'click'`
</td>
<td>
指定哪些事件会触发显示弹出面板,多个事件用空格隔开,可选值包括:
`'click'`
、
`'hover'`
、
`'focus'`
、
`'manual'`
。如果设定为
`'manual'`
则需要用户通过 JavaScript 手动显示或隐藏弹出面板。
</td>
</tr>
<tr>
<td>
`tipClass`
</td>
<td>
字符串
</td>
<td>
`''`
</td>
<td>
为动态生成的
`.popover`
元素添加额外的 CSS 类。
</td>
</tr>
<tr>
<td>
`tipId`
</td>
<td>
字符串
</td>
<td>
`''`
</td>
<td>
为动态生成的
`.popover`
元素设置
`[id]`
属性。
</td>
</tr>
</tbody>
</table>
### 方法
#### <span class="code">$().popover('show')</span>
显示弹出框。
```
$('#
element
').popover('show');
$('#
myPopover
').popover('show');
```
###
.popover('hide')
###
# <span class="code">$().popover('hide')</span>
隐藏弹出框。
```
$('#
element
').popover('hide');
$('#
myPopover
').popover('hide');
```
###
.popover('toggle')
###
# <span class="code">$().popover('toggle')</span>
展示或隐藏弹出框。
```
$('#
element
').popover('toggle');
$('#
myPopover
').popover('toggle');
```
###
.popover('destroy')
###
# <span class="code">$().popover('destroy')</span>
隐藏并销毁弹出框。
```
$('#
element
').popover('destroy');
$('#
myPopover
').popover('destroy');
```
## 事件
<div
class=
"table-responsive"
>
<table
class=
"table table-bordered table-striped"
>
<thead>
<tr>
<th
style=
"width: 150px;"
>
事件类型
</th>
<th>
描述
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
show.zui.popover
</td>
<td>
当
<code>
show
</code>
方法被调用之后,此事件将被立即触发。
</td>
</tr>
<tr>
<td>
shown.zui.popover
</td>
<td>
当弹出框展示到用户面前之后(同时CSS过渡效果执行完之后)此事件被触发。
</td>
</tr>
<tr>
<td>
hide.zui.popover
</td>
<td>
当
<code>
hide
</code>
方法被调用之后,此事件被触发。
</td>
</tr>
<tr>
<td>
hidden.zui.popover
</td>
<td>
当弹出框被隐藏之后(同时CSS过渡效果执行完之后),此事件被触发。
</td>
</tr>
</tbody>
</table>
</div>
### 事件
当弹出面板显示或隐藏时会在触发元素上触发如下事件:
<table
class=
"table table-bordered"
>
<thead>
<tr>
<th
style=
"width: 150px;"
>
事件类型
</th>
<th>
描述
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`show.zui.popover`
</td>
<td>
当
`show`
方法被调用之后,此事件将被立即触发。
</td>
</tr>
<tr>
<td>
`shown.zui.popover`
</td>
<td>
当弹出框展示到用户面前之后(同时CSS过渡效果执行完之后)此事件被触发。
</td>
</tr>
<tr>
<td>
`hide.zui.popover`
</td>
<td>
当
`hide`
方法被调用之后,此事件被触发。
</td>
</tr>
<tr>
<td>
`hidden.zui.popover`
</td>
<td>
当弹出框被隐藏之后(同时 CSS 过渡效果执行完之后),此事件被触发。
</td>
</tr>
</tbody>
</table>
### 使用要点
*
弹出框依赖
[
工具提示插件
](
#javascript/tooltips
)
,因此需要先加载工具提示插件。
*
弹出框在按钮组和输入框组中使用时,需要额外的设置:当提示框与
`.btn-group`
或
`.input-group`
联合使用时,你需要指定
`container: 'body'`
选项(见下面的文档)以避免不需要的副作用(例如,当弹出框显示之后,与其合作的页面元素可能变得更宽或是去圆角)。
*
在禁止使用的页面元素上使用弹出框时需要额外增加一个元素将其包裹起来:为了给
`disabled`
或
`.disabled`
元素添加弹出框时,将需要增加弹出框的页面元素包裹在一个
`<div>`
中,然后对这个
`<div>`
元素应用弹出框。
<script>
function afterPageLoad() {
...
...
docs/part/javascript-tab.md
浏览文件 @
4c80f9a5
...
...
@@ -23,9 +23,9 @@ filter: biaoqianye bqy
<example
class=
"example-tabs-with-nav"
>
<ul
class=
"nav nav-tabs"
>
<li
class=
"active"
><a
href=
"###"
data-tab
=
"#tabContent1"
>
标签1
</a></li>
<li><a
href=
"###"
data-tab
=
"#tabContent2"
>
标签2
</a></li>
<li><a
href=
"###"
data-tab
=
"#tabContent3"
>
标签3
</a></li>
<li
class=
"active"
><a
data-tab
href
=
"#tabContent1"
>
标签1
</a></li>
<li><a
data-tab
href
=
"#tabContent2"
>
标签2
</a></li>
<li><a
data-tab
href
=
"#tabContent3"
>
标签3
</a></li>
</ul>
<div
class=
"tab-content"
>
<div
class=
"tab-pane active"
id=
"tabContent1"
>
...
...
@@ -46,9 +46,9 @@ filter: biaoqianye bqy
```
html
<ul
class=
"nav nav-tabs"
>
<li
class=
"active"
><a
href=
"###"
data-tab
=
"#tabContent1"
>
标签1
</a></li>
<li><a
href=
"###"
data-tab
=
"#tabContent2"
>
标签2
</a></li>
<li><a
href=
"###"
data-tab
=
"#tabContent3"
>
标签3
</a></li>
<li
class=
"active"
><a
data-tab
href
=
"#tabContent1"
>
标签1
</a></li>
<li><a
data-tab
href
=
"#tabContent2"
>
标签2
</a></li>
<li><a
data-tab
href
=
"#tabContent3"
>
标签3
</a></li>
</ul>
<div
class=
"tab-content"
>
<div
class=
"tab-pane active"
id=
"tabContent1"
>
...
...
docs/part/view-datatable.md
浏览文件 @
4c80f9a5
...
...
@@ -455,6 +455,11 @@ $('table.datatable').datatable({
*
`'up'`
:默认使用升序排序;
</td>
<td>
如果排序启用时定义此列是否可以排序。
</td>
</tr>
<tr>
<td>
`ignore`
</td>
<td>
`true`
|
`false`
(默认)
</td>
<td>
是否在构建数据表格时忽略该列,不会在页面显示。
</td>
</tr>
</tbody>
</table>
...
...
@@ -469,11 +474,26 @@ $('table.datatable').datatable({
<th>
合法值
</th>
<th>
说明
</th>
</tr>
<tr>
<td>
`id`
</td>
<td>
全局唯一字符串
</td>
<td>
该行的唯一编号,如果不指定则由程序按顺序生成。
</td>
</tr>
<tr>
<td>
`checked`
</td>
<td>
`true`
|
`false`
(默认)
</td>
<td>
此行数据在开始时是否为选中状态。
</td>
</tr>
<tr>
<td>
`cssClass`
</td>
<td>
字符串,默认
`''`
</td>
<td>
用于添加到生成的行元素
`<tr>`
上的 CSS 类。
</td>
</tr>
<tr>
<td>
`css`
</td>
<td>
字符串,默认
`''`
</td>
<td>
用设置
`<tr>`
上的
`[style]`
属性,用于自定义行样式。
</td>
</tr>
<tr>
<td>
`data`
</td>
<td>
数组
</td>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录