目前 Puerh 的大部分组件都使用 Twitter Bootstrap 库的自定义 Javascript 插件。删除了其中网站不常用的 Carousel 等组件,修改 Tips、Modals 等插件以适合互联网需求,增加 Validator 和 Linkage 组件。

Modals(弹出层) Dropdowns(下拉菜单) Tabs(标签切换) Tips(浮层提示条)
Alert(可关闭消息) Typeahead(自动完成) Scrollspy(滚动生成) Collapse(折叠)
Validator(表单验证) Linkage(联动操作)
注:API 接口使用可以参考:http://twitter.github.com/bootstrap/javascript.html

# Modals(弹出层)

一、如何使用:

$('#myModal').modal(Options);

演示:

二、Options 对象

Modal 只有唯一的方法:.modal(Options)。传入的 Options 可以是对象,也可以是字符串。当传入的 Options 是对象时,使用下面的属性:

Name type default description
backdrop boolean true 当 options 中设置 backdrop: 'static' 时,点击背景的时候,不会关掉弹出框。设置为 false 的时候是不显示背景,不要混淆。
keyboard boolean true 是否允许用 Esc 键来关掉弹出框。
show boolean true 初始化时显示弹出框。

当传入的 Options 是字符串时,传入内容的用法如下:

{String} Name description
toggle 反复手动触发弹出层的打开/关闭。
hide 手动隐藏弹出层。
show 手动打开弹出层。

三、HTML 标记:

在触发弹出框的元素添加 data-toggle="modal",添加 data-target="#弹出框ID"href="弹出框ID" 来指定弹出框。如:

<button data-toggle="modal" data-target="#myModal">demo</button>

// 目标
<div class="fade hide" id="myModal">
	<a data-dismiss="modal" class="close">×</a>
	hello world
</div>

如果想让弹出框有动画效果,只需要给目标元素添加 .fade 这个 class,如上代码所示。

四、支持事件

Event Description
show 使用 show 显示弹出层的时候,事件被触发。
shown 当弹出层可见的时候,事件被触发。不一定是由 show 触发,可能是 toggle
hide 使用 hide 隐藏弹出层的时候,事件被触发。
hidden 当弹出层不可见的时候,事件被触发。不一定是由 hide 触发,可能是 toggle
// 事件示例代码
$('#myModal').on('hidden', function () {
	// do something…
})

一、如何使用:

有两种方法,一种是使用 javascript 来设置:

$('.dropdown-toggle').dropdown()

另一种方法是,使用 html 标记来直接设置:

text place on the left side
注册 | 登录 - 用户中心 付费推广 - 帮助 - 手机版

二、HTML 标记:

在触发下拉框需要添加 data-target="#下拉框ID"href="下拉框ID" 来指定下拉框。如:

<ul>
	<li id="#myDropdown"><button data-toggle="dropdown" data-target="#myDropdown">dropdown</button>
		<ul class="dropdown-menu">
			<li><a href="#">item 1</a></li>
			<li><a href="#">item 2</a></li>
			<li><a href="#">item 3</a></li>
		</ul>
	</li>
</ul>

# Tabs(标签切换)

一、如何使用:

// javascript 方式触发
$('#myTab').tab('show')

演示:

二、HTML 标记:

在触发点添加 data-toggle="tab" 自动触发 Tab,添加 data-target="#对应Tab内容的ID" 或者 href="#对应Tab内容的ID" 来指定对应的 Tab 内容显示。

<ul class="tab-title">
	<li class="active"><a href="#home">Home</a></li>
	<li><a href="#profile">Profile</a></li>
	<li><a href="#messages">Messages</a></li>
	<li><a href="#settings">Settings</a></li>
</ul>
 
<div class="tab-content">
	<div class="tab-content-pane active" id="home">...</div>
	<div class="tab-content-pane" id="profile">...</div>
	<div class="tab-content-pane" id="messages">...</div>
	<div class="tab-content-pane" id="settings">...</div>
</div>

也可以不使用 data-toggle 来触发,而是使用 javascript 手动触发。

三、支持事件

Event Description
show 显示一个新的 tab 前触发此事件。可以用 event.targetevent.relatedTarget 来追踪激活的 tab 和被关闭的 tab (如果有的话) 。
shown 显示一个新的 tab 后触发引事件。可以用 event.targetevent.relatedTarget 来追踪激活的 tab 和被关闭的 tab (如果有的话) 。
// 事件示例代码
$('a[data-toggle="tab"]').on('shown', function (e) {
    e.target // 被激活的 tab
    e.relatedTarget // 上一个激活(已经关闭)的 tab
})

# Tips(浮层提示条)

一、如何使用:

// javasript 手动触发
$('#tips').popover(options)

演示:

二、Options 对象

Tips 只有唯一的方法:.popover(Options)。传入的 Options 可以是对象,也可以是字符串。当传入的 Options 是对象时,使用下面的属性:

Name type default description
animation boolean true 应用 CSS 动画
placement string|function 'right' 显示的位置,可以是:top | bottom | left | right
selector string false 如果设定选择器,那 Tips 则只在该选择器上生效。
trigger string 'hover' 触发 Tips 的事件,可以是:hover | focus | manual
title string | function '' 如果没有 title 标签时默认值。
content string | function '' 如果没有设置 data-content 时的默认值。
delay number | object 0

显示和隐藏 Tips 的过渡时间,以 ms 为单位

如何只设定一个 {number},则会同时应用到 show/hide 上。

可以以对象方式传值: delay: { show: 500, hide: 100 }

当 Options 是一个字条串的时候,如下使用:

Name Description
show 显示 Tips
hide 隐藏 Tips
toggle 反复显示/隐藏 Tips

三、HTML 标记:

<button id="tips" data-content="Tips 的内容" title="标题">demo</button>

# Alert(可关闭消息)

一、如何使用:

// 如果不使用选择器,则直接关掉 .closeclass="alert" 的标签
$(".alert").alert(Options)

× 演示:hello world

二、Options 对象

Modal 只有唯一的方法:.modal(Options)。传入的 Options 是字符串时,关闭这个 Alert Message。代码如下:

$(".alert").alert('close');

三、HTML 标记:

添加关闭按钮:

<a class="close" data-dismiss="alert" href="#">×</a>

// 目标:使用 javascript 指定目标,或者直接作为 .close 的父元素,添加 class="alert"
<p class="alert fade in">
	<a class="close" data-dismiss="alert" href="#">×</a>
	<strong>演示:</strong>hello world
</p>

如果想让弹出框有动画效果,只需要给目标元素添加 .fade 这个 class,如上代码所示。

四、支持事件

Event Description
close 在块被关闭的瞬间触发。
closed 在块关闭,CSS 动画完成后触发。
// 事件示例代码
$('#my-alert').bind('closed', function () {
    // do something…
})

# Typeahead(自动完成)

一、如何使用:

$('.typeahead').typeahead();

演示:

二、Options 对象

Typeahead 只有唯一的方法:.typeahead(Options)。传入的 Options 对象有以下属性/方法:

Name type default description
source array [ ] 自动完成的数据。
items number 8 自动完成显示的最大数目。
matcher function case insensitive 匹配自动完成项。接受唯一的参数 item 以匹配当前完成的内容。可以使用 this.query 来得到当前自动完成的项。如果匹配到相应的选择,则返回一个布尔值:true
sorter function exact match,
case sensitive,
case insensitive
用以排序自动完成项的方法。接受一个参数 items,可以使用 this.query 来得到当前自动完成的项。
highlighter function highlights all default matches 用以高亮匹配项的方法。接受一个参数 item。必须返回 html。

三、HTML 标记:

添加 data-provide="typeahead" 来获得自动完成。可以使用 data-source="数组" 来提供自动完成的项。也可以在 Options 中提供。

<input type="text" data-provide="typeahead" />

# Collapse(折叠)

一、如何使用:

$(".collapse").collapse();

演示:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

二、Options 对象

Typeahead 只有唯一的方法:.typeahead(Options)。传入的 Options 对象有以下属性/方法:

Name type default description
parent selector false 对于指定同一个父节点的多个折叠标签,当其中一个显示,则其他的都会关闭。
toggle boolean true 交替显示/隐藏

三、HTML 标记:

在触发点上添加 data-toggle="collapse"data-target 将会自动添加折叠控制。data-target 接受一个 CSS selector(jQuery),指向要折叠的内容,记得在所指向的标签添加 class="collapse"。如果想让折叠的内容默认打开,可以添加额外的 class in。可以通过设置 data-parent="#selector" 来指定所属组,详见 Options 中的 parent

<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
 
<div id="demo" class="collapse in"> … </div>

四、方法:.collapse(options)

可以用于激活一个可折叠元素。接受传入一个 Object:

$('#myCollapsible').collapse({
    toggle: false
})
Note: Options 也可以是一个字符串
参数 描述
toggle 交替显示/隐藏一个元素
show 显示一个折叠元素
hide 隐藏一个折叠元素

四、支持事件:

$('#myCollapsible').on('hidden', function () {
// do something…
})
Event 描述
show 折叠被打开的时候同时触发 show 事件
shown 折叠已经完全打开,触发此事件
hide 折腾被关闭时触发此事件
hidden 折腾已经完全关闭,触发此事件