forked from cocoo/easyui-bootstrap
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlinkbutton.html
142 lines (129 loc) · 8.31 KB
/
linkbutton.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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>linkbutton</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>LinkButton</h3>
<p>Override defaults with $.fn.linkbutton.defaults.</p>
<p>
The linkbutton is used to create a hyperlink button. It is a representation of a normal <a> tag.
It can display both an icon and text, or only the icon or text.
The button width can dynamic and shrink/expand to fit its text labels.
</p>
<img src="images/linkbutton.png">
<h4>Usage Example</h4>
<h5>Create linkbutton</h5>
<p>
Create a linkbutton from markup is more easily.
</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">id</span><span>=</span><span class="attribute-value">"btn"</span><span> </span><span class="attribute">href</span><span>=</span><span class="attribute-value">"#"</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-linkbutton"</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"iconCls:'icon-search'"</span><span class="tag">></span><span>easyui</span><span class="tag"></</span><span class="tag-name">a</span><span class="tag">></span><span> </span></span></li></ol></div><textarea class="html" name="code-linkbutton" style="display: none;"> <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
</textarea>
<p>
Create a linkbutton programmatically is also allowed.
</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span><a id=</span><span class="string">"btn"</span><span> href=</span><span class="string">"#"</span><span>>easyui</a> </span></span></li><li class=""><span>$(<span class="string">'#btn'</span><span>).linkbutton({ </span></span></li><li class="alt"><span> iconCls: <span class="string">'icon-search'</span><span> </span></span></li><li class=""><span>}); </span></li></ol></div><textarea class="js" name="code-linkbutton" style="display: none;"> <a id="btn" href="#">easyui</a>
$('#btn').linkbutton({
iconCls: 'icon-search'
});
</textarea>
<br>
<h5>Process clicking on linkbutton.</h5>
<p>Clicking on linkbutton will send the user to other page.</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">"otherpage.php"</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-linkbutton"</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"iconCls:'icon-search'"</span><span class="tag">></span><span>easyui</span><span class="tag"></</span><span class="tag-name">a</span><span class="tag">></span><span> </span></span></li></ol></div><textarea class="html" name="code-linkbutton" style="display: none;"> <a href="otherpage.php" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
</textarea>
<p>The example below will alert a message.</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">"#"</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-linkbutton"</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"iconCls:'icon-search'"</span><span> </span></span></li><li class=""><span> <span class="attribute">onclick</span><span>=</span><span class="attribute-value">"javascript:alert('easyui')"</span><span class="tag">></span><span>easyui</span><span class="tag"></</span><span class="tag-name">a</span><span class="tag">></span><span> </span></span></li></ol></div><textarea class="html" name="code-linkbutton" style="display: none;"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'"
onclick="javascript:alert('easyui')">easyui</a>
</textarea>
<p>Bind click handler using jQuery.</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">id</span><span>=</span><span class="attribute-value">"btn"</span><span> </span><span class="attribute">href</span><span>=</span><span class="attribute-value">"#"</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-linkbutton"</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"iconCls:'icon-search'"</span><span class="tag">></span><span>easyui</span><span class="tag"></</span><span class="tag-name">a</span><span class="tag">></span><span> </span></span></li></ol></div><textarea class="html" name="code-linkbutton" style="display: none;"> <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
</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="keyword">function</span><span>(){ </span></span></li><li class=""><span> $(<span class="string">'#btn'</span><span>).bind(</span><span class="string">'click'</span><span>, </span><span class="keyword">function</span><span>(){ </span></span></li><li class="alt"><span> alert(<span class="string">'easyui'</span><span>); </span></span></li><li class=""><span> }); </span></li><li class="alt"><span>}); </span></li></ol></div><textarea class="js" name="code-linkbutton" style="display: none;">$(function(){
$('#btn').bind('click', function(){
alert('easyui');
});
});
</textarea>
<br>
<h4>Properties</h4>
<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>id</td>
<td>string</td>
<td>The id attribute of this component.</td>
<td>null</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>True to disable the button</td>
<td>false</td>
</tr>
<tr>
<td>plain</td>
<td>boolean</td>
<td>True to show a plain effect.</td>
<td>false</td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The button text.</td>
<td>''</td>
</tr>
<tr>
<td>iconCls</td>
<td>string</td>
<td>A CSS class to display a 16x16 icon on left.</td>
<td>null</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 options property.</td>
</tr>
<tr>
<td>disable</td>
<td>none</td>
<td>
Disable the button.
<p>Code example:</p>
<pre>$('#btn').linkbutton('disable');
</pre>
</td>
</tr>
<tr>
<td>enable</td>
<td>none</td>
<td>
Enable the button.
<p>Code example:</p>
<pre>$('#btn').linkbutton('enable');
</pre>
</td>
</tr>
</tbody></table>
</div>
</body>
</html>