Merge pull request vitmalina#2062 from nemetris/starting-to-document-…

…w2field starting to document w2field
yangxin1994 · Jun 18, 2021 · 19dda30 · 19dda30
2 parents 84d52b6 + a38078d
commit 19dda30
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 0 deletions.
diff --git a/docs/details/w2field.type.html b/docs/details/w2field.type.html
@@ -0,0 +1,35 @@
+The type of the field.
+
+<div class="definition">
+    String, default = ''
+</div>
+
+
+<h4>Valid types</h4>
+<ul>
+    <li>text</li>
+    <li>int</li>
+    <li>float</li>
+    <li>money</li>
+    <li>currency</li>
+    <li>percent</li>
+    <li>alphanumeric</li>
+    <li>bin</li>
+    <li>hex</li>
+    <li>color</li>
+    <li>date</li>
+    <li>time</li>
+    <li>datetime</li>
+    <li>list</li>
+    <li>combo</li>
+    <li>enum</li>
+    <li>file</li>
+</ul>
+
+<div style="height: 10px"></div>
+
+Usage:
+
+<textarea class="html">
+$('#myField').w2field('text');
+</textarea>
diff --git a/docs/index.js b/docs/index.js
@@ -45,6 +45,11 @@ $(function () {
                 { id: 'w2form-props', text: 'Properties', icon: 'fa fa-star-o' },
                 { id: 'w2form-methods', text: 'Methods', icon: 'fa fa-cog' }
             ]},
+            { id: 'w2field', text: 'w2field', img: 'icon-folder', group1: true, nodes: [
+                { id: 'w2field-events', text: 'Events', icon: 'fa fa-tag' },
+                { id: 'w2field-props', text: 'Properties', icon: 'fa fa-star-o' },
+                { id: 'w2field-methods', text: 'Methods', icon: 'fa fa-cog' }
+            ]},
             { id: 'w2popup', text: 'w2popup', img: 'icon-folder', group1: true, nodes: [
                 { id: 'w2popup-events', text: 'Events', icon: 'fa fa-tag' },
                 { id: 'w2popup-props', text: 'Properties', icon: 'fa fa-star-o' },
@@ -77,6 +82,7 @@ $(function () {
     init('toolbar')
     init('tabs')
     init('form')
+    init('field', new w2field(''))
     init('popup', w2popup)
     initUtils()
 

diff --git a/docs/overview/field.html b/docs/overview/field.html
@@ -0,0 +1,80 @@
+<h3>Field Overview</h3>
+
+Most of the fields that can be used in a w2form can also be used stand-alone.
+<div style="height: 10px"></div>
+
+To create a w2field use <span class="method">$('#myField').w2field( <i>type</i>, <i>options</i> );</span>
+where <span class="method">type</span> is a string and <span class="method">options</span> is an optional object.
+The properties of <span class="method">options</span> vary based on the type.
+<div style="height: 10px"></div>
+
+<h4>Example</h4>
+
+Below is a simple example how to use fields. It shows the minimum HTML and JavaScript you need to have a simple w2field.
+
+<textarea class="html">
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.min.css" />
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
+</head>
+<body>
+    <input id="myField"></input>
+</body>
+<script>
+$(function () {
+    $('#myField').w2field('text');
+});
+</script>
+</html>
+</textarea>
+
+<h4>Valid types</h4>
+<ul>
+    <li>text</li>
+    <li>int</li>
+    <li>float</li>
+    <li>money</li>
+    <li>currency</li>
+    <li>percent</li>
+    <li>alphanumeric</li>
+    <li>bin</li>
+    <li>hex</li>
+    <li>color</li>
+    <li>date</li>
+    <li>time</li>
+    <li>datetime</li>
+    <li>list</li>
+    <li>combo</li>
+    <li>enum</li>
+    <li>file</li>
+</ul>
+
+<h4>Custom Types</h4>
+If built-in types are not enough for you, there is a way you can create custom types.
+
+<textarea class="javascript">
+$().w2field('addType', 'myType', function (options) {
+    $(this.el).on('keypress', function (event) {
+        if (event.metaKey || event.ctrlKey || event.altKey
+            || (event.charCode != event.keyCode && event.keyCode > 0)) return;
+        var ch = String.fromCharCode(event.charCode);
+        if (ch != 'a' && ch != 'b' && ch != 'c') {
+            if (event.stopPropagation) event.stopPropagation(); else event.cancelBubble = true;
+            return false;
+        }
+    });
+    $(this.el).on('blur', function (event)  { // keyCode & charCode differ in FireFox
+        var ch = this.value;
+        if (ch != 'a' && ch != 'b' && ch != 'c') {
+            $(this).w2tag(w2utils.lang("Not a single character from the set of 'abc'"));
+        }
+    });
+});
+</textarea>
+After you defined this type, you can apply it in the following way:
+<textarea class="javascript">
+$('#id').w2field('myType');
+</textarea>
diff --git a/docs/summary/w2field-props.php b/docs/summary/w2field-props.php
@@ -0,0 +1,10 @@
+<link rel="stylesheet" type="text/css" href="../summary.css"/> 
+<div class="container">
+<div class="obj-property">
+    <a href="w2field.options">options</a> <span>- </span>
+</div>
+<div class="obj-property-desc">
+
+</div>
+
+</div>