我们的 Modal 插件是传统 modal js 插件的超薄版,特别注意仅包含我们在 twitter 上需要的基本功能。
下载
- $ ('#my-modal' )。模态(选项)
姓名 | 类型 | 默认 | 描述 |
---|---|---|---|
背景 | 布尔值,字符串 | 错误的 | 包括一个模态背景元素。"static" 如果您不希望在单击背景时关闭模式,请将背景设置为。 |
键盘 | 布尔值 | 错误的 | 按下退出键时关闭模态 |
节目 | 布尔值 | 错误的 | 在类初始化时打开模式 |
您可以轻松地在页面上激活模式,而无需编写一行 javascript。只需给一个元素一个data-controls-modal
对应于模态元素 id 的属性,当单击时,它将启动您的模态。要添加模式选项,只需将它们也包含为数据属性即可。
- <a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" >启动模态</a>
注意如果您希望您的模态动画进出,只需.fade
向您的元素添加一个类.modal
(请参阅演示以查看此操作)。
将您的内容激活为模式。接受一个可选选项object
。
- $ ('#my-modal' )。模态({
- 键盘:真
- })
手动切换模式。
- $ ('#my-modal' )。模态('切换' )
手动打开一个模态。
- $ ('#my-modal' )。模态(“显示” )
手动隐藏模态。
- $ ('#my-modal' )。模态(“隐藏” )
返回一个元素模式类实例。
- $ ('#my-modal' )。模态(真)
注意或者,这可以用 检索$().data('modal')
。
Bootstrap 的模态类公开了一些用于连接模态功能的事件。
事件 | 描述 |
---|---|
节目 | show 调用实例方法时立即触发此事件。 |
显示 | 当模式对用户可见时触发此事件(将等待 css 转换完成)。 |
隐藏 | hide 调用实例方法时立即触发此事件。 |
隐 | 当模式对用户完成隐藏时触发此事件(将等待 css 转换完成)。 |
- $ ('#my-modal' )。绑定('隐藏' ,函数(){
- // 做一点事 ...
- })
此插件用于向引导顶部栏或选项卡式导航添加下拉交互。
下载
- $ ('#topbar' )。下拉()
要快速向任何导航元素添加下拉功能,请使用该data-dropdown
属性。任何有效的引导下拉菜单都将自动激活。
- <ul类= “标签” >
- <li class = "active" ><a href = "#" > Home </a></li>
- <li class = "dropdown" data-dropdown = "dropdown" >
- <a href = "#" class = "dropdown-toggle" >下拉</a>
- <ul class = "下拉菜单" >
- <li><a href = "#" >二级链接</a></li>
- <li><a href = "#" >这里有别的东西</a></li>
- <li class = "分隔符" ></li>
- <li><a href = "#" >另一个链接</a></li>
- </ul>
- </li>
- </ul>
注意如果您的 ui 有多个下拉菜单,请考虑将data-dropdown
属性添加到更重要的容器元素中,例如.tabs
or .topbar
。
用于激活给定顶部栏或选项卡式导航的菜单的编程 api。
此插件用于将滚动间谍(自动更新导航)交互添加到引导顶部栏。
下载
- $ ('#topbar' )。滚动间谍()
要轻松地将 scrollspy 行为添加到您的导航,只需将data-scrollspy
属性添加到.topbar
.
- <div class = "topbar" data-scrollspy = "scrollspy" > ... </div>
自动通过用户滚动位置激活导航按钮。
- $ ( 'body > .topbar' )。滚动间谍()
注意Topbar 锚标记必须具有可解析的 id 目标。例如, a<a href="#home">home</a>
必须对应于 dom 中的某些东西 like <div id="home"></div>
。
scrollspy 缓存导航按钮和部分坐标以提高性能。如果您需要更新此缓存(如果您有动态内容),只需调用此刷新方法。如果你使用 data 属性来定义你的 scrollspy,只需在 body 上调用 refresh。
- $ (“身体” )。scrollSpy ( '刷新' )
签出此页面上的顶部栏导航。
该插件添加了快速、动态的选项卡和药丸功能。
下载
- $ ('.tabs' )。选项卡()
您可以通过简单地给它们一个data-tabs
或data-pills
属性来激活选项卡或药丸导航,而无需编写任何 javascript。
- <ul class = "tabs" data-tabs = "tabs" > ... </ul>
激活给定容器的选项卡和药丸功能。选项卡链接应引用文档中的 id。
- <ul类= “标签” >
- <li class = "active" ><a href = "#home" > Home </a></li>
- <li><a href = "#profile" >个人资料</a></li>
- <li><a href = "#messages" >消息</a></li>
- <li><a href = "#settings" >设置</a></li>
- </ul>
- <div class = "药丸内容" >
- <div class = "active" id = "home" > ... </div>
- <div id = "个人资料" > ... </div>
- <div id = "消息" > ... </div>
- <div id = "设置" > ... </div>
- </div>
- <脚本>
- $ (函数() {
- $ ('.tabs' )。选项卡()
- })
- </脚本>
事件 | 描述 |
---|---|
改变 | 此事件在选项卡更改时触发。使用event.target 和event.relatedTarget 分别定位活动选项卡和前一个活动选项卡。 |
- $ ('#.tabs' )。绑定('改变' ,函数(e ){
- e . 目标// 激活的选项卡
- e . relatedTarget // 上一个标签
- })
你可能没听说过奥斯汀牛仔短裤。Nesciunt tofu stumptown aliqua,复古合成大师净化。小胡子陈词滥调,威廉斯堡卡尔斯素食主义者 helvetica。Reprehenderit 屠夫复古 keffiyeh 捕梦网合成器。Cosby 毛衣 eu banh mi, qui irure terry richardson ex squid。Aliquip placeat 鼠尾草 iphone。Seitan aliquip quis 开衫美国服装,屠夫 voluptate nisi qui。
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.
Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
基于 Jason Frame 编写的优秀的 jQuery.tipsy 插件;twipsy 是一个更新版本,它不依赖图像,使用 css3 进行动画,使用 data-attributes 存储标题!
下载
- $ ('#example' )。twipsy (选项)
姓名 | 类型 | 默认 | 描述 |
---|---|---|---|
动画 | 布尔值 | 真的 | 对工具提示应用 css 淡入淡出过渡 |
延迟输入 | 数字 | 0 | 显示工具提示前的延迟(毫秒) |
延迟输出 | 数字 | 0 | 隐藏工具提示前的延迟(毫秒) |
倒退 | 细绳 | '' | 不存在工具提示标题时使用的文本 |
放置 | 细绳 | '以上' | 如何定位工具提示 - 上面 | 下面 | 离开 | 正确的 |
html | 布尔值 | 错误的 | 允许在工具提示中包含 html 内容 |
居住 | 布尔值 | 错误的 | 使用事件委托而不是单个事件处理程序 |
抵消 | 数字 | 0 | 工具提示与目标元素的像素偏移 |
标题 | 字符串,函数 | '标题' | 检索标题文本的属性或方法 |
扳机 | 细绳 | '徘徊' | 如何触发工具提示 - 悬停 | 焦点 | 手动的 |
模板 | 细绳 | [默认标记] | 用于渲染 twipsy 的 html 模板。 |
注意个别 twipsy 实例选项也可以通过使用数据属性来指定。
- <a href = "#" data-placement = "below" rel = 'twipsy' title = '一些标题文本' > text </a>
将 twipsy 处理程序附加到元素集合。
揭示了一个元素 twipsy。
- $ ('#element' )。twipsy ('显示' )
隐藏元素 twipsy。
- $ ('#element' )。twipsy ('隐藏' )
返回一个元素 twipsy 类实例。
- $ ('#element' )。twipsy (真)
注意或者,这可以用 检索$().data('twipsy')
。
紧身裤下一级 keffiyeh你可能没听说过。照相亭胡须生牛仔布凸版素食信使包 stumptown。从农场到餐桌的 seitan,mcsweeney 的 fixie 可持续藜麦 8 位美国服装采用特里·理查森乙烯基青年布。Beard stumptown,开襟羊毛衫 banh mi lomo 雷猫。Tofu biodiesel williamsburg marfa, 4 loko mcsweeney's cleanse vegan chambray。一个真正具有讽刺意味的工匠,无论 keytar,场景农场到餐桌银行奥斯汀推特处理freegan cred raw denim single-origin 咖啡病毒。
popover 插件提供了一个简单的界面,用于将弹出框添加到您的应用程序中。它扩展了bootstrap-twipsy.js插件,所以在你的项目中包含弹出框时一定要获取该文件!
注意您必须在 bootstrap-popover.js之前包含 bootstrap-twipsy.js 文件。
下载
- $ ('#example' )。弹出框(选项)
姓名 | 类型 | 默认 | 描述 |
---|---|---|---|
动画 | 布尔值 | 真的 | 对工具提示应用 css 淡入淡出过渡 |
延迟输入 | 数字 | 0 | 显示工具提示前的延迟(毫秒) |
延迟输出 | 数字 | 0 | 隐藏工具提示前的延迟(毫秒) |
倒退 | 细绳 | '' | 不存在工具提示标题时使用的文本 |
放置 | 细绳 | '正确的' | 如何定位工具提示 - 上面 | 下面 | 离开 | 正确的 |
html | 布尔值 | 错误的 | 允许在工具提示中包含 html 内容 |
居住 | 布尔值 | 错误的 | 使用事件委托而不是单个事件处理程序 |
抵消 | 数字 | 0 | 工具提示与目标元素的像素偏移 |
标题 | 字符串,函数 | '标题' | 检索标题文本的属性或方法 |
内容 | 字符串,函数 | '数据内容' | 用于检索内容文本的字符串或方法。如果没有提供,内容将来自 data-content 属性。 |
扳机 | 细绳 | '徘徊' | 如何触发工具提示 - 悬停 | 焦点 | 手动的 |
模板 | 细绳 | [默认标记] | 用于呈现弹出框的 html 模板。 |
注意可以通过使用数据属性来指定单独的弹出框实例选项。
- <a data-placement = "below" href = "#" class = "btn danger" rel = "popover" > text </a>
初始化元素集合的弹出框。
显示元素弹出框。
- $ ('#element' )。弹出窗口(“显示” )
隐藏元素弹出框。
- $ ('#element' )。弹出框('隐藏' )
警报插件是一个超小类,用于向警报添加关闭功能。
下载
- $ ( ".alert-message" )。警报()
只需在data-alert
您的警报消息中添加一个属性,即可自动为它们提供关闭功能。
姓名 | 类型 | 默认 | 描述 |
---|---|---|---|
选择器 | 细绳 | '。关' | 关闭警报的目标选择器。 |
使用关闭功能包装所有警报。要让警报在关闭时显示动画,请确保它们已经应用了.fade
and.in
类。
关闭警报。
- $ ( ".alert-message" )。警报('关闭' )