User Manual
Contents
1. 800 auto or numeric value 4 10 Set Field Highlight Style Plugin has option to highlight fields Colors are automatically applied based on the plugin theme Clicking on field label or control plugin highlights the field and brings the keyboard focus on field control Figure below is showing the highlighted field Plugin which controls the field rendering labeling and its layout theming it also perform some other functionality i e apply effect on field when hover or click functions are called Field Highlighter By Clicking on a field input textarea select etc will highlight it Registration Login Information e oo Save Cancel User Name gt gt Confirm Password Plugin also give some options to the user to customize field highlight style which are explained further in 4 10 1 Field Highlighter Options section below 4 10 1 Field Highlighter Options It uses the color scheme of the current theme set for the plugin blue is the default theme of plugin Properties are divided into two parts one is related to the field i e highlight style on field focus field border color etc and the other one is related to label i e label positioning and its text alignment fieldHighlighterOptions is the main property containing two sub property which are explained below User Manual Page 14 aA TS JQuery Form Plugin version 0 1 J en fieldHighlighterOptions gt Field Property e Style Using this2. color name or value can be used style shadow gradient and strip Field Highlighter shadow and theme brown Registration Personal Details eece mej Cancel First Name Phone Email Last Name Country o Male USA v D Female Code sample jFormContainer tsJForm themeLayout green fieldHighlighterOptions field borderColor white style strip style color will be applied according to the themelayout borderColor any legal color name or value can be used style shadow gradient and strip User Manual Page 16 l A TS JQuery Form Plugin version 0 1 J extern tl Field Highlighter strip and theme green Registration Login Information e Cancel zs Password Confirm Password fieldHighlighterOptions gt Label Property e position Using this property label position can be set Plugin supports three options which are explained below Default top e top label position will be at top of control e left label position will be at left side of control e inline label will be written inside field control like placeholder e align Plugin gives the leverage to the user to set label text alignment Default left e left label will be aligned to left e right abel will be aligned to right e center label will be aligned to center Label property is further explained below using the code samples and figures below Code sample j FormContainer tsJForm fieldHighl
3. green blue and brown etc create own set of classes with specifying name in the end of their User Manual Page 8 aA TS JQuery Form Plugin version 0 1 J He name Specify the newly created theme name against themeLayout property plugin will load the newly custom theme 4 2 Form Layout Plugin gives the option to change the web form layout to wizard or full page jFormType is the property for that Default wizard e fullpage Will convert the whole HTML to just one page no forward backward jump to slide options are available e wizard Will convert the HTML to slides forward backward jump to slide options are available Code sample j FormContainer tsJForm jFormType fullpage fullpage or wizard 3 Web page layout fullpage Registration Save j Cancel Login Information User Name Password Confirm Password Personal Details First Name Phone Email Last Name Country Male USA x Female Payment Name on Card Credit Card Visa x Card Number User Manual Page 9 aA TS JQuery Form Plugin version 0 1 J TENDOI Page layout wizard Registration Login Information EE cca User Name Password Confirm Password 4 3 Change Header Style By using useHeaderLayout property plugin can change the header background i e make a main application header according to the selected theme There are two options i e yes or no Default no Code sample j F
4. A TS JQuery Form Plugin version 0 1 4 6 Show Cancel Button By default plugin does not show cancel button If the cancel button is required on form place it html as explained in start of the manual and set useCancelButton property to true Default false hide the button Code sample jFormContainer tsJForm useCancelButton true true or false 4 6 Show Save Button By default plugin show the save button if the html is properly placed as explained in start of the manual If the save button is not required on form set useSaveButton property to false Default true Code sample jFormContainer tsJForm useSaveButton true true or false 4 7 Form Data Submission Plugin supports submission of data as well it requires target URL on which it can submit the data submitURL is the property exposed for mentioning the target URL Code example below is written in php submitURL property is set to registration php and in target form data is being saved in output txt Note plugin submits the data in JSON format Code sample jFormContainer tsJForm submitUrl registration php Target source page url User Manual Page 12 aA TS JQuery Form Plugin version 0 1 Sample Code PHP registration php Example below gets the json and save it in a file name output txt Code sample lt php if isset _POST json jsonData _POS
5. T json file fopen output txt w fwrite file jsonData fclose file 4 8 Set Plugin Height Plugin gives the option to set its height as well as it can also dynamically set the height based on the content jFormHeight is the property for this purpose There are multiple options which are mentioned below Default auto Options e auto plugin will calculate height and fix all page slide height e autofit Height of all pages slide will be calculated dynamically based on how many controls each column contains e Custom height value This will fix the height of the plugin Note that numeric value will be applied in pixels Code sample j FormContainer tsJForm jFormHeight autofit auto autofit or numeric value Code sample jFormContainer tsJForm jFormHeight 400 auto autofit or numeric value 4 9 Set Plugin Width Plugin gives the option to set its width as well as it can also dynamically set the width based on the content or number of columns jFormWidth is the property for this purpose There are multiple options which are mentioned below User Manual Page 13 a J TECNO TS JQuery Form Plugin version 0 1 Default auto Options e auto plugin will calculate the width of plugin dynamically e Custom width value This will fix the width of plugin value will be applied in pixels Code sample jFormContainer tsJForm jFormWidth
6. User Manual TS JQuery Form Plugin version 0 1 E mail info techno soft com Web _ http www techno soft com Table of Contents 1 Getting Started with TS JQuery Form Plugin 2 External Dependencies 3 How to Use TS JQuery Form Plugin 3 1 Include CSS file 3 2 Write an HTML for Plugin 3 3 Include JavaScript file 3 4 JavaScript to Invoke Plugin 4 Plugin Options 4 1 Theme for Plugin 4 2 Form Layout OO ONN WWW WW 4 3 Change Header Style 4 4 Quick Navigation among Pages 4 5 Use Icons Instead of Save and Cancel Buttons 4 6 Show Cancel Button 4 6 Show Save Button 4 7 Form Data Submission 4 8 Set Plugin Height 4 9 Set Plugin Width 4 10 Set Field Highlight Style 4 10 1 Field Highlighter Options r J TESHNOSOFT TS JQuery Form Plugin version 0 1 1 Getting Started with TS JQuery Form Plugin TS JQuery Form Plugin allows user to develop a decent looking web form where the plugin will cater the alignment and basic design There are various options such as control and their respective label positioning control grouping and also have the ability change the form interface to wizard 2 External Dependencies Following are the files which need to be added to use the plugin e jquery 1 8 3 js The file is added to the package Latest version can also be used Visit http www jquery com to get the late
7. ding Registration gt lt fieldset data heading Login Information gt lt div gt lt input data label User Name type text gt lt input data label Password type password gt lt input data label Confirm Password type password gt lt div gt lt fieldset gt lt div gt JForm one column form Registration Login Information Cancel User Name Password Confirm Password NOTE e lt fieldset gt inside container represents the page section of a form lt div gt inside lt fieldset gt represent the a column Plugin will apply styling on control as well such as width height etc Incase inline styling or CSS class is applied on controls then plugin will not apply its styling and adjust the form accordingly User Manual Page 4 aA TS JQuery Form Plugin version 0 1 J Ror Similarly for more than one page or section another field set can be added code example below will generate two page or section and both having single column structure Code sample lt div id jFormContainer data heading Registration gt lt fieldset data heading Login Information gt lt div gt lt input data label User Name type text gt lt input data label Password type password gt lt input data label Confirm Password type password gt lt div gt lt fieldset gt lt fieldset data heading Personal Details gt lt div gt lt input data label First Name type text g
8. ighterOptions label align left position left align left or right position top left or inline User Manual Page 17 a TS JQuery Form Plugin version 0 1 J TECHNOSOFT Label positioning left Registration Login Information e save Cancel Password Confirm Password Code sample j FormContainer tsJForm fieldHighlighterOptions label align left position inline align left or right position top left or inline Label positioning inline Registration Personal Details _ Save Cancel Country Male USA Female Code sample j FormContainer tsJForm fieldHighlighterOptions label align right position left align left or right position top left or inline User Manual Page 18 aA TS JQuery Form Plugin version 0 1 J La lt Label alignment right Registration Login Information Save Cancel Password Confirm Password Code sample jFormContainer tsJForm fieldHighlighterOptions label align right position top align left or right position top left or inline Label alignment right and position top Registration Login Information J Save Cancel lt User Name gt Password Confirm Password User Manual Page 19
9. l attribute is very important attribute as this is the attribute using which label can be assigned to the controls Add data label attribute to control tag plugin will dynamically use it as label all the formatting and alignment will be handled by the Plugin itself Code sample lt input data label Phone type text gt Step 3 Place Save Cancel Button Plugin allows users to place save and cancel button and gives leverage to submit data add save and cancel button inside plugin container div as shown in code below Code sample lt div id jFormContainer data heading Registration gt lt Place your save cancel button HTML here gt lt input id btnSaveForm type submit value Save gt lt input id btnCancelForm type button value Cancel gt lt div gt User Manual Page 6 a TS JQuery Form Plugin version 0 1 J TECNO Registration Login Information Cancel User Name Password Confirm Password Note e Plugin will handle the save and cancel button layout e if no functionality is applied plugin will apply default functionality to Cancel button i e it will clear all the form fields e By default plugin for further details please see useCancelButton Plugin option e Plugin submit data using JSON format see submitUrl option e For successful data submission add id or name attribute to control tag see the code below Code sample lt inp
10. ormContainer tsJForm useHeaderLayout yes yes or no Plugin header blue header layout Registration Login Information Save K UserName Password Confirm Password User Manual Page 10 l A TS JQuery Form Plugin version 0 1 J ec 4 4 Quick Navigation among Pages In Wizard layout Plugin gives the option to navigate directly to any specific for that plugin creates navigation symbols against each page section navigationSymbol is the property for the symbols Options for this property are mentioned below Default circle circle this will convert navigation symbol to circles square this will convert navigation symbol to squares none this will hide the navigation symbols Code sample j FormContainer tsJForm navigationSymbol square square circle or none Navigation Symbols square Registration Login Information a posae Cancel _ K UserName Password Confirm Password 4 5 Use Icons Instead of Save and Cancel Buttons Based on requirement icons can also be placed against save and cancel button all it need is url path of an icon to replace the button cancellconUrl and savelconUrl are the property for that Code sample is given below Default empty no icons Code sample jFormContainer tsJForm cancelIconUrl css images cancel png saveIconUrl css images save png User Manual Page 11 a
11. property highlight style can be set Plugin supports three styles which are explained below Default strip Options o shadow label position will be at top of control o gradient label position will be at left side of control o strip label will be written inside field control like placeholder e Border Color Plugin gives the leverage to the user to set border color of the highlighted portion Default white Options any standard color name can be used Field property is further explained below using the code samples and figures below Code sample jFormContainer tsJForm fieldHighlighterOptions field borderColor white style strip borderColor Standard color name or code can be used style shadow gradient and strip Field Highlighter strip Registration Login Information L Save Cancel User Name Password Confirm Password Code sample j FormContainer tsJForm fieldHighlighterOptions field bordercColor white style gradient borderColor any legal color name or value can be used style shadow gradient and strip User Manual Page 15 aA TS JQuery Form Plugin version 0 1 J TEOT Field Highlighter gradient Registration Login Information _ save Cancel User Name Password a Code sample j FormContainer tsJForm fieldHighlighterOptions field borderColor white style shadow borderColor any legal
12. st version e json2 js The file is added to the package Latest version can also be used Visit https github com douglascrockford JSON js blob master json2 js to get the latest version 3 How to Use TS JQuery Form Plugin Follow the procedure described below to use the plugin functionality 3 1 Include CSS file Include the Plugin s CSS file as shown in code example below Code sample lt link rel stylesheet href css jquery ts jform 1 css type text css gt There is another CSS file jquery ts jform ie fix css in a package there is no need to include this file as Plugin will detect the IE Browser version it will be loaded by dynamically against IE 6 7or8 3 2 Write an HTML for Plugin Plugin takes an html as an input which needs to be according to the format which is described below Step 1 Place Container for Plugin Place the container lt div gt inside lt form gt tag Plugin will use the container div and place the generated form html inside it User Manual Page 3 yf TS JQuery Form Plugin version 0 1 Code sample lt div id jFormContainer data heading Registration gt lt div gt o data heading this data attribute use for form heading Step 2 Write an HTML Inside Container For section or pages fieldset should be placed inside container div Code example given below is for single page and single column structure Code sample lt div id jFormContainer data hea
13. t lt input data label Last Name type text gt lt div gt lt fieldset gt lt div gt Furthermore if multiple column structure is required add div inside fieldset and plugin will generate new column inside page or section and adjust the form accordingly see the code and figure below Code sample lt div id jFormContainer data heading Registration gt lt fieldset data heading Login Information gt lt div gt lt input data label User Name type text gt lt input data label Password type password gt lt input data label Confirm Password type password gt lt div gt lt fieldset gt lt fieldset data heading Personal Details gt lt div gt lt input data label First Name type text gt lt input data label Last Name type text gt lt div gt lt div gt lt input data label Phone type text gt lt select data label country gt lt option value USA gt USA lt option gt lt select gt lt div gt lt fieldset gt lt div gt JForm two columns form User Manual Page 5 TS JQuery Form Plugin version 0 1 J TENDS Registration Personal Details 3 save cance First Name Phone Last Name Country USA o data heading Use data heading attribute for setting page heading which will be shown in the header area of the page see the code below Code sample lt fieldset data heading Login Information gt o data label data labe
14. ut data label First Name id txtFirstName name txtFirstName type text gt 3 3 Include JavaScript file Include the Plugin s JS file in head tag of the form as shown in code example below Code sample lt script type text javascript src js jquery ts jform min js gt lt script gt 3 4 JavaScript to Invoke Plugin Now we are ready to use TS JQuery Form Plugin Place the code sample below in form to invoke the plugin User Manual Page 7 yf TS JQuery Form Plugin version 0 1 Code sample lt script type text javascript language javascript gt document ready function jFormContainer tsJform 3 lt script gt Note e In code example above JQuery document ready function is used JQuery anonymous function or any other method as per requirement can be used to invoke the plugin 4 Plugin Options 5 1 Theme for Plugin Built in themes can be applied on plugin generated form themeLayout is the property for applying theme on plugin generated form There are three built in options i e blue green and brown Default blue Code sample jFormContainer tsJForm themeLayout green blue green or brown Plugin Theme green Registration Login Information save Cancel User Name Password Confirm Password If it is required to create custom theme go to file css jquery ts jform 0 1 css and see group of theme classes for
Download Pdf Manuals
Related Search