FormResetMixin: Initial docs

jzaefferer · jzaefferer · commit b2e5a95d2e22 · 2015-10-25T18:59:58.000-04:00
diff --git a/entries/form-reset-mixin.xml b/entries/form-reset-mixin.xml
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<entries>
+	<entry type="widget" name="jQuery.ui.formResetMixin">
+		<title>Form Reset Mixin</title>
+		<desc>A mixin to call <code>refresh()</code> on a form widget when the parent form gets reset.</desc>
+		<methods suppress-auto-examples="true">
+			<method name="_bindFormResetHandler">
+				<desc>
+					Call <code>this._bindFormResetHandler()</code> inside <code>_create()</code> to initialize the mixin.
+				</desc>
+				<example>
+					<desc>Set the background color of the widget's element based on an option.</desc>
+					<code><![CDATA[
+_create: function() {
+	this._bindFormResetHandler();
+}
+]]></code>
+				</example>
+			</method>
+			<method name="_unbindFormResetHandler">
+				<desc>
+					Call <code>this._unbindFormResetHandler()</code> inside <code>_destroy()</code> to destroy the mixin.
+				</desc>
+				<example>
+					<desc></desc>
+					<code><![CDATA[
+_destroy: function() {
+	this._unbindFormResetHandler();
+}
+]]></code>
+				</example>
+			</method>
+		</methods>
+		<example>
+			<height>50</height>
+			<desc>Plain number spinner</desc>
+			<code><![CDATA[
+$.widget( "custom.colorize", [ $.ui.formResetMixin, {
+	_create: function() {
+		this.element.css( "background-color", "red" );
+		this._bindFormResetHandler();
+	},
+	_refresh: function() {
+		this.element.css( "background-color", "black" );
+	},
+	_destroy: function() {
+		this._unbindFormResetHandler();
+	}
+});
+$( "#colorize" ).colorize();
+]]></code>
+			<css><![CDATA[
+#colorize {
+	width: 50px;
+	height: 50px;
+	border: 1px solid black;
+}
+]]></css>
+			<html><![CDATA[
+<form>
+	<div id="colorize"></div>
+	<button type="reset">Reset form</html>
+</form>
+]]></html>
+		</example>
+		<category slug="utilities"/>
+		<category slug="widgets"/>
+	</entry>
+</entries>
