~ubuntu-branches/ubuntu/precise/whoopsie-daisy/precise-updates

<p>You can create a simple Resize instance by including the <code>resize</code> module or <code>base-resize</code> submodule and using the following code:</p>

<pre class="code prettyprint">YUI().use('resize', function(Y) {

var resize = new Y.Resize({

//Selector of the node to resize

node: '#demo'

});

});</pre>

<h2 id="events">Events</h2>

<p>Resize provides useful events to allow the implementer to control the end-user experience.</p>

<table>

<thead>

<tr>

<th>Event</th>

<th>Preventable</th>

<th>Stoppable</th>

<th>Bubbles</th>

<th>Description</th>

</tr>

</thead>

<tbody>

<tr>

<td><code>resize:start</code></td>

<td>Handles the resize start event. Fired when the user begins dragging a handle.</td>

</tr>

<tr>

<td><code>resize:resize</code></td>

<td>Handles the resize event. Fired with every native <code>mousemove</code> event when the handle is being dragged; this could be as often as once for every pixel of movement.</td>

</tr>

<tr>

100

<td><code>resize:align</code></td>

101

102

103

104

<td>Handles the resize align event.</td>

105

</tr>

106

<tr>

107

<td><code>resize:end</code></td>

108

109

110

111

<td>Handles the resize end event. Fired when the user releases the handle from the drag operation.</td>

112

</tr>

113

<tr>

114

<td><code>resize:mouseUp</code></td>

115

116

117

118

<td>Handles the resize <code>mouseup</code> event. Fired when a <code>mouseup</code> event happens on a handle.</td>

119

</tr>

120

</tbody>

121

</table>

122

123

<h2 id="modules">Module Descriptions</h2>

124

125

<p>Resize for YUI 3 has been broken up into several modules to allow you, as the implementer, to target the specific functionality you want — and omit the functionality you're not using.</p>

126

<table>

127

<thead>

128

<tr>

129

<th>Module Name</th>

130

<th>Description</th>

131

</tr>

132

</thead>

133

<tbody>

134

<tr>

135

<td nowrap="nowrap"><code>resize-base</code></td>

136

<td>This is the base Resize class; use this submodule for your simplest use case, where constraints, ratios, and proxies are not required.</td>

137

</tr>

138

<tr>

139

<td nowrap="nowrap"><code>resize-constrain</code></td>

140

<td>Adds constraining & ratio support.</td>

141

</tr>

142

<tr>

143

<td nowrap="nowrap"><code>resize-proxy</code></td>

144

<td>Adds proxy support, via <code>dd-proxy</code>.</td>

145

</tr>

146

</tbody>

147

</table>

148

149

<h2 id="resize-plugins">Resize Plugin for Widgets</h2>

150

151

<p>Along with the standalone utility, a Resize plugin is available and can be plugged into Y.Node or Y.Widget instances. The plugin can be created by adding <code>resize-plugin</code> in your use statement, and then plugging in <code>Y.Plugin.Resize</code>.</p>

152

153

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

154

var overlay = new Y.Overlay({

155

width: "200px",

156

height: "300px",

157

srcNode: "#overlay",

158

visible: "true",

159

centered: "true"

160

});

161

//Plug in the resizability plugin

162

overlay.plug(Y.Plugin.Resize);

163

overlay.render();

164

});</pre>

165

166

<h3 id="listening-to-events-on-a-widget">Listening to events on a widget</h3>

167

<p>With the resize plugin being plugged into a Y.Widget instance, resize events can be listened to under the <code>resize</code> namespace. The resize plugin will automatically change <code>width</code> and <code>height</code> attributes on the widget (and the <code>x</code> , <code>y</code> attributes if your widget uses <code>Y.WidgetPosition</code>).</p>

168

169

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

170

overlay.plug(Y.Plugin.Resize);

171

overlay.render();

172

173

overlay.resize.on('resize:resize', function(event) {

174

//this function will be called on resize.

175

});

176

});</pre>

177

178

179

</div>

180

</div>

181

182

183

184

185

186

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

187

</div>

188

189

190

191

<li>

192

<a href="#getting-started">Getting Started</a>

193

</li>

194

<li>

195

<a href="#simple">Simple Resize</a>

196

</li>

197

<li>

198

<a href="#events">Events</a>

199

</li>

200

<li>

201

<a href="#modules">Module Descriptions</a>

202

</li>

203

<li>

204

<a href="#resize-plugins">Resize Plugin for Widgets</a>

205

206

<li>

207

<a href="#listening-to-events-on-a-widget">Listening to events on a widget</a>

208

</li>

209

</ul>

210

</li>

211

</ul>

212

</div>

213

</div>

214

215

216

217

218

219

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

220

</div>

221

222

223

224

225

226

227

<a href="simple-resize.html">Simple Resize</a>

228

</li>

229

230

231

232

233

<a href="constrain-resize.html">Constrain a Resize</a>

234

</li>

235

236

237

238

239

<a href="image-resize.html">8-way Image Resize</a>

240

</li>

241

242

243

244

245

<a href="simple-resize-plugin.html">Widget with simple Resize Plugin</a>

246

</li>

247

248

249

250

251

<a href="constrain-resize-plugin.html">Widget with Resize Plugin under constraints</a>

252

</li>

253

254

255

</ul>

256

</div>

257

</div>

258

259

260

261

</div>

262

</div>

263

</div>

264

265

266

267

268

</body>

269

</html>

Older »