Introduction to "jQuery Easyui series" using properties

<span id="Label3"></p><p><p>1.ValidateBox</p></p><p><p>The Validatebox is designed to validate, the form input fields. If users enter invalid Values,it would change the background color,display the alarm icon and a ToolTip message. The Validatebox can integrated with form plugin and would prevent invalid fields from Submission.</p></p><pre><pre><span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span> <span style="color: #800000;"></span> <span style="color: #ff0000;">id</span><span style="color: #0000ff;">= "vv"</span> <span style="color: #ff0000;"> class</span><span style="color: #0000ff;">= "easyui-validatebox"</span> <span style="color: #ff0000;"> data-options</span><span style="color: #0000ff;">= " Required:true,validtype: ' email '</span><span style="color: #0000ff;">></span></pre></pre><p><p></p></p><p><p>2.TextBox</p></p><p><p>The TextBox component is a enhanced input field that allows users build their form easily. It is the base component for building and other complex components such as combo,datebox,spinner,etc.</p></p><pre><pre><span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span> <span style="color: #800000;"></span> <span style="color: #ff0000;">class</span><span style="color: #0000ff;">= "easyui-textbox"</span> <span style="color: #ff0000;"> data-options</span><span style="color: #0000ff;">= "iconcls: ' Icon-search '"</span> <span style="color: #ff0000;"> Style</span><span style="color: #0000ff;">= "width:300px"</span><span style="color: #0000ff;">></span></pre></pre><p><p></p></p><p><p>3.DateBox</p></p><p><p>The Datebox combines a editable text box with Drop-down calendar panel, that allows the user to select a Date. The entered string in the text box can is transformed to a valid Date. The selected date can also be formatted as Expected.</p></p><pre><pre><span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span> <span style="color: #800000;"></span> <span style="color: #ff0000;">id</span><span style="color: #0000ff;">= "dd"</span> <span style="color: #ff0000;"> type</span><span style="color: #0000ff;">= "text"</span> <span style="color: #ff0000;"> class</span><span style="color: #0000ff;">= "easyui-datebox"</span> <span style="color: #ff0000;"> Required</span><span style="color: #0000ff;">= "required"</span><span style="color: #0000ff;">></span></pre></pre><p><p></p></p><p><p>4.DateTimeBox</p></p><p><p>Similar to the datebox, the Datetimebox allows the User-select a date and a time to display the date and time with spec Ified Format. It adds a Timespinner component to the Drop-down panel.</p></p><pre><pre><span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span> <span style="color: #800000;"></span> <span style="color: #ff0000;">class</span><span style="color: #0000ff;">= "easyui-datetimebox"</span> <span style="color: #ff0000;"> name</span><span style="color: #0000ff;">= "birthday"</span><span style="color: #008080;">2</span> <span style="color: #ff0000;"> Data-options</span><span style="color: #0000ff;">= "required:true,showseconds:false"</span> <span style="color: #ff0000;"> value</span><span style="color: #0000ff;">= "3/4/2010 2:3"</span> <span style="color: #ff0000;"> Style</span><span style="color: #0000ff;">= "width:150px"</span><span style="color: #0000ff;">></span></pre></pre><p><p></p></p><p><p>5.ToolTip</p></p><p><p>When a user moves the mouse pointer over an element, a ToolTip message window appears to display additional Information. The tooltip content can contain any HTML elements this come from the page or via Ajax.</p></p><pre><pre><span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span> <span style="color: #800000;"></span> <span style="color: #ff0000;">href</span><span style="color: #0000ff;">= "#"</span> <span style="color: #ff0000;"> title</span><span style="color: #0000ff;">= "this is the tooltip message."</span> <span style="color: #ff0000;">class</span> <span style="color: #0000ff;">= "easyui-tooltip"</span> <span style="color: #0000ff;">></span> Hover me<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span></pre></pre><p><p></p></p><p><p>Introduction to "jQuery Easyui series" using properties</p></p></span>