Skip to content

Commit 7627dad

Browse files
committed
FormResetMixin: Initial docs
1 parent 4f52955 commit 7627dad

File tree

1 file changed

+76
-0
lines changed

1 file changed

+76
-0
lines changed

entries/form-reset-mixin.xml

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

0 commit comments

Comments
 (0)