Skip to content

Commit 3376fce

Browse files
committed
FormResetMixin: Initial API documentation for new mixin
1 parent 6ffbb44 commit 3376fce

File tree

2 files changed

+80
-0
lines changed

2 files changed

+80
-0
lines changed

entries/checkboxradio.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
<h3>Dependencies</h3>
2929
<ul>
3030
<li><a href="/labels/">.labels()</a></li>
31+
<li><a href="/form-reset-mixin/">Form Reset Mixin</a></li>
3132
<li><a href="/jQuery.widget/">Widget Factory</a></li>
3233
</ul>
3334
</longdesc>

entries/form-reset-mixin.xml

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<?xml version="1.0"?>
2+
<entries>
3+
<entry type="widget" name="jQuery.ui.formResetMixin">
4+
<title>Form Reset Mixin</title>
5+
<desc>A mixin to call <code>refresh()</code> on an input widget when the parent form gets reset.</desc>
6+
<longdesc>
7+
This only works for native input elements that have a form attribute, like an <code>&lt;input&gt;</code>. It doesn't work for other elements like <code>&lt;label&gt;</code> or <code>&lt;div&gt;</code>
8+
</longdesc>
9+
<methods suppress-auto-examples="true">
10+
<method name="_bindFormResetHandler">
11+
<desc>
12+
Call <code>this._bindFormResetHandler()</code> inside <code>_create()</code> to initialize the mixin.
13+
</desc>
14+
<example>
15+
<desc>Set the background color of the widget's element based on an option.</desc>
16+
<code><![CDATA[
17+
_create: function() {
18+
this._bindFormResetHandler();
19+
}
20+
]]></code>
21+
</example>
22+
</method>
23+
<method name="_unbindFormResetHandler">
24+
<desc>
25+
Call <code>this._unbindFormResetHandler()</code> inside <code>_destroy()</code> to destroy the mixin.
26+
</desc>
27+
<example>
28+
<desc></desc>
29+
<code><![CDATA[
30+
_destroy: function() {
31+
this._unbindFormResetHandler();
32+
}
33+
]]></code>
34+
</example>
35+
</method>
36+
</methods>
37+
<example>
38+
<height>100</height>
39+
<desc>Type colors into the input</desc>
40+
<code><![CDATA[
41+
$.widget( "custom.colorize", [ $.ui.formResetMixin, {
42+
_create: function() {
43+
this.swatch = $("<div>")
44+
.addClass("demo-colorize-swatch")
45+
.insertAfter(this.element);
46+
47+
this.refresh();
48+
this._bindFormResetHandler();
49+
50+
this._on({ keyup: "refresh" });
51+
},
52+
refresh: function() {
53+
this.swatch.css( "background-color", this.element.val() );
54+
},
55+
_destroy: function() {
56+
this.swatch.remove();
57+
this._unbindFormResetHandler();
58+
}
59+
} ] );
60+
$( "#colorize" ).colorize();
61+
]]></code>
62+
<css><![CDATA[
63+
.demo-colorize-swatch {
64+
width: 50px;
65+
height: 50px;
66+
border: 1px solid black;
67+
}
68+
]]></css>
69+
<html><![CDATA[
70+
<form>
71+
<input id="colorize">
72+
<button type="reset">Reset form</button>
73+
</form>
74+
]]></html>
75+
</example>
76+
<category slug="utilities"/>
77+
<category slug="widgets"/>
78+
</entry>
79+
</entries>

0 commit comments

Comments
 (0)