~smagoun/whoopsie/whoopsie-lp1017637

<p>In this example, we'll look at a few ways to create buttons using the <code>'button-plugin'</code> module, and use the <code>'cssbutton'</code> module for basic styles.</p>

<p>This example uses 3 different ways of creating plugged node elements. Choose the one you are most comfortable with.</p>

</div>

<button id="myButton">A simple push button</button>

<button id="myEventButton">Toggle 'disabled' state of >></button>

<button id="myDisabledButton">Disabled</button>

YUI().use('button-plugin', 'cssbutton', function(Y){

// A basic push button

Y.one('#myButton').plug(Y.Plugin.Button);

// A disabled button

var disabledButton = Y.one('#myDisabledButton');

disabledButton.plug(Y.Plugin.Button, {

disabled: true

});

disabledButton.on('click', function(){

var label = this.get('label');

alert("My label is '" + label + "'");

});

// An event button, listening for a click

var eventButton = Y.Plugin.Button.createNode({

srcNode:'#myEventButton'

});

eventButton.on('click', function(){

var disabled = disabledButton.get('disabled'),

newLabel = disabled ? 'Not disabled' : 'Disabled';

disabledButton.set('label', newLabel).set('disabled', !disabled);

});

</script>

</div>

<h4 id="source-html">Source: HTML</h4>

<pre class="code prettyprint"><button id="myButton">A simple push button</button>

<button id="myEventButton">Toggle 'disabled' state of >></button>

<button id="myDisabledButton">Disabled</button></pre>

<h4 id="source-javascript">Source: JavaScript</h4>

<pre class="code prettyprint">YUI().use('button-plugin', 'cssbutton', function(Y){

// A basic push button

Y.one('#myButton').plug(Y.Plugin.Button);

// A disabled button

var disabledButton = Y.one('#myDisabledButton');

disabledButton.plug(Y.Plugin.Button, {

disabled: true

});

disabledButton.on('click', function(){

var label = this.get('label');

alert("My label is '" + label + "'");

});

// An event button, listening for a click

var eventButton = Y.Plugin.Button.createNode({

srcNode:'#myEventButton'

});

100

eventButton.on('click', function(){

101

var disabled = disabledButton.get('disabled'),

102

newLabel = disabled ? 'Not disabled' : 'Disabled';

103

104

disabledButton.set('label', newLabel).set('disabled', !disabled);

105

});

106

});</pre>

107

108

</div>

109

</div>

110

</div>

111

112

113

114

115

116

117

<h2 class="no-toc">Table of Contents</h2>

118

</div>

119

120

121

122

<li>

123

<a href="#source-html">Source: HTML</a>

124

</li>

125

<li>

126

<a href="#source-javascript">Source: JavaScript</a>

127

</li>

128

</ul>

129

</div>

130

</div>

131

132

133

134

135

136

<h2 class="no-toc">Examples</h2>

137

</div>

138

139

140

141

142

143

144

<a href="cssbutton.html">Styling elements with cssbutton</a>

145

</li>

146

147

148

149

<li data-description="This example shows a simple, light solution to enhance <button> nodes">

150

<a href="button-plugin.html">Enhancing <button> nodes with button-plugin</a>

151

</li>

152

153

154

155

156

<a href="button.html">Basic button widgets</a>

157

</li>

158

159

160

161

162

<a href="button-group.html">Managing groups of buttons with button-group</a>

163

</li>

164

165

166

</ul>

167

</div>

168

</div>

169

170

171

172

</div>

173

</div>

174

</div>

175

</div>

176

177

178

179

180

</body>

181

</html>

Older »