Home

User Manual

image

Contents

1. useHeaderLayout yes yes or no Plugin header blue header layout Registration Login Information 008 i User Name Password Confirm Password 4 4 Quick Navigation among Pages Slides In Wizard layout Plugin gives the option to navigate directly to any specific for that plugin creates navigation symbols against each page section User Manual Page 10 7 A TS JQuery Form Plugin version 0 3 J TEOST 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 jFormContainer tsJForm navigationSymbol square square circle or none Navigation Symbols square Registration Login Information a Save Cancel User Name Password Confirm Password 4 4 1 Slides Pages Linking Plugin provides a facility to navigate with in document if the page is height large enough and jform is in fullpage mode It could be helpful in finding the desired location of the form if form has too much content in it Clicking on navigation symbol simply scroll to the desired location 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 repla
2. submission setting to false will fire the submission events of user s code implementation 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 allowJsonSubmission false Sample Code PHP registration php Example below gets the json and save it in a file name json txt and also return json decoded data to AJAX request User Manual Page 12 aA TS JQuery Form Plugin version 0 3 Code sample lt php if isset _POST json jsondata _POST json data_decode json_decode json_encode jsondata for getting table data use this jsontabledata _POST jsonTableData data_decode_table json_decode json_encode jsontabledata writing data to file file fopen json txt w fwrite file jsondata data_decode_table fclose file echo data_decode gt 4 8 1 Form Data Submission ASP NET MVC Plugin can be fully integrated with ASP NET MVC forms also supports submission of data to MVC controllers and response back to request There are some steps to make it working 1 Create a Model class Code sample a model class for getting json data of form public class JFormDataModel public strin
3. 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 User Manual Page 14 aA TS JQuery Form Plugin version 0 3 Code sample jFormContainer tsJForm jFormHeight autofit auto autofit or numeric value Code sample jFormContainer tsJForm jFormHeight 400 auto autofit or numeric value 4 10 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 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 j FormContainer tsJForm jFormWidth 800 auto or numeric value y 4 10 Group Controls Plugin gives the support to place controls in group container and highlight the whole group Insert controls in a lt div gt and the heading of group control
4. set of classes with specifying name in the end of their User Manual Page 8 aA TS JQuery Form Plugin version 0 3 J Herri 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 FormType 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 Cancei Login Information User Name Confirm Password Personal Details First Name Phone Email Last Name Country o Male USA Female Payment Name on Card Credit Card Visa Card Number Pin Code User Manual Page 9 aA TS JQuery Form Plugin version 0 3 J iii Page layout wizard Registration Login Information 0 Save Cancel 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 jFormContainer tsJForm
5. will be access from its data label group attribute The HTML should be like this Code sample lt div data label group Gender gt lt input type radio name Gender checked checked data label Male gt lt input type radio name Gender data label Female gt lt div gt Group controls will be rendered as shown below see highlighted area User Manual Page 15 7 A TS JQuery Form Plugin version 0 3 J TENRO Registration Personal Details o Save lt First Name Religion Please Select y Last Name City Phone 10 11 State Date of Birth Country Please Select y Email E Male Female 4 11 Table Grid Controls Plugin gives the support to place table grid controls in form and highlight the whole table Insert lt table gt tag in a lt div gt and the heading of table control will be taken from its data label attribute also assign ts jform table class to lt table gt The table will be automatically rendered at end of the slide The HTML should be like this Code sample lt div gt lt table class ts jform table data label TableHeading gt lt thead gt lt tr gt lt th gt lt th gt lt th gt lt th gt lt tr gt lt thead gt lt tbody gt lt tr gt lt td gt lt td gt gt lt td gt lt td gt lt tr gt lt tbody gt lt table gt lt div gt Note The lt table gt tags can t be fitted in column so wherever you place lt table gt in section the pl
6. 4 10 Set Plugin Width A os 15 411 SS o A O a 15 4 12 Table Grid Controls a aa 16 4 13 Hide Navigation Symbols Tray oococcccconnonncnnannacnnonanncnnrnncrn ron rnn ner nnn narrar nnr nar EEE 19 4 14 Plugin P blic FUNCTIONS ni a Ea aea aaea TENE es 19 4 14 1 fn SetJfornn Width eeisierieriiir iata aA ATAT ease sane sane OORA OOA 19 4 14 2 fn SetJformColuUMNWidth erie aa e R E A R E AT R E A ORA 19 4 143 Jforml abel gNm EE lt A id 20 4 144 tableros ON a a ad 20 4 15 Set Field Highlight SY leia 20 4 15 1 Field Highlighter Options raisi aa aaa aaa aa a aaa dida dis 21 r gt TESHNOSOFT TS JQuery Form Plugin version 0 3 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 latest 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
7. User Manual TS JQuery Form Plugin version 0 3 E mail info techno soft com Web http www techno soft com Table of Contents 1 Getting Started with TS JQuery Form Plugin cooccocccnncocnncnnnnnonnnronnnnnnnncnnnnrnnnnrnnnnrnnnnes 3 2 External DEPENDA 3 3 How to Use TS JQuery Form PIUGIN er tesii risio inntrer aaant aia ea rar i ideaa 3 2 Include ESSE Aia 3 3 2 Write an HTML TOR PIO 3 Step 1 Place Container for PIUGIN oocococcccnccnnoccnnnccnnnncnnnncnnnncnnnnrnnnnrnnnnrrnnnrrnnneraness 3 Step 2 Write an HTML Inside ContaiN8F ooccccccconccnnonnonnnnnonncnncnncnncnnnon nan nannnrnarnannanans 4 Step 3 Place Save Cancel Button sersrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrere 6 3 3 Include JavaScript Tilt a Ei veia 7 3 4 JavaScript to Invoke PIUGIN aer rn ena oan unr eens 7 A PIDIO PONS ii NA 8 SiL Theme TOR Pl Misiles 8 42 FORM LA yo Ei A A a ee one da ds 9 43 Change Header Style ii A AA 10 4 4 Quick Navigation among Pages SlidesS c cee ee eect eee erences tees eae e tees tana nana 10 4 41 Slid s Pages Linking nica il 11 4 5 Use Icons Instead of Save and Cancel BUttONS ooococccccnnnconnncnnnncnnnnennnncnnancanannnnnnes 11 4 6 Show Cancel Button soii la laa 12 4 7 Show Save Button ii a E E a ia 12 4 8 Form Data SUBMISSION A aaa 12 4 8 1 Form Data Submission ASP NET MVC o0occccccconconnonncnncnnroncon can rnn rar nrr narrar 13 4 9 Set Plugin Height aaa AE iii 14
8. ame 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 7 A TS JQuery Form Plugin version 0 3 Code sample lt script type text javascript language javascript gt document ready function jFormContainer tsJform 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 w Plugin Theme green Registration Login Information 0 _ save Cancel User Name gt gt Password Confirm Password If it is required to create custom theme go to file css jquery ts jform 0 3 css and see group of theme classes for green blue and brown etc create own
9. an 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 User Manual Page 20 7 TS JQuery Form Plugin version 0 3 J TECHNOSOFT Field Highlighter By Clicking on a field input textarea select etc will highlight it Registration Login Information o Save Cance Plugin also give some options to the user to customize field highlight style which are explained further in 4 15 1 Field Highlighter Options section below 4 15 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 fieldHighlighterOptions gt Field Property e Style Using this property highlight style can be set Plugin supports three styles which are explained below Default strip Options
10. 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 Note Add data attribute data button type to distinguish between submit and cancel buttons and must define submit button type as shown below Code sample lt div id jFormContainer data heading Registration gt lt Place your save cancel button HTML here gt lt input id btnSave data button type submit type submit value Save gt lt input id btnCancel data button type cancel type button value Cancel gt lt div gt User Manual Page 6 a TS JQuery Form Plugin version 0 3 J iii Registration Login Information 0 Ss Cancel User Name gt 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 cancel button is hidden 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 input data label First Name id txtFirstN
11. ce the button cancellconUrl and savelconUrl are the property for that Code sample is given below Default empty no icons Code sample j FormContainer tsJForm cancelIconUrl css images cancel png savelconUrl css images save png User Manual Page 11 aA TS JQuery Form Plugin version 0 3 J Herri 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 j FormContainer tsJForm useCancelButton true true or false 4 7 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 8 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 Another option is introduced to use plugin s submission or user s own submission events behind submit save clear cancel buttons Use this option allowJsonSubmission to make it working By default its true and will be used plugin s
12. dient and strip Field Highlighter shadow and theme brown Registration Personal Details 2025 j Cancel First Name Phone Email Last Name Country o Male USA ly a Female Code sample j FormContainer 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 Field Highlighter strip and theme green Registration Login Information save Cancel lt Bae gt Password Confirm Password fieldHighlighterOptions gt Label Property User Manual Page 23 7 A TS JQuery Form Plugin version 0 3 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 label 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 fieldHighlighterOptions label align left po
13. g Name get set public string Value get set 2 Passing a submitUrl like this Code sample jFormContainer tsJForm submitUrl home PostJson call PostJson function in Controller User Manual Page 13 r gt TESHNOSOFT TS JQuery Form Plugin version 0 3 3 Writing PostJson Code sample a json data posted controller example HttpPost public ActionResult PostJson List lt JFormDataModel gt jsonDataCollection string writeJson string Empty var dictJson new Dictionary lt string string gt foreach var json0bj in jsonDataCollection Name controlName Value controlValue dictJson Add jsonObj Name jsonObj Value now converting all dictionary items to JSON format and save in one string writeJson new JavaScriptSerializer Serialize dictJson writing a json data to text file string fileName postJson txt FileInfo fileInfo new FileInfo fileName using StreamWriter sWriter fileInfo CreateText sWriter WriteLine writeJson response back success to Ajax request return Json success success JsonRequestBehavior AllowGet Code example above is written in ASP NET MVC submitUrl property is set to home PostJson and in target form data is being saved in postJson txt 4 9 Set Plugin Height Plugin gives the option to set its height as well as it can also dynamically set the
14. n 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 7 A TS JQuery Form Plugin version 0 3 Registration Personal Details 2 Save Cancel FirstName Phone Last Name Country o USA z 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 label 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
15. 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 User Manual Page 21 7 A TS JQuery Form Plugin version 0 3 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 0 _ Save Cancel UserName gt Password Confirm Password Code sample j FormContainer tsJForm fieldHighlighterOptions field borderColor white style gradient borderColor any legal color name or value can be used style shadow gradient and strip Field Highlighter gradient Registration Login Information sae Cancel User Name Password nfi or User Manual Page 22 a TS JQuery Form Plugin version 0 3 Code sample jFormContainer tsJForm fieldHighlighterOptions field borderColor white style shadow borderColor any legal color name or value can be used style shadow gra
16. ormType fullpage SetJformWidth 755 or like that 4 14 2 fn SetJformColumnWidth User can set every column width in each slide to align jform perfectly This function accepts three arguments 1 slideNumber 2 slideColumnNumber 3 columnWidth For example a slide number two and its column number one need to be aligned with the rest of jform then how to call this function shown below User Manual Page 19 aA TS JQuery Form Plugin version 0 3 Code sample fn SetJformColumnWidth 2 1 380 4 14 3 JformLabelAlignment User can set the width and other CSS properties of label of control to align with the other controls in jform This function primarily accepts CSS properties object as an argument and automatically apply on control s label For example a control id txtOne label is not aligned with the rest of form controls and then calls this function like Code sample txtOne JformLabelAlignment padding top 2px width 95px 4 14 4 tableToJSON Plugin provides a public function which converts the whole table data to array form and later on can convert to JSON form for submitting to server For example a table with id tblEmployee needs to be converted to JSON format and then use this function like Code sample var tblArrayForm tblEmployee tableToJSON var tb1JSONFormat JSON stringify tblArrayForm 4 15 Set Field Highlight Style Plugin has
17. ould be look alike Registration Personal Details First Name Last Name Phone Date of Birth Email Login Information User Name Password Re type Password Religion Please Select y gt City State Country Please Select X Gender 2 Male Female CNIC Join Date Jan vw 18 1989 v E Religion Please Select X City State Country Please Select v Gender Male Female CNIC Join Date Jan vy 18 y 1989 y Secret Question Please Select X Answer User Manual Page 18 r 7 aoe TS JQuery Form Plugin version 0 3 4 13 Hide Navigation Symbols Tray Plugin provides an option to hide show the navigation symbol tray use this property hideNavigationTray to get the functionality working Default true Registration Personal Details Save First Name Religion Please Select y Last Name City Phone Ea State Date of Birth Country Please Select y Email gt 5 Gender Male Female 4 14 Plugin Public Functions Plugin provides some public functions that user can call them to align jform perfectly Each one is listed below with how to 4 14 1 fn SetJformWidth This function accepts custom width value in integer It will be used to set overall width of jform and the other containers that are inside to make it work smoothly Code sample fn SetJformWidth 755 call it this way or either HjFormContainerDiv tsIform jFormHeight autofit jF
18. rd gt lt div gt lt fieldset gt lt div gt JForm one column form Registration Login Information Sue Cancel User Name gt 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 3 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 gt 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 sectio
19. sition left align left or right position top left or inline Label positioning left Registration Login Information e E cancer User Name Password Confirm Password Code sample j FormContainer tsJForm fieldHighlighterOptions label align left position inline align left or right position top left or inline User Manual Page 24 aA TS JQuery Form Plugin version 0 3 J TENORO Label positioning inline Registration Personal Details e Save Cancel Country 9 Male pan z Female Code sample jFormContainer tsJForm fieldHighlighterOptions label align right position left align left or right position top left or inline Label alignment right Registration Login Information o save Cancel Password Confirm Password Code sample jFormContainer tsJForm fieldHighlighterOptions label align right position top align left or right position top left or inline User Manual Page 25 a TS JQuery Form Plugin version 0 3 J TECHNOSOFT Label alignment right and position top Registration Login Information J Save Cancel lt lt User Name gt gt O i Confirm Password User Manual Page 26
20. 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 3 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 70r8 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 7 A TS JQuery Form Plugin version 0 3 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 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 passwo
21. ugin will always render the lt table gt at end of that slide Plugin also provides add edit delete functionality for table control It just need to call a function and pass its table id call it after invoking plugin User Manual Page 16 aA TS JQuery Form Plugin version 0 3 TECHNOSOFT Instill Excellence Code sample document ready function jFormContainer tsJForm for table add edit delete functionality call it like this SetupTableControl tblPlayers A sample table rendering in form would be this Reaistration Personal Details 00 Save 1 Cancel lt First Name Gender Male Female Last Name Religion Please Select X Phone 92 300 1111111 Siy Date of Birth i State Email info techno softcom Sane Please Select Players Action First Name Last Name Country John wrigt New Zealand David Whatmore Australia Zaheer Abbas Pakistan Vivian Richards West Indies User Manual Page 17 a J aT 4 12 Expand Collapse jForm TS JQuery Form Plugin version 0 3 Plugin has an option to toggle between fullpage and wizard jform type It provides an arrow with the navigation symbols which expands collapses the jform respectively For expanding collapsing jform use this button arrow Registration Personal Details lt First Name Last Name Phone Date of Birth Email After expanding jform w

Download Pdf Manuals

image

Related Search

Related Contents

  e-connection for SNS 取扱説明書 - e    Black Box LMC200A-2PS-DC User's Manual    Manual de instrucciones  Spectra APR3-ADM2 : User Guide  Bedienungsanleitung  DHL INTRASHIP USER GUIDE. TIME DEFINITE SERVICES  Yamaha AIC128-D Driver Installation Guide  

Copyright © All rights reserved.
Failed to retrieve file