7.21 杭州源创会火热报名中,一起来看看移动开发如何紧跟浪潮?
Watch Star Fork

xknaan / B-JUIJavaScriptApache-2.0

tabs.html 5.85 KB · 1 Lines
一键复制 编辑 原始数据 标准视图 历史
1 <div class="bjui-pageContent">
2 <form action="ajaxDone1.html" id="j_form_form" class="pageForm" data-toggle="validate">
3 <div style="margin:15px auto 0; width:800px;">
4 <fieldset>
5 <legend>选项卡</legend>
6 <!-- Tabs -->
7 <ul class="nav nav-tabs" role="tablist">
8 <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
9 <li><a href="form-input.html" role="tab" data-toggle="ajaxtab" data-target="#profile" data-reload="false">ajax加载</a></li>
10 <li><a href="#messages" role="tab" data-toggle="tab">固定表头表格</a></li>
11 <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
12 </ul>
13 <!-- Tab panes -->
14 <div class="tab-content">
15 <div class="tab-pane fade active in" id="home"><p>选项卡的a标签上添加[data-toggle="ajaxtab"]属性可以实现ajax加载内容。</p><p>[data-reload]属性可以定义点击该选项卡时是否每次都需要重新加载。</p></div>
16 <div class="tab-pane fade" id="profile"><!-- Ajax加载 --></div>
17 <div class="tab-pane fade" id="messages">
18 <table class="table table-bordered table-hover table-striped table-condensed" data-toggle="tablefixed" data-height="150">
19 <thead>
20 <tr>
21 <th rowspan="2" data-order-field="operation">ID</th>
22 <th rowspan="2" data-order-field="name">姓名</th>
23 <th rowspan="2" data-order-field="sex">性别</th>
24 <th colspan="2" align="center">出生信息</th>
25 </tr>
26 <tr>
27 <th data-order-field="birthday">出生日期</th>
28 <th data-order-field="birthplace">出生地</th>
29 </tr>
30 </thead>
31 <tbody>
32 <tr>
33 <td>1</td>
34 <td>一一</td>
35 <td></td>
36 <td>2000-01-01</td>
37 <td>CN</td>
38 </tr>
39 <tr>
40 <td>2</td>
41 <td>二二</td>
42 <td></td>
43 <td>1999-01-01</td>
44 <td>JP</td>
45 </tr>
46 <tr>
47 <td>3</td>
48 <td>三三</td>
49 <td></td>
50 <td>2000-01-01</td>
51 <td>CN</td>
52 </tr>
53 <tr>
54 <td>4</td>
55 <td>四四</td>
56 <td></td>
57 <td>2005-01-01</td>
58 <td>US</td>
59 </tr>
60 <tr>
61 <td>5</td>
62 <td>五五</td>
63 <td></td>
64 <td>2000-01-01</td>
65 <td>KR</td>
66 </tr>
67 <tr>
68 <td>6</td>
69 <td>六六</td>
70 <td></td>
71 <td>2000-01-01</td>
72 <td>CN</td>
73 </tr>
74 <tr>
75 <td>7</td>
76 <td>七七</td>
77 <td></td>
78 <td>1999-01-01</td>
79 <td>JP</td>
80 </tr>
81 <tr>
82 <td>8</td>
83 <td>八八</td>
84 <td></td>
85 <td>2000-01-01</td>
86 <td>CN</td>
87 </tr>
88 <tr>
89 <td>9</td>
90 <td>九九</td>
91 <td></td>
92 <td>2005-01-01</td>
93 <td>US</td>
94 </tr>
95 <tr>
96 <td>10</td>
97 <td>十十</td>
98 <td></td>
99 <td>2000-01-01</td>
100 <td>KR</td>
101 </tr>
102 </tbody>
103 </table>
xknaan   Create!

704d7526d 2014-10-31

104 </div>
105 <div class="tab-pane fade" id="settings">No4. Settings</div>
106 </div>
107 </fieldset>
xknaan   Create!

704d7526d 2014-10-31

108 </div>
110 </div>
111 <div class="bjui-pageFooter">
112 <ul>
113 <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
114 </ul>
xknaan   Create!

704d7526d 2014-10-31

115 </div>
11_float_left_people 11_float_left_close