Puerh,百姓网 UI 库。旨在建立稳定、简洁、兼容的前端框架。兼容 Mac/Windows 下的 IE6+ / Firefox / Google Chrome 浏览器。 Puerh 的目标是构建一套适合百姓网的前端解决方案。从模块区分上,她包含: Typography、 Grid、 Font Icon(Baicons)、 UI组件 和 JS 组件
第一次使用 Puerh?请看 Getting Start → 如在使用上遇到任何问题,请通过 Github Issues 给我们 提意见 →
data-toggle="tooltip"
,可能通过 data-toggle="tooltip"
来指定 Tooltips 相对于当前元素的位置。<a title="Tooltip on top" href="#" data-toggle="tooltip" data-placement="top"> Tooltip on top </a>
data-toggle="dropdown"
来实例化一个下拉菜单,用 data-target="#TARGET_SELECTOR"
或者 href="#TARGET_SELECTOR"
来指定弹出层。<span class="dropdown"> <a href="#ddmenu" data-toggle="dropdown">下拉菜单</a> <ul id="ddmenu" class="dropdown-menu"> <li><a href="#">item-1</a></li> <li><a href="#">item-2</a></li> <li><a href="#">item-3</a></li> <li><a href="#">item-4</a></li> </ul> </span>
data-toggle="modal"
来指定这个触发点触发的是 Modal,用href="#TARGET_ID"
或 data-target="#TARGET_ID"
来指定这个
modal 指定的显示框。<a href="#myModal" data-toggle="modal">Modal Demo</a> <div id="myModal" class="modal fade hide in"> <h4 class="modal-title">本操作需要您先注册百姓网</h4> <a href="###" data-dismiss="modal" class="close">×</a> <div class="modal-content"> Lorem ipsum dolor sit amet, </div> </div>
CSS 和 JS 分开的,通过 data-toggle="tab"
来指定元素本身是一个 tab 标签。通过 href="#TARGET_ID"
或者data-target="#TARGET_ID"
来指定 tab 显示的内容。
<div class="tab"> <ul class="tab-title clearfix"> <li class="tab-title-item"><a href="#" data-toggle="tab">全部</a></li> <li class="tab-title-item active"><a href="#" data-toggle="tab">个人</a></li> </ul> </div>
通过 js 生成 popover:
$('#example').popover('options')
可以用元素上的 data 属性(data-animation="")或直接传递 JS 对象来配置 popover:
配置项 | 类型 | 默认值 | 说明 |
---|---|---|---|
animation | boolean | true | 是否应用CSS动画效果。 |
html | boolean | false | 在 popover 中填入 html。如果为 false 的话,将会使用 jquery 的 text 方法填充内容。要避免XSS攻击的话最好使用纯文本填充。 |
placement | string | function | 'right' | 弹出的位置:top | bottom | left | right |
selector | string | false | 提供此项的话,弹出层将置于指定元素上。 |
trigger | string | 'click' | 触发事件:click | hover | focus | manual |
title | string | function | '' | 弹出层标题。 |
content | string | function | '' | 弹出层内容。 |
delay | number | object | 0 | 弹出层显示和隐藏的延时(不影响 manual 触发)。对象的话,格式为 { show: 500, hide: 100} |
container | string | false | false | 指定弹出层元素从属的父元素。如 container: 'body' |