forked from cocoo/easyui-bootstrap
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsplitbutton.html
124 lines (114 loc) · 7.46 KB
/
splitbutton.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>splitbutton</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css" />
<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
</head>
<body style="text-align:left">
<div style="padding:10px">
<h3>SplitButton</h3>
<p>Extend from $.fn.linkbutton.defaults. Override defaults with $.fn.splitbutton.defaults.</p>
<p>
Simalar to the menubutton, the splitbutton is also associated with linkbutton and menu.
The difference between menubutton and splitbutton is that the splitbutton is split into two parts.
When moving mouse over the splitbutton, a 'split' line will display.
The menu only display when moving mouse over the right part of splitbutton.
</p>
<img src="images/splitbutton.png">
<h4>Dependencies</h4>
<ul>
<li>menu</li>
<li>linkbutton</li>
</ul>
<h4>Usage</h4>
<p>Create splitbutton from markup.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag"><</span><span class="tag-name">a</span><span> </span><span class="attribute">href</span><span>=</span><span class="attribute-value">"javascript:void(0)"</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"sb"</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-splitbutton"</span><span> </span></span></li><li class=""><span> <span class="attribute">data-options</span><span>=</span><span class="attribute-value">"menu:'#mm',iconCls:'icon-ok'"</span><span> </span><span class="attribute">onclick</span><span>=</span><span class="attribute-value">"javascript:alert('ok')"</span><span class="tag">></span><span>Ok</span><span class="tag"></</span><span class="tag-name">a</span><span class="tag">></span><span> </span></span></li><li class="alt"><span><span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"mm"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:100px;"</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"iconCls:'icon-ok'"</span><span class="tag">></span><span>Ok</span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class="alt"><span> <span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"iconCls:'icon-cancel'"</span><span class="tag">></span><span>Cancel</span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class=""><span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li></ol></div><textarea class="html" name="code-splitbutton" style="display: none;"> <a href="javascript:void(0)" id="sb" class="easyui-splitbutton"
data-options="menu:'#mm',iconCls:'icon-ok'" onclick="javascript:alert('ok')">Ok</a>
<div id="mm" style="width:100px;">
<div data-options="iconCls:'icon-ok'">Ok</div>
<div data-options="iconCls:'icon-cancel'">Cancel</div>
</div>
</textarea>
<p>Create splitbutton using javascript.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag"><</span><span class="tag-name">a</span><span> </span><span class="attribute">href</span><span>=</span><span class="attribute-value">"javascript:void(0)"</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"sb"</span><span> </span><span class="attribute">onclick</span><span>="javascript:alert('ok')</span><span class="tag">></span><span>Ok</span><span class="tag"></</span><span class="tag-name">a</span><span class="tag">></span><span> </span></span></li><li class=""><span><span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"mm"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:100px;"</span><span class="tag">></span><span> </span></span></li><li class="alt"><span>... </span></li><li class=""><span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li></ol></div><textarea class="html" name="code-splitbutton" style="display: none;"> <a href="javascript:void(0)" id="sb" onclick="javascript:alert('ok')>Ok</a>
<div id="mm" style="width:100px;">
...
</div>
</textarea>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">'#sb'</span><span>).splitbutton({ </span></span></li><li class=""><span> iconCls: <span class="string">'icon-ok'</span><span>, </span></span></li><li class="alt"><span> menu: <span class="string">'#mm'</span><span> </span></span></li><li class=""><span>}); </span></li></ol></div><textarea class="js" name="code-splitbutton" style="display: none;"> $('#sb').splitbutton({
iconCls: 'icon-ok',
menu: '#mm'
});
</textarea>
<br>
<h4>Properties</h4>
<p>The properties extend from linkbutton, below is the added properties for splitbutton.</p>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>
<th><strong>Description</strong></th>
<th><strong>Default</strong></th>
</tr>
<tr>
<td>plain</td>
<td>boolean</td>
<td>True to show plain effect.</td>
<td>true</td>
</tr>
<tr>
<td>menu</td>
<td>string</td>
<td>A selector to create a corresponding menu.</td>
<td>null</td>
</tr>
<tr>
<td>duration</td>
<td>number</td>
<td>Defines duration time in milliseconds to show menu when hovering the button.</td>
<td>100</td>
</tr>
</tbody></table>
<h4>Methods</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameter</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>options</td>
<td>none</td>
<td>Return the options object.</td>
</tr>
<tr>
<td>disable</td>
<td>none</td>
<td>
Disable the splitbutton. Code example:
<pre>$('#sb').splitbutton('disable');
</pre>
</td>
</tr>
<tr>
<td>enable</td>
<td>none</td>
<td>
Enable the splitbutton. Code example:
<pre>$('#sb').splitbutton('enable');
</pre>
</td>
</tr>
<tr>
<td>destroy</td>
<td>none</td>
<td>Destroy the splitbutton.</td>
</tr>
</tbody></table>
</div>
</body>
</html>