JS插件
使用Javascript增强用户体验本地存储
本地存储(Local storage)是在浏览器本地存储应用数据的好途径。相比较cookie拥有更大的存储空间(相同域下一般达到5M存储空间),使用更灵活,而且不会在每次提交中发送到服务器。几乎所有浏览器都支持本地存储,甚至包括IE8。
ZUI中提供读写本地存储的插件。文件路径为:/src/js/store.js
。
如何使用
要使用本地存储,直接使用windows.store
对象。store
提供了一系列方法来操作本地存储数据。
以下列出store对象提供的属性和方法:
属性或方法 | 说明 | 参数和要点 |
---|---|---|
store.enable |
属性,指示本地存储是否可用 |
|
store.slience |
属性,默认值为true |
当该值为true 时,本地存储不可用时进行存储和读取值时不抛出异常。 |
store.storage |
属性,返回浏览器原生localStorage 对象 |
|
store.length() |
方法,返回本地存储条目数量 | 即使本地存储不可用时也会返回0。 |
store.remove(key) |
移除指定的条目 |
参数:
|
store.get(key) |
获取存储条目的值 |
参数:
与原生的 |
store.set(key, value) |
设置存储条目的值 |
参数:
与原生的 |
store.key(index) |
根据索引获取存储条目的名称 | 参数:
|
store.forEach(callback) |
遍历所有存储条目 | 参数:
|
store.serialize(value) |
将一个任意类型的值序列化为字符串 | 参数:
|
store.deserialize(value) |
将一个字符串反序列化为值或对象。 | 参数:
|
store.getAll() |
获取所有存储的条目 |
返回一个对象,该对象的属性和对应的属性值记为存储的条目。 |
store.removeItem(key) |
方法store.remove() 的别名写法 |
参数:
|
store.getItem(key) |
获取指定名称的条目值 |
该方法相当于 参数:
|
store.setItem(key, value) |
设置存储的值 |
该方法相当于 参数:
|
代码示例
store.set('name', 'catouse'); // 使用本地存储设置'name'值为'catouse' store.set('date', {year: 2014, month: 8, day: 6}); // 将一个对象存储到本地存储 console.log(store.get('name')); // 从本地存储获取'name'的值 console.log(store.get('date').year); // 从本地存储获取'date'值的year属性 store.forEach(function(key, value) // 遍历所有本地存储的条目 { console.log(value); }); console.log(store.key(0)); // 获取本地存储第一个条目的名称 store.remove('name'); // 从本地存储移除‘name’的值 store.clear(); // 清空所有本地存储的条目
本地页面存储
很多时候,不同页面相同名称的条目的值需要分别保存。store
对象提供了一系列方法和属性来读写同一页面(相同路径)的条目。
属性或方法 | 说明 | 参数和要点 |
---|---|---|
store.page |
属性,当前页面存储的数据对象 |
|
store.pageGet(key) |
获取当前页面指定名称的值 | 参数:
|
store.pageSet(key,value) |
设置值 | 参数:
|
store.pageClear() |
清除当前页面所有存储的条目 | |
store.pageRemove(key) |
移除当前页面存储的指定条目 | 参数:
|
store.pageSave() |
立即保存当前页面存储的条目到本地存储 | 一般情况下不需要调用此方法,除非手动更改store.page 属性。 |
代码示例
/* 以下操作的键值仅针对当前页面 */ store.pageSet('name', 'catouse'); // 使用本地存储设置'name'值为'catouse' store.pageSet('date', {year: 2014, month: 8, day: 6}); // 将一个对象存储到本地存储 console.log(store.pageGet('name')); // 从本地存储获取'name'的值 console.log(store.pageGet('date').year); // 从本地存储获取'date'值的year属性 store.pageRemove('name'); // 从本地存储移除‘name’的值 store.pageClear(); // 清空所有本地存储的条目
实例
索引 | 名称 | 值 | |
---|---|---|---|
名称
值
|
模态框
模态框允许以对话框的形式弹出,有半透明的页面遮罩层,并在显示和隐藏时支持动画。
实例
静态实例
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
<h4 class="modal-title">标题</h4>
</div>
<div class="modal-body">
<p>主题内容...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
动态实例
点击按钮通过Javascript来启动一个模态框。
<!-- 模态框触发按钮 -->
<button type="button" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">启动模态框</button>
<!-- 模态框HTML -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
...
</div>
</div>
</div>
决定模态框位置
默认情况下模态框会根据自身内容高度展示在页面中心稍靠上方的位置。通过一些参数可以重新决定模态框的展现位置(具体参数参考“如何使用”章节)。
<button type="button" class="btn" data-position="fit" data-toggle="modal" data-target="#myModal">默认位置</button>
<button type="button" class="btn" data-position="center" data-toggle="modal" data-target="#myModal">窗口中间</button>
<button type="button" class="btn" data-position="" data-toggle="modal" data-target="#myModal">靠近上方</button>
<button type="button" class="btn" data-position="100px" data-toggle="modal" data-target="#myModal">距离上方100px</button>
更改模态框的大小
模态框的默认宽度为600px
,你可以通过为.modal-dialog
应用CSS样式来更改模态框的宽度。在ZUI中也提供了额外两种预设的宽度,通过为.modal-dialog
添加CSS类名来调整实现:
- 大模态框:添加
.modal-lg
CSS类名,宽度为900px
; - 小模态框:添加
.modal-sm
CSS类名,宽度为300px
。
<!-- 大模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myLgModal">大模态框</button>
<div class="modal fade" id="myLgModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- 小模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mySmModal">小模态框</button>
<div class="modal fade" id="mySmModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
禁用动画效果
模态框在弹出或隐藏时会伴随动画效果(淡入淡出效果),如果不需要,只需要移除.modal
标签上的.fade
类即可。
<!-- 禁用动画效果的模态框 -->
<div class="modal">
...
</div>
关闭模态框
在静态模态框HTML中增加一个按钮并添加data属性data-dismiss="modal"
,这样当点击该按钮时会关闭此对话框。你可以将该属性添加至模态框内的任何元素。
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
如何使用
使用data属性
一般情况下不需要手动调用Javascript来使用模态框,只需要在触发模态框的按钮或链接上增加两个额外的data属性即可:data-toggle="modal"
和data-target="#myModal"
。
其中data-toggle
属性声明该按钮或链接点击后会显示或隐藏模态框。data-target
属性指明静态模态框的ID属性。
如果使用<a>
触发模态框,可以直接将静态模块框的ID写在href
属性内,data-target
属性则可以忽略。
使用data属性也可以来为对话框提供其他参数。
<!-- 使用按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">启动模态框</button>
<!-- 使用超链接 -->
<a data-toggle="modal" href="#myModal">启动模态框</a>
手动调用Javascript
不使用按钮或链接来触发模态框也可以使用Javascript来手动触发。
$('#myModal').modal(options)
参数
参数既可以在手动调用的时候指定,也可以在静态模态框或者触发器上使用data属性来指定。
可用的参数如下:
参数 | 名称 | 可选值 | 说明 |
---|---|---|---|
name |
模态框名称 | 字符串,默认为'triggerModal' |
此参数会指定模态框DOM的id属性和iframe的id属性和name属性。 |
backdrop |
背景遮罩 |
|
使用布尔值来启用或禁用背景遮罩,如果指定为'static' 则会启动背景遮罩,但点击背景遮罩时不会触发关闭模态框的过程。 |
keyboard |
按键 |
|
当为ture 时,按下esc 键会关闭模态框。 |
show |
立即显示 |
|
是否在模态框初始化之后立即显示出来。 |
position |
显示位置 |
|
默认位置是在窗口中部稍偏上的地方。 |
方法
.modal(options)
使用参数对象来初始化模态框。
$('#myModal').modal(
{
keyboard : false,
show : true
})
.modal('toggle', position)
手动显示或隐藏模态框。position
参数为可选的,用来指定显示的位置。
$('#myModal').modal('toggle', 'center')
.modal('show', position)
手动显示模态框。position
参数为可选的,用来指定显示的位置。
$('#myModal').modal('show', 'fit')
.modal('hide', position)
手动隐藏模态框。position
参数为可选的,用来指定显示的位置。
$('#myModal').modal('hide', 'fit')
.modal('ajustPosition', position)
手动重新调整模态框显示位置。position
参数为可选的,用来指定显示的位置。
$('#myModal').modal('ajustPosition', 'fit')
事件
模态框提供了一系列事件用于监听模态框运行状态,便于在合适的时机运行你自己的代码。
事件 | 描述 |
---|---|
show.zui.modal |
当show 方法被调用时,此事件将被立即触发。 |
shown.zui.modal |
当模态对话框呈现到用户面前时(会等待过渡效果执行结束)此事件被触发。 |
hide.zui.modal |
当hide 方法被调用时,此事件将被立即触发。 |
hidden.zui.modal |
当模态对话框被隐藏(而且过渡效果执行完毕)之后,此事件将被触发。 |
escaping.zui.modal |
当用户按下esc 键来关闭对话框之前会调用此方法,如果在事件回调函数中返回false ,则会终止对话框关闭过程。 |
监听事件使用jQuery的on方法:
$('#myModal').on('shown.zui.modal', function()
{
alert('对话框已显示。');
})
使用要点
模态框触发器
模态框触发器允许你不需要书写静态模态框HTML,直接使用触发按钮或者一行Javascript代码即可让一个全新的模态框展现。支持使用Ajax从远程获取内容,或者通过iframe加载任何页面内容,当然不使用远程内容,直接使用本地内容也是很方便。
实例
加载远程内容
这里提供两种方法(Ajax和iframe)来加载远程内容,使用起来几乎似乎没有任何区别,你只需要确保远程地址所提供的内容是正确的类型。
在获取远程内容到显示的过程中,会显示正在加载的图标动画。
使用Ajax
使用data-remote="(ajax get url)"
属性来指定ajax片段获取地址。或者同时指定data-type="ajax"
和data-url="(ajax get url)"
属性。
<!-- 使用data-remote属性 -->
<button type="button" class="btn btn-primary" data-remote="partial/remote-modal.html" data-toggle="modal">Ajax模态框</button>
<!-- 使用data-type 和data-url属性 -->
<button type="button" class="btn btn-primary" data-type="ajax" data-url="partial/remote-modal.html" data-toggle="modal">Ajax模态框≶/button>
在返回的ajax片段中,你可以包含一个完整的.modal-dialog
内容,或者仅包含.modal-content
,甚至不是任何静态modal结构,触发器会根据所包含的内容自动补全对话框的缺失部分。
使用iframe(内嵌框架)
使用data-iframe="(iframe url)"
属性来指定远程页面内容获取地址。或者同时指定data-type="iframe"
和data-url="(iframe url)"
属性。
<!-- 使用data-iframe属性 -->
<button type="button" class="btn btn-primary" data-iframe="partial/iframe-modal.html" data-toggle="modal">iframe模态框</button>
<!-- 使用data-type 和data-url属性 -->
<button type="button" class="btn btn-primary" data-type="iframe" data-url="partial/iframe-modal.html" data-toggle="modal">iframe模态框≶/button>
加载自定义内容
通过定义custom
属性可以更灵活的为模态框更新内容。
指定内容文本
最简单的方法是为custom指定内容文本即可。同样可以使用data-custom
属性。
<!-- 使用data-custom 属性 -->
<button type="button" class="btn btn-primary" data-custom="此内容是自定义的:)" data-toggle="modal">指定内容文本</button>
/* 使用Javascript方法绑定在按钮上触发 */
$('#triggerButton').modalTrigger({custom: '<h1>此内容是自定义的</h1><p>哈哈:)</p>'});
/* 使用触发器对象直接显示 */
(new ModalTrigger({custom: '自定义内容'})).show();
指定页面元素作为内容
通过指定一个jQuery选择器名称来获取其内容作为模态框的内容。
<!-- 使用data-custom 属性 -->
<button type="button" class="btn btn-primary" data-custom="#myModalAlert" data-toggle="modal">指定页面元素的内容</button>
/* 使用Javascript方法绑定在按钮上触发 */
$('#triggerButton').modalTrigger({custom: '#myModalAlert'});
/* 使用触发器对象直接显示 */
(new ModalTrigger({custom: '#myModalAlert'})).show();
使用jQuery对象作为内容
直接为custom参数赋值为一个jQuery对象,此对象的内容将显示在对话框中。此方式无法使用data属性调用。
/* 使用Javascript方法绑定在按钮上触发 */
$('#triggerButton').modalTrigger({custom: $('#myModalAlert')});
/* 使用触发器对象直接显示 */
(new ModalTrigger({custom: $('#myModalAlert')})).show();
使用回调函数动态生成内容
将一个回调函数赋值给custom参数,触发器对象会自动调用此函数来实时获得动态内容并显示在模态框中。
回调函数提供一个参数对象,可以在生成内容时灵活运用。如果生成的内容是异步的时候,需要在内容准备就绪时调用参数提供的.ready()
方法来显示模态框。
/* 使用Javascript方法绑定在按钮上触发 */
$('#triggerButton').modalTrigger({custom: function()
{
return "当模态框显示时,时间是:" + (new Date).toString();
}});
/* 使用触发器对象直接显示 */
(new ModalTrigger({custom: function()
{
return "当模态框显示时,时间是:" + (new Date).toString();
}})).show();
如果你的回调函数是全局的,则只需要将custom参数指定为该函数的名称的字符串。
自动调整位置
当模态框内的内容发生更改导致模态框尺寸发生改变时,模态框会根据设置自动调整位置。
自动调整位置适合任何形式的模态框。
自定义头部
不显示头部
不显示头部需要指定参数showHeader
为false
。
<!-- 使用data-showHeader 属性 -->
<button type="button" class="btn btn-primary" data-show-header="false" data-toggle="modal">不显示头部</button>
/* 使用Javascript方法绑定在按钮上触发 */
$('#triggerButton').modalTrigger({showHeader: false});
/* 使用触发器对象直接显示 */
(new ModalTrigger({showHeader: false})).show();
自定义模态框标题
如果不指定模态框的标题,会自动使用触发按钮的title属性或文本作为模态框的标题。
<!-- 使用data-title 属性 -->
<button type="button" class="btn btn-primary" data-title="新的标题" data-toggle="modal">不显示头部</button>
/* 使用Javascript方法绑定在按钮上触发 */
$('#triggerButton').modalTrigger({title: '新的标题'});
/* 使用触发器对象直接显示 */
(new ModalTrigger({title: '新的标题'})).show();
使用图标
通过指定icon
属性来在标题前面增加一个图标。
图标的定义请参考“控件->图标”章节。
<!-- 使用data-title 属性 -->
<button type="button" class="btn btn-primary" data-icon="heart" data-toggle="modal">不显示头部</button>
/* 使用Javascript方法绑定在按钮上触发 */
$('#triggerButton').modalTrigger({icon: 'heart'});
/* 使用触发器对象直接显示 */
(new ModalTrigger({icon: 'heart'})).show();
如何使用
使用data属性来调用
使用在触发按钮上设置data属性即可使用。此方法与常规模态框触发按钮属性书写方式完全一致,只不过需要增加几个特殊属性,包括data-remote
、data-iframe
和data-custom
。
使用dta属性来调用请参考上面的实例章节。
使用Javascript手动调用
Javascript方法也十分灵活。
jQuery对象方法
使得一个jquery对象能够监听事件(一般为点击)并启动模态框。
$('#triggerButton').modalTrigger(options);
也可以使用modalTrigger
的别名方法modal
,这样与传统模态框的初始化方法完全一致。
使用window对象属性
在window对象上已默认绑定了一个模态框触发器对象,可以直接使用方法
并传递不同的参数来随时启动模态框。
window.modalTrigger.show(options);
创建新的触发器对象
创建一个新的模态框触发器来保存配置并启动模态框。
var myModalTrigger = new ModalTrigger(options);
myModalTrigger.show();
参数
在初始化模态框或者显示时都能够使用参数来个性化你的模态框。
参数 | 名称 | 可选值 | 说明 |
---|---|---|---|
type |
模态框类型 |
|
通常该参数和参数url 一起使用,当指定了custom 、remote 和iframe 参数时该参数可以忽略 |
url |
远程内容地址 | 远程地址字符串 | 通常该参数和type 一起似乎用,当指定了custom 、remote 和iframe 参数时该参数可以忽略 |
remote |
Ajax内容地址 | 远程地址字符串 | 如果使用该参数,则参数type 和url 可以忽略 |
iframe |
iframe页面地址 | 远程地址字符串 | 如果使用该参数,则参数type 和url 可以忽略 |
size |
模态框大小 |
|
|
width |
模态框宽度 |
|
如果使用size 参数,则可以忽略该参数 |
height |
模态框宽度 |
|
如果指定了高度不是'auto' 则可能出现内容与高度不匹配的情况。 |
showHeader |
是否显示标题 |
|
|
title |
模态框标题文本 | 字符串 | 当参数showHeader 为false 则此参数无效。 |
icon |
模态框标题图标 | 图标名称字符串 | 当参数showHeader 为false 则此参数无效。 |
fade |
是否使用淡入淡出动画 |
|
|
pisition |
模态框位置 |
|
最佳位置在窗口中间稍偏上的位置。 |
backdrop |
背景遮罩 |
|
使用布尔值来启用或禁用背景遮罩,如果指定为'static' 则会启动背景遮罩,但点击背景遮罩时不会触发关闭模态框的过程。 |
keyboard |
按键 |
|
当为ture 时,按下esc 键会关闭模态框。 |
方法
获取触发器对象实例
要使用触发器方法,需要首先获取触发器对象的实例。
通过触发按钮的data属性
var modalTrigger = $('#triggerButton').data('zui.modaltrigger');
使用window对象绑定的触发器
var myTrigger = window.modalTrigger;
创建新的触发器实例
var newTrigger = new ModalTrigger(options);
显示模态框
在显示模态框时,可以重新传入新的参数,而不影响触发器对象原来的参数。
myModalTrigger.show(options);
关闭模态框
myModalTrigger.close();
切换显示和关闭状态
如果模态框没有显示,则立即显示,如果已经显示则关闭。
在切换显示和关闭状态时,可以重新传入新的参数,而不影响触发器对象原来的参数。
myModalTrigger.toggle(options);
重新调整位置
使用新的位置参数来重新设置模态框的显示位置。
myModalTrigger.ajustPosition(options);
事件
因为模态框的DOM内容是动态生成的,不方便使用jQuery方法来绑定事件,不过可以将监听事件的回调函数传入参数中。
事件 | jquery事件名称 | 说明 |
---|---|---|
onShow |
show.zui.modal |
当模态框的show方法被调用时立即发生 |
shown |
shown.zui.modal |
当模态框完全显示后发生(执行完显示动画之后) |
onHide |
hide.zui.modal |
当模态框hide方法被调用是立即发生 |
hidden |
hidden.zui.modal |
当模态框完全隐藏后发生(执行完隐藏动画之后) |
loaded |
loaded.zui.modal |
当远程内容加载完成后发生 |
myModalTrigger.show({shown: function()
{
alert('模态框已显示。');
}});
如果模态框的name
参数是已知的,则可以获取模态框的jquery对象实例通过jQuery对象的on方法来绑定事件。
$('#triggerModal').on('shown.zui.modal', function(){...});
下拉菜单
类型
基本类型
将下拉菜单触发器和下拉菜单都包裹在.dropdown里,或者另一个声明了position: relative;的元素。然后添加组成菜单的HTML代码。
通过是否指定data-toggle='dropdown'来开关下拉菜单。
导航条下来菜单
标签下拉菜单
按钮下拉菜单
变化
弹出方式
下拉菜单的子菜单
小标题和禁用
通过li.dropdown-header增加小标题,为li增加.disabled来禁用。
标签页
一般结合导航使用。
类型
基本类型
通过
ul.nav + div.tab-content
的方式实现。
口是心非你深情的承诺
都随着西风飘渺远走
痴人梦话我钟情的倚托
就像枯萎凋零的花朵
星火燎原我热情的眼眸
曾点亮最灿烂的天空
晴天霹雳你绝情的放手
在我最需要你的时候
于是爱恨交错人消瘦
怕是怕这些苦没来由
于是悲欢起落人静默
等一等这些伤会自由
于是爱恨交错人消瘦
怕是怕这些苦没来由
于是悲欢起落人静默
等一等这些伤会自由
口是心非你矫情的面容
都烙印在心灵的角落
无话可说我纵情的结果
就像残破光秃的山头
浑然天成我纯情的悸动
曾奔放最滚烫的节奏
不可收拾你滥情的抛空
变化
导航样式
ul.nav.nav-pills
,通过修改ul的.nav-*来修改导航样式,具体见导航控件。
口是心非你深情的承诺
都随着西风飘渺远走
痴人梦话我钟情的倚托
就像枯萎凋零的花朵
星火燎原我热情的眼眸
曾点亮最灿烂的天空
晴天霹雳你绝情的放手
在我最需要你的时候
于是爱恨交错人消瘦
怕是怕这些苦没来由
于是悲欢起落人静默
等一等这些伤会自由
于是爱恨交错人消瘦
怕是怕这些苦没来由
于是悲欢起落人静默
等一等这些伤会自由
口是心非你矫情的面容
都烙印在心灵的角落
无话可说我纵情的结果
就像残破光秃的山头
浑然天成我纯情的悸动
曾奔放最滚烫的节奏
不可收拾你滥情的抛空
载入效果
为每个.tab-pane添加.fade可以让标签页具有淡入的特效。同时第一个标签页所对应的的内容区必须也添加.in
口是心非你深情的承诺
都随着西风飘渺远走
痴人梦话我钟情的倚托
就像枯萎凋零的花朵
星火燎原我热情的眼眸
曾点亮最灿烂的天空
晴天霹雳你绝情的放手
在我最需要你的时候
于是爱恨交错人消瘦
怕是怕这些苦没来由
于是悲欢起落人静默
等一等这些伤会自由
于是爱恨交错人消瘦
怕是怕这些苦没来由
于是悲欢起落人静默
等一等这些伤会自由
口是心非你矫情的面容
都烙印在心灵的角落
无话可说我纵情的结果
就像残破光秃的山头
浑然天成我纯情的悸动
曾奔放最滚烫的节奏
不可收拾你滥情的抛空
方法和事件
方法 | 例子 | 描述 |
.tab('show')
|
$("#myTab a:last").tab('show')
|
激活标签页和内容区 |
事件 | 使用 | 描述 |
show.bs.tab | $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { e.target // activated tab e.relatedTarget // previous tab }) | 当要激活标签页和标签内容的时候激活该事件 |
shown.bs.tab | $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // activated tab e.relatedTarget // previous tab }) | 当标签页和标签内容载入完毕后,激活该事件 |
关于
e.target
和
e.relatedTarget
分别表示当前激活标签对象和前一个标签对象。
可遍历对象查看对象各个属性和值:
$('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e)
{
$.each(e.target, function(n, value)
{
if(value) alert(n + ': ' + value);
})
})
漂浮消息
漂浮消息允许在页面指定位置展示一个消息浮动在已有内容之上。此消息可以设置为自动关闭或者让用户自行决定关闭。漂浮消息不会打断用户当前操作,一般用于提示后台操作,或者针对用户的全局操作作出及时回应。
实例
漂浮消息可以设置图标,并且可以决定是否显示关闭按钮。
显示位置
提供7个预设的显示位置。
色彩类型
提供8种颜色类型。
禁用动画效果
如何使用
使用Messager对象
创建一个Messager
实例来使用漂浮消息。
方法 | 参数 | 定义 |
---|---|---|
构造函数 |
|
创建新的Messager实例。 |
show |
无 | 立即显示消息 |
hide |
无 | 立即隐藏消息 |
// 使用jQuery对象
var msg = new $.Messager('消息内容', {placement: 'bottom'});
// 使用window对象
// var msg = new window.Messager('消息内容', {placement: 'bottom'});
// 显示消息
msg.show();
// 隐藏消息
msg.hide();
快速显示
使用jQuery对象或window
对象的messager
实例的show()
方法来即时显示一个漂浮消息。
调用$.messager.show()
或者window.messager.show()
之后立即显示并返回新创建的Messager
实例。可以使用返回的实例来手动执行hide
方法隐藏此消息。
show()
方法提供两个参数,定义于Messager
构造函数参数定义相同。
// 使用jQuery对象
var msg = $.messager.show('消息内容', {placement: 'bottom'});
// 使用window对象
// var msg = window.messager.show('消息内容', {placement: 'bottom'});
// 隐藏消息
msg.hide();
参数定义
参数 | 可选值 | 说明 |
---|---|---|
type |
'default' (默认)|'primary' |'success' |'info' |'warning' |'danger' |'important' |'special' |
不同类型的消息对应使用不同的颜色展示。 |
placement |
'top' (默认)|'bottom' |'top-left' |'top-right' |'bottom-left' |'bottom-right' |'center' |
决定消息显示的位置。 |
time |
表示时间延迟,单位毫秒,默认为4000 | 自显示之后超过此时间设定会自动隐藏消息。如果设置为0则不会自动隐藏。 |
parent |
'body' |
一个jquery选择器,决定消息内容DOM的父节点。 |
icon |
null |
可以额外制定一个图标在消息文本之前显示,图标定义参见“控件>图标”章节。 |
close |
true (默认)|false |
如果为true ,则在消息右侧显示一个关闭按钮,用户可以自行隐藏消息。 |
fade |
true (默认)|false |
如果为true ,则在显示和隐藏消息时使用渐隐渐显的动画效果。 |
scale |
true (默认)|false |
如果为true ,则在显示和隐藏消息时使用缩放的动画效果。 |
提示消息
类型
一般工具提示
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, cupiditate, eius, modi, veniam iure perspiciatis hic vitae quisquam ullam animi ipsum repellat temporibus have a officiis voluptatibus nostrum laborum debitis quidem illo deleniti iste! Minima, facilis aut explicabo debitis fugit dolor sint at soluta nulla omnis itaque have a illum commodi numquam enim quod architecto molestias qui eveniet et amet have a laborum quisquam quam provident esse beatae quas impedit voluptas nostrum have a aspernatur deleniti suscipit blanditiis dignissimos temporibus eligendi quae corrupti have a pariatur quo! Enim, ipsa, odio quasi laboriosam provident id nihil maxime architecto dolorum quas harum veniam perspiciatis tempora ducimus qui! Rem, obcaecati reiciendis officia quam.
参数
不同方向的提示
注意
选择性加入的功能
出于性能方面的考虑,工具提示和弹框组件的data属性api是选择性加入的,也就是说 你必须自己初始化他们 。
工具提示与按钮组和输入框组联合使用时需要一些特殊设置
在
.btn-group
或
.input-group
内的元素上使用工具提示时,你需要指定
container: 'body'
选项以避免不需要的副作用(例如,当工具提示显示之后,与其合作的页面元素可能变得更宽或是去圆角)。
在禁止使用的页面元素上使用工具提示时需要额外增加一个元素将其包裹起来
为了给
disabled
或
.disabled
元素添加工具提示,将需要增加工具提示的页面元素包裹在一个
<div>
中,然后对这个
<div>
元素应用工具提示。
用法
通过JavaScript激活工具提示:
$('#example').tooltip(options)
Markup
The generated markup of a tooltip is rather simple, though it does require a position (by default, set to
top
by the plugin).
<div class="tooltip">
<div class="tooltip-inner">
Tooltip!
</div>
<div class="tooltip-arrow"></div>
</div>
选项
可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到
data-
之后,例如
data-animation=""
。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
animation | boolean | true | 决定是否应用淡入淡出动画。 |
html | boolean | false | 是否允许展示html标签。 |
placement | string | function | 'top' |
top | bottom | left | right | auto.
显示的位置。 |
selector | string | false | 当需要为动态DOM应用工具提示,需要手动指定选择器。 |
title | string | function | '' | 标题。 |
trigger | string | 'hover focus' | click | hover | focus | manual. 触发方式。 |
delay | number | object | 0 |
如果指定,则应用延迟。
|
container | string | false | false |
决定相对位置的父级容器。
|
对单个工具提示使用data属性
使用data属性可以为单个工具提示指定额外选项,如下所示。
标记
<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>
方法
$().tooltip(options)
为一组元素应用工具提示。
.tooltip('show')
展示工具提示。
js$('#element').tooltip('show')
.tooltip('hide')
隐藏工具提示。
js$('#element').tooltip('hide')
.tooltip('toggle')
展示或隐藏工具提示。
js$('#element').tooltip('toggle')
.tooltip('destroy')
隐藏并销毁工具提示。
js$('#element').tooltip('destroy')
事件
事件类型 | 描述 |
---|---|
show.bs.tooltip |
当
show
方法被调用之后,此事件将被立即触发。
|
shown.bs.tooltip | 当工具提示展示到用户面前之后(同时CSS过渡效果执行完之后)此事件被触发。 |
hide.bs.tooltip |
当
hide
方法被调用之后,此事件被触发。
|
hidden.bs.tooltip | 当工具提示被隐藏之后(同时CSS过渡效果执行完之后),此事件被触发。 |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something…
})
弹出框
插件依赖
弹出框依赖 工具提示插件 ,因此需要先加载工具提示插件。
选择性加入的功能
出于性能方面的考虑,工具提示和弹框组件的data属性api是选择性加入的,也就是说 你必须自己初始化他们 。
弹出框在按钮组和输入框组中使用时,需要额外的设置
当提示框与
.btn-group
或
.input-group
联合使用时,你需要指定
container: 'body'
选项(见下面的文档)以避免不需要的副作用(例如,当弹出框显示之后,与其合作的页面元素可能变得更宽或是去圆角)。
在禁止使用的页面元素上使用弹出框时需要额外增加一个元素将其包裹起来
为了给
disabled
或
.disabled
元素添加弹出框时,将需要增加弹出框的页面元素包裹在一个
<div>
中,然后对这个
<div>
元素应用弹出框。
类型
静态类型
Popover top
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover right
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover bottom
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover left
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
不带箭头指示
Popover top
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
动态演示
不同方向
指定html元素作为弹出内容
Popover top
Lorem ipsum dolor. | Nisi, ad, quisquam! | Eum, excepturi, placeat. |
Lorem ipsum dolor. | Explicabo, nobis, nesciunt! | Sequi, doloribus, natus. |
Lorem ipsum dolor. | Ipsum, suscipit, quibusdam? | Minus, tenetur, neque. |
用法
通过JavaScript启用弹出框:
js$('#example').popover(options)
选项
可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到
data-
之后,例如
data-animation=""
。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
animation | boolean | true | 是否应用淡入淡出动画。 |
html | boolean | false | 是否允许内容中包含html。 |
placement | string | function | 'right' |
top | bottom | left | right | auto.
显示位置 |
selector | string | false | 当需要给动态的DOM元素应用工具提示时,需要手动制定选择器。 |
trigger | string | 'click' | click | hover | focus | manual,决定交互方式。 |
title | string | function | '' | 标题 |
content | string | function | '' | 内容 |
delay | number | object | 0 |
是否延迟展示。
|
container | string | false | false |
决定相对位置的父级容器。 |
为单个弹出框应用data属性
对单个弹出框可以通过data属性单独指定选项,如上所示。
方法
$().popover(options)
为一组元素初始化弹出框。
.popover('show')
显示弹出框。
js$('#element').popover('show')
.popover('hide')
隐藏弹出框。
js$('#element').popover('hide')
.popover('toggle')
展示或隐藏弹出框。
js$('#element').popover('toggle')
.popover('destroy')
隐藏并销毁弹出框。
js$('#element').popover('destroy')
事件
事件类型 | 描述 |
---|---|
show.bs.popover |
当
show
方法被调用之后,此事件将被立即触发。
|
shown.bs.popover | 当弹出框展示到用户面前之后(同时CSS过渡效果执行完之后)此事件被触发。 |
hide.bs.popover |
当
hide
方法被调用之后,此事件被触发。
|
hidden.bs.popover | 当弹出框被隐藏之后(同时CSS过渡效果执行完之后),此事件被触发。 |
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
})
折叠
需要 transition.js 支持。
.collapse
隐藏条目,
.collapse.in
显示条目。
调用方式一:仅仅通过向页面元素添加
data-toggle="collapse"
和
data-target
就可以为其赋予控制可折叠页面元素的能力。
data-target
属性接受一个CSS选择器作为其控制对象。请确保为可折叠页面元素添加
.collapse
。
如果你希望可折叠页面元素的默认状态是展开的,请添加
.in
。
为了给一组可折叠页面元素添加控制器,添加
data-parent="#selector"
即可
调用方式二:手动触发
$(".collapse").collapse()
类型
结合面板
结合按钮
变化
方法和事件
方法 | 例子 | 描述 |
---|---|---|
.collapse(options) |
$('#myCollapse').collapse({ toggle: false })
|
赋予页面元素可折叠功能。接受一个可选的object作为参数。 |
.collapse('toggle') |
$('#myCollapse').collapse('toggle')
|
展示或隐藏一个可折叠的页面元素。 |
.collapse('show') |
$('#myCollapse').collapse('show')
|
展示一个可折叠页面元素。 |
.collapse('hide') |
$('#myCollapse').collapse('hide')
|
隐藏一个可折叠页面元素。 |
事件 | 使用 | 描述 |
---|---|---|
show.bs.collapse |
$('#myCollapse').on('show.bs.collapse', function () { // do something… })
|
当
show
方法被调用时,此事件将被立即触发。
|
shown.bs.collapse |
$('#myCollapse').on('shown.bs.collapse', function () { // do something… })
|
当可折叠页面元素显示出来之后(同时CSS过渡效果也已执行完毕),此事件被触发。 |
hide.bs.collapse |
$('#myCollapse').on('hide.bs.collapse', function () { // do something… })
|
当
hide
方法被调用时,此事件将被立即触发。
|
hidden.bs.collapse |
$('#myCollapse').on('hidden.bs.collapse', function () { // do something… })
|
当可折叠页面元素隐藏之后(同时CSS过渡效果也已执行完毕),此事件被触发。 |
轮播
使用方法一:通过data属性可以很容易的控制轮播的定位。
data-slide
可以接受控制播放位置的
prev
或
next
关键字。另外,还可以通过
data-slide-to
传递以
0
开始的幻灯片下标。
data-ride="carousel"
属性用来标记在页面加载之后即开始启动的轮播组件。
使用方法二:通过js手动启动轮播组件:
$('.carousel').carousel()
类型
基本类型
变化
选项
可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到
data-
之后,例如
data-interval=""
。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
interval | number | 5000 | 幻灯片轮换的等待时间。如果为false,轮播将不会自动开始循环。 |
pause | string | "hover" | 鼠标停留在幻灯片区域即暂停轮播,鼠标离开即启动轮播。 |
wrap | boolean | true | 轮播是否持续循环。 |
方法和事件
可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到
data-
之后,例如
data-interval=""
。
方法 | 描述 |
---|---|
.carousel(options)
|
初始化轮播组件,接受一个可选的object类型的options参数,并开始幻灯片循环。 |
.carousel('cycle')
|
从左到右循环各帧。 |
.carousel('pause')
|
停止轮播。 |
.carousel(number)
|
将轮播定位到指定的帧上(帧下标以0开始,类似数组)。 |
.carousel('pre')
|
返回上一帧。 |
.carousel('next')
|
转到下一帧。 |
Bootstrap的轮播组件暴露了两个事件用于监听。
事件类型 | 描述 |
---|---|
slide.bs.carousel |
此事件在
slide
方法被调用之后立即出发。
|
slid.bs.carousel | 当所有幻灯片播放完之后被触发。 |
$('#myCarousel').on('slide.bs.carousel', function() {// do something…})
|
日期选择
日期选择插件可以帮助用户更方便准确的选择日期和时间。
在ZUI中包含的日期选择控件基于开源项目 DateTime Picker 定制开发。
类型
日期选择
时间选择
日期+时间选择
变化
禁用输入
只允许用户选择一个日期或时间,只需要给input
加上readonly
属性。
使用输入框组
输入框组可以添加额外的按钮来操作日期选择插件。
按钮中的.icon-remove
用来移除输入的日期。.icon-th
,.icon-calendar
,.icon-time
用来激活日期选择框。
Chosen
Chosen是用来增强单选列表和多选列表的更佳选择。
多项选择和单项选择
图标选择插件
为方便选择漂亮的图标,依赖于Chosen新作了图标选择插件。
富文本编辑器
类型
默认模式
简单模式
变化
简单风格
拖放
自动触发器
利用自动触发器能够不写一行Javascript代码做很多有趣的事情。
参数
参数名 | 说明 | 可选值 |
---|---|---|
trigger |
触发器类型 |
|
selector |
子代选择器,用来过滤触发条件 | 默认为null |
events |
触发事件名 | 绑定在触发器上的事件名称,默认为'click',即点击元素时触发 |
animate |
动画类型 | 当显示或隐藏元素时执行动画的类型
|
easing |
动画缓动函数 |
|
animateSpeed |
动画执行速度 |
|
preventDefault |
是否阻止事件默认行为 |
|
cancelBubble |
是否取消事件冒泡 |
|
target |
触发后事件执行的主体 | 使用jquery对象或者jquery选择器字符串来指定,如果为null ,则指定为触发器自身 |
before |
触发事件发生之前调用 | 指定一个函数在触发事件发生之前调用,如果在此函数内返回false ,则不执行后续触发过程 |
after |
触发事件发生之后调用 | 指定一个函数在触发事件发生之后调用 |
类型
显示或隐藏元素

切换css class
