代码拉取完成，页面将自动刷新
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS组件 - SimpleeUI - 上海同道前端UI库</title>
<script src="js/prettify.js"></script>
<link rel="stylesheet" href="css/simplee-debug.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body onload='prettyPrint()'>
<div class="header">
<div class="container">
<div class="grid grid-4 first logo"><a href="index.html">SimpleeUI</a></div>
<div class="grid grid-11">
<ul class="menu inline">
<li><a href="index.html">首页</a></li>
<li><a href="css.html">CSS组件</a></li>
<li><a href="javascript.html">JS插件</a></li>
<li><a href="standard.html">使用规范</a></li>
</ul>
</div>
<div class="grid grid-5 last"><a href="mailto:gaom19900925@gmail.com">@_Simplee_</a></div>
</div>
</div>
<div class="content clearfix">
<div class="container">
<div class="grid grid-20 base">
<h3>JS组件</h3>
<table class="m-table demo">
<tr>
<td><a href="#modal">Modals(模态弹窗)</a></td>
<td><a href="#dorpdown">Dorpdowns(下拉菜单)</a></td>
<td><a href="#tabs">Tabs(标签切换)</a></td>
<td><a href="#tooltips">Tooltips(工具提示)</a></td>
</tr>
<tr>
<td><a href="#alert">Alert(警告框)</a></td>
<td><a href="#accordion">Accordion(手风琴)</a></td>
<td><a href="#slide">Slide(幻灯轮播)</a></td>
<td><a href="#backtotop">BackToTop(返回顶部)</a></td>
</tr>
</table>
</div>
<div class="workplace grid grid-20">
<h4 id="modal">Modals(模态弹窗)</h4>
<div class="document-box">
<h4>一、演示</h4>
<button class="u-btn u-btn-error" type="button" data-toggle="modal" data-target="#myModal">查看DEMO</button>
<div class="modal fade hide" id="myModal">
<h4 class="modal-title">标题栏</h4>
<a class="close" data-dismiss="modal" href="###">×</a>
<div class="modal-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<h4>二、调用方法</h4>
<h4>通过JavaScript</h4>
<pre class="prettyprint">$('#myModal').modal(options)</pre>
<h4>通过data属性</h4>
<p class="text-error">无需编写JavaScript代码即可生成一个对话框。在一个主控元素，例如按钮，上设置<code>data-toggle="modal"</code>，然后再设置<code>data-target="#弹窗ID"</code> 或<code>href="#弹窗ID"</code> 用以指向某个将要被启动的对话框。</p>
<pre class="prettyprint"><button type="button" data-toggle="modal" data-target="#myModal">查看DEMO</button>
<a href="#myModal" data-toggle="modal">查看DEMO</a></pre>
<h4>三、可选项</h4>
<p class="text-error">通过JavaScript代码或data属性传递以下参数。针对data属性，可将选项名称放在<code>data-</code>字符串后，例如：<code>data-backdrop=""</code></p>
<table class="m-table m-table-bordered m-table-striped">
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>backdrop</td>
<td>boolean</td>
<td>true</td>
<td>当 options 中设置<code>backdrop: 'static' </code>时，点击背景的时候，不会关掉弹出框。设置为 false 的时候是不显示背景，不要混淆。</td>
</tr>
<tr>
<td>keyboard</td>
<td>boolean</td>
<td>true</td>
<td>是否允许用 Esc 键来关掉弹出框。</td>
</tr>
<tr>
<td>show</td>
<td>boolean</td>
<td>true</td>
<td>初始化时显示弹窗。</td>
</tr>
</tbody>
</table>
<h4>四、可监听事件</h4>
<table class="m-table m-table-bordered m-table-striped">
<thead>
<tr>
<th>事件</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>show</td>
<td>使用<code>show</code>显示弹出层的时候，事件被触发。</td>
</tr>
<tr>
<td>shown</td>
<td>当弹出层可见的时候，事件被触发。不一定是由<code>show</code>触发，可能是<code>toggle</code></td>
</tr>
<tr>
<td>hide</td>
<td>使用<code>hide</code>隐藏弹出层的时候，事件被触发。</td>
</tr>
<tr>
<td>hidden</td>
<td>当弹出层可见的时候，事件被触发。不一定是由<code>hide</code>触发，可能是<code>toggle</code></td>
</tr>
</tbody>
</table>
<pre class="prettyprint">
// 事件示例代码
$('#myModal').on('hidden', function () {
// Do Something…
})</pre>
</div>
<h4 id="dorpdown">Dorpdowns(下拉菜单)</h4>
<div class="document-box">
<h4>一、演示</h4>
<div class="dropdown">
<button type="button" data-toggle="dropdown" class="u-btn u-btn-error" data-target="myDropdown">新闻中心</button>
<ul class="dropdown-menu">
<li><a href="#">行业资讯</a></li>
<li><a href="#">律所动态</a></li>
<li class="divider"></li>
<li><a href="#">通知公告</a></li>
</ul>
</div>
<h4>二、调用方法</h4>
<h4>通过Javascript</h4>
<pre class="prettyprint">$('.dropdown-toggle').dropdown()</pre>
<h4>通过data属性</h4>
<p class="text-error">在触发下拉框需要添加<code>data-target="#
下拉框ID"</code>或<code>href="下拉框ID"</code>来指定下拉框。如：</p>
<pre class="prettyprint">
<div class="dropdown">
<button type="button" data-toggle="dropdown" class="button button-error" data-target="myDropdown">新闻中心</button>
<ul class="dropdown-menu">
<li><a href="#">行业资讯</a></li>
<li><a href="#">律所动态</a></li>
<li><a href="#">通知公告</a></li>
</ul>
</div></pre>
</div>
<h4 id="tabs">Tabs(标签切换)</h4>
<div class="document-box">
<h4>一、演示</h4>
<div class="m-tab">
<ul class="m-tab-title clearfix">
<li class="m-tab-title-item first active"><a href="#item1" data-toggle="tab">标签一</a></li>
<li class="m-tab-title-item"><a href="#item2" data-toggle="tab">标签二</a></li>
<li class="m-tab-title-item"><a href="#item3" data-toggle="tab">标签三</a></li>
<li class="m-tab-title-item"><a href="#item3" data-toggle="tab">标签四</a></li>
</ul>
<div class="m-tab-content clearfix">
<div class="m-tab-content-pane active" id="item1">
标签一内容
</div>
<div class="m-tab-content-pane" id="item2">
标签二内容
</div>
<div class="m-tab-content-pane" id="item3">
标签三内容
</div>
<div class="m-tab-content-pane" id="item4">
标标签四内容
</div>
</div>
</div>
<h4>二、调用方法</h4>
<h4>通过Javascript</h4>
<pre class="prettyprint">$('#myTab').tab('show')</pre>
<h4>通过data属性</h4>
<p class="text-error">在触发点添加<code>data-toggle="tab"</code>自动触发 Tab，添加<code>data-target="#对应Tab内容的ID"</code>或者<code>href="#对应Tab内容的ID"</code>来指定对应的 Tab 内容显示。</p>
<pre class="prettyprint">
<div class="tab">
<ul class="tab-title clearfix">
<li class="tab-title-item first active"><a href="#item1" data-toggle="tab">标签一</a></li>
<li class="tab-title-item"><a href="#item2" data-toggle="tab">标签二</a></li>
...
</ul>
<div class="tab-content clearfix">
<div class="tab-content-pane active" id="item1">
标签一内容
</div>
<div class="tab-content-pane" id="item2">
标签二内容
</div>
...
</div>
</div></pre>
<h4>三、可监听事件</h4>
<table class="m-table m-table-bordered m-table-striped">
<thead>
<tr>
<th>事件</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>show</td>
<td>显示一个新的 tab 前触发此事件。可以用<code>event.target</code>和<code>event.relatedTarget</code>来追踪激活的 tab 和被关闭的 tab (如果有的话) 。</td>
</tr>
<tr>
<td>shown</td>
<td>显示一个新的 tab 后触发此事件。可以用<code>event.target</code>和<code>event.relatedTarget</code>来追踪激活的 tab 和被关闭的 tab (如果有的话) 。</td>
</tr>
</tbody>
</table>
<pre class="prettyprint">
// 事件示例代码
$('a[data-toggle="tab"]').on('shown', function (e) {
e.target // 被激活的 tab
e.relatedTarget // 上一个激活（已经关闭）的 tab
})</pre>
</div>
<h4 id="tooltips">Tooltips(工具提示)</h4>
<div class="document-box">
<h4>一、演示</h4>
<ul class="unstyled inline tooltip-demo">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltips Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltips Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltips Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltips Right</a></li>
</ul>
<h4>二、调用方法</h4>
<p class="text-error">该插件暂时只支持IE8+浏览器！出于性能方面原因 Tooltip 插件使用时需要进行初始化操作，方法如下：</p>
<pre class="prettyprint">$("#ID").tooltip(options);</pre>
</div>
<h4 id="alert">Alert(警告框)</h4>
<div class="document-box">
<h4>一、演示</h4>
<div class="m-alert fade in">
<h4>注意：</h4>请保护好您的帐号及密码！为了您的帐户安全，请定期修改密码！如果出现无法登陆或者其他异常情况，请第一时间联系我们！
<a href="#" data-dismiss="alert" class="close">×</a>
</div>
<h4>二、调用方法</h4>
<h4>通过Javascript</h4>
<pre class="prettyprint">$(".alert").alert()</pre>
<h4>通过data属性</h4>
<pre class="prettyprint"><a class="close" data-dismiss="alert" href="#">×</a></pre>
<h4>三、可监听事件</h4>
<table class="m-table m-table-bordered m-table-striped">
<thead>
<tr>
<th>事件</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>close</td>
<td>在框体被关闭的瞬间触发。</td>
</tr>
<tr>
<td>closed</td>
<td>在框体关闭，CSS 动画完成后触发。</td>
</tr>
</tbody>
</table>
<pre class="prettyprint">
// 事件示例代码
$('#my-alert').bind('closed', function () {
// do something…
})</pre>
</div>
<h4 id="accordion">Accordion(手风琴)</h4>
<div class="document-box">
<h4>一、演示</h4>
<div class="m-accordion" id="accordion2">
<div class="m-accordion-group">
<div class="m-accordion-heading">
<a class="m-accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="m-accordion-body collapse in">
<div class="m-accordion-inner">
<p>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.</p>
</div>
</div>
</div>
<div class="m-accordion-group">
<div class="m-accordion-heading">
<a class="m-accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="m-accordion-body collapse">
<div class="m-accordion-inner">
<p>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.</p>
</div>
</div>
</div>
<div class="m-accordion-group">
<div class="m-accordion-heading">
<a class="m-accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree" class="m-accordion-body collapse">
<div class="m-accordion-inner">
<p>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.</p>
</div>
</div>
</div>
</div>
<h4>二、代码结构</h4>
<pre class="prettyprint">
<div class="m-accordion" id="accordion2">
<!-- 手风琴栏目一开始 -->
<div class="m-accordion-group">
<!-- 手风琴栏目标题 -->
<div class="m-accordion-heading">
<a class="m-accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<!-- 手风琴栏目内容 -->
<div id="collapseOne" class="m-accordion-body collapse in">
<div class="m-accordion-inner">
...
</div>
</div>
</div>
<!-- /手风琴栏目一结束 -->
<div class="m-accordion-group">
<div class="m-accordion-heading">
<a class="m-accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #1
</a>
</div>
<div id="collapseTwo" class="m-accordion-body collapse in">
<div class="m-accordion-inner">
...
</div>
</div>
</div>
</div></pre>
<h4>也可以通过按钮来调用</h4>
<pre class="prettyprint">
<button type="button" class="u-btn u-btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
<div id="demo" class="collapse in"> … </div></pre>
<h4>三、调用方法</h4>
<h4>通过data属性</h4>
<p class="text-error">在触发点添加<code>data-toggle="collapse"</code>来触发Accordion，添加<code>data-target="#对应的Accordion内容ID"</code>或<code>href="#对应的Accordion内容ID"</code>来指定对应的Accordion内容显示。可以通过添加class属性<code>in</code>来控制展开栏目内容默认展开。</p>
<p class="text-info">在触发点添加<code>data-parent="#该组手风琴的ID"</code>可以对同一个父节点的多个折叠标签，当其中一个显示，则其他的都会关闭。</p>
<h4>通过JavaScript</h4>
<pre class="prettyprint">$(".collapse").collapse()</pre>
<h4>四、可选项</h4>
<table class="m-table m-table-bordered m-table-striped">
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>parent</td>
<td>selector</td>
<td>false</td>
<td>对于指定同一个父节点的多个折叠标签，当其中一个显示，则其他的都会关闭。</td>
</tr>
<tr>
<td>toggle</td>
<td>boolean</td>
<td>true</td>
<td>交替显示/隐藏</td>
</tr>
</tbody>
</table>
<h4>五、方法<code>.collapse(options)</code></h4>
<p class="text-error">可以用于激活一个可折叠元素。接受传入一个 Object:</p>
<pre class="prettyprint">
$('#myCollapsible').collapse({
toggle: false;
})</pre>
<table class="m-table m-table-bordered m-table-striped">
<thead>
<tr>
<th>参数</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>toggle</td>
<td>交替显示/隐藏一个元素</td>
</tr>
<tr>
<td>show</td>
<td>显示一个折叠元素</td>
</tr>
<tr>
<td>hide</td>
<td>隐藏一个折叠元素</td>
</tr>
</tbody>
</table>
<h4>六、可监听时间</h4>
<table class="m-table m-table-bordered m-table-striped">
<thead>
<tr>
<th>事件</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>show</td>
<td>展开事件开始的同时触发<code>show</code>事件</td>
</tr>
<tr>
<td>shown</td>
<td>展开事件完成后，触发此事件</td>
</tr>
<tr>
<td>hide</td>
<td>关闭事件开始时触发此事件</td>
</tr>
<tr>
<td>hidden</td>
<td>关闭事件完成后，触发此事件</td>
</tr>
</tbody>
</table>
<pre class="prettyprint">
$('#myCollapsible').on('hidden', function () {
// do something…
})</pre>
</div>
<!-- END -->
</div>
</div>
</div>
<div class="footer">
HOMOLO.COM | © 2013 Built By SimpleeUI. All Right Reserved
</div>
<script src="js/jquery.js"></script>
<script src="js/plugins.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$('.tooltip-demo').tooltip({
selector: "a[data-toggle=tooltip]"
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
