Spry User Guide - Support - Adobe

More documents

Recommendations

Info

var textfieldwidget1 = new Spry.Widget.ValidationTextField("textfieldwidget1", "validation_type", {minChars:value, maxChars:value}); Note: If a validation type is not required, you can set the validation type to "none".See“Specifyavalidationtypeand format” on page 50. Specify minimum and maximum values This option is only available for the "integer", "date", "time", "currency", and "real" validation types. ❖ To specify minimum or maximum values in the text field, add the minValue property or maxValue property (or both) and a value to the constructor, as follows: var textfieldwidget1 = new Spry.Widget.ValidationTextField("textfieldwidget1", "validation_type", {minValue:value, maxValue:value}); Change required status of a text field By default, Validation Text Field widgets require user input when published on a web page. You can, however, make the completion of text fields optional for the user. ❖ To change the required status of a text field, add the isRequired property to the constructor and set its value to false, as follows: var textfieldwidget1 = new Spry.Widget.ValidationTextField("textfieldwidget1", "none", {isRequired:false}); Note: In the preceding example, the second parameter is set to "none", but it could easily be set to any of the available validation types (for example, "phone" or "credit_card"). See “Specify a validation type and format” on page 50. Create a hint for a text field Because there are so many different kinds of formats for text fields, it is helpful to give your users a hint as to what format they need to enter. For example, a text field set with the Phone Number validation type accepts phone numbers in the form (000) 000-0000 by default. You can enter these sample numbers as a hint so that the text field displays the correct format when the user loads the page in a browser. This option doesn't depend on the validation type, so you can always specify it. (Specify "none" as your validation type, if no other validation type is required.) When the user clicks inside the text field, the hint disappears; when the user clicks outside the text field, Spry restores the hint to the textfield if the field contains no value. ❖ To create a hint for a text field, add the hint property to the third parameter of the constructor and the text of your hint as the value, as follows: var textfieldwidget1 = new Spry.Widget.ValidationTextField("textfieldwidget1", "validation_type", {hint:"some hint text here"}); SPRY User Guide 61
Block invalid characters You can prevent users from entering invalid characters in a Validation Text Field widget. For example, if you set this option for a widget set with the Integer validation type, nothing appears in the text field if the user tries to type a letter. You must specify a validation type for this option because the specification of the third parameter depends on the second parameter. If no validation type is required, specify "none" as your validation type. This option does not work in older browsers. ❖ To block invalid characters, add the useCharacterMasking property to the constructor and set its value to true, as follows: var textfieldwidget1 = new Spry.Widget.ValidationTextField("textfieldwidget1", "validation_type", {useCharacterMasking:true}); Customize the Validation Text Field widget The SpryValidationTextField.css file provides the default styling for the Validation Text Field widget. You can, however, customize the widget by changing the appropriate CSS rule. The CSS rules in the SpryValidationText- Field.css file use the same class names as the related elements in the widget’s HTML code, so it’s easy for you to know which CSS rules correspond to the widget and its error states. The SpryValidationTextField.css file should already be included in your website before you start customizing. For more information, see “Prepare your files” on page 3. Style a Validation Text Field widget (general instructions) 1 Open the SpryValidationTextField.css file. 2 Locate the CSS rule for the part of the widget to change. For example, to change the background color of the Text Field widget’s required state, edit the .textfieldRequiredState rule in the SpryValidationTextField.css file. 3 Make your changes to the CSS and save the file. The SpryValidationTextField.css file contains extensive comments, explaining the code and the purpose for certain rules. For further information, see the comments in the file. Style Validation Text Field widget error message text By default, error messages for the Validation Text Field widget appear in red with a 1-pixel solid border surrounding the text. ❖ To change the text styling of Validation Text Field widget error messages, use the following table to locate the appropriate CSS rule, and then change the default properties, or add your own text-styling properties and values. Text to change Relevant CSS rule Relevant properties to change Error message text .textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfield- MinCharsState .textfieldMinCharsMsg, .textfieldMax- CharsState .textfieldMaxCharsMsg color: #CC3333; border: 1px solid #CC3333; SPRY User Guide 62
Page 1 and 2:
SPRY 1.4 DEVELOPER GUIDE
Page 3 and 4:
Contents Chapter 1: Spry 1.4 Overvi
Page 5 and 6:
Chapter 2: Working with Spry widget
Page 7 and 8:
4 Add widget files to your website
Page 9 and 10:
Each of the div tags in the Accordi
Page 11 and 12:
For example, create a folder called
Page 13 and 14: Panel 3 Panel 3 Content Panel 3 Co
Page 15 and 16: 3 Make your changes to the CSS and
Page 17 and 18: Set panel animation timing You can
Page 19 and 20: Variation on tags used for Collapsi
Page 21 and 22: Make sure that the file path to the
Page 23 and 24: function getStatus(){ var xx = Coll
Page 25 and 26: Change collapsible panel height To
Page 27 and 28: . . . Tab 1 Tab 2 Tab 3 Ta
Page 29 and 30: SPRY User Guide /* Horizontal Tabbe
Page 31 and 32: 5 To add the tabbed panels widget t
Page 33 and 34: Delete a panel from a Tabbed Panels
Page 35 and 36: Text to change Relevant CSS rule Ex
Page 37 and 38: Note: As a best practice, try not t
Page 39 and 40: } ul.MenuBarHorizontal ul{ margin:
Page 41 and 42: Item 1 Item 2 Item 3 Item 4 6 Wr
Page 43 and 44: ... Item 1 Item 2 Item 3 Subm
Page 45 and 46: 3 Locate the MenuBarHorizontal clas
Page 47 and 48: 2 Change the width property to a de
Page 49 and 50: To add other error messages to a Va
Page 51 and 52: Make sure that the file path to the
Page 53 and 54: Error message class Description .te
Page 55 and 56: Option Value format Not applicable
Page 57 and 58: Option Value minChars/maxChars Not
Page 59 and 60: var sprytextfield1= new Spry.Widget
Page 61 and 62: The default format is U.S. currency
Page 63: var textfieldwidget1 = new Spry.Wid
Page 67 and 68: Value Description "0" Whole numbers
Page 69 and 70: B C D A. Characters remaining count
Page 71 and 72: The ID passed into the widget const
Page 73 and 74: ... var sprytextarea1 = n
Page 75 and 76: SPRY User Guide Maximum number
Page 77 and 78: 2 Locate the CSS rule for the part
Page 79 and 80: Whenever a Validation Select widget
Page 81 and 82: *Validation Select styling classes*
Page 83 and 84: ... --Please select an item--
Page 85 and 86: Specify an invalid value Youcanspec
Page 87 and 88: A B A. Validation checkbox widget g
Page 89 and 90: The ID passed into the widget const
Page 91 and 92: The checkboxRequiredMsg rule is loc
Page 93 and 94: Style a Validation Checkbox widget
Page 95 and 96: @id item description price 1 Summer
Page 97 and 98: var dsPhotos = new Spry.Data.XMLDat
Page 99 and 100: Example of selecting and flattening
Page 101 and 102: The following is the DOM-tree repre
Page 103 and 104: Note: Dynamic regions are limited t
Page 105 and 106: . . . var dsSpecials = new Spry.
Page 107 and 108: SPRY User Guide The difference betw
Page 109 and 110: balsamic vinegar sugar salt p
Page 111 and 112: The following example shows the obs
Page 113 and 114: Hijax Demo - Notes 1 Note
Page 115 and 116:
Summer Salad organic butter lettu
Page 117 and 118:
3 Within the tag containing the dyn
Page 119 and 120:
Item Description Price {item} {
Page 121 and 122:
5 Within the tag containing the det
Page 123 and 124:
6 Create the detail dynamic region
Page 125 and 126:
Dynamic Region Example var ds
Page 127 and 128:
var dsPhotos = new Spry.Data.XMLDat
Page 129 and 130:
var dsPhotos = new Spry.Data.XMLDat
Page 131 and 132:
Notification Data passed into notif
Page 133 and 134:
Page 135 and 136:
Page 137 and 138:
Objects as region observers To rece
Page 139 and 140:
{item} {description} {price} {ds_Ro
Page 141 and 142:
Behavior Attributes Example .my
Page 143 and 144:
Behavior Attributes Example .myH
Page 145 and 146:
Before you begin Prepare your files
Page 147 and 148:
. . . Note: The exact file path d
Page 149 and 150:
. . . #blindup1{ background-colo
Page 151 and 152:
Option Description transition Deter
Page 153 and 154:
Note: The exact file path differs,
Page 155 and 156:
Index A accessibility 2, 109 Accord
show all

Spry User Guide - Support - Adobe

Create successful ePaper yourself

Delete template?

Save as template?