More blurb updates

This commit is contained in:
Ben Keen 2014-03-25 22:45:34 -07:00
parent 25a8af6be8
commit 3ed42970d8

View File

@ -36,28 +36,24 @@ It's very easy.
1. Include the `crs.min.js` file in your webpage. 1. Include the `crs.min.js` file in your webpage.
2. Add two `<select>` fields in the appropriate locations in your form. 2. Add two `<select>` fields in the appropriate locations in your form.
3. Give the country field a class of `crs-country`. 3. Give the country field a class of `crs-country`.
4. Give the region field a class of `crs-country`. 4. Now we need to map each country field to its corresponding region field so the script knows what to update when
3. Now we need to map each country to the region field so the script knows what to update. Add an a country is selected. Add an attribute to the country dropdown: `data-region-id="ABC"` where ABC is any string. Now
attribute to the country dropdown: `data="crsX"` where X is any number (e.g. start with 1). Give the region dropdown a Give the region dropdown a **id** of "ABC".
**class** of "crxX" where X is the same number you just picked. 5. That's it! You're done.
But here's a few more tips for further configuration.
#### Default "Please select" Values #### Default "Please select" Values
If you want to add default "Please select" options to either the country or region fields, just go ahead and add it If you want to add default "Please select" options to either the country or region fields, just go ahead and add it
directly in the markup. The script will **append** the country and region `<option>` fields - not overwrite them. directly in the markup. The script will **append** the country and region `<option>` fields - not overwrite them.
#### Styling
If you didn't add a default value for the region field, you may notice that it looks pretty pretty crumby. So to style
it, just add the following CSS: `.yourField { width: 100px; }`
#### Adding default values for each field #### Adding default values for each field
If your form is used for people returning to it (e.g. "Edit Contact Info" or whatever), you'll need the country and If your form is used for people returning to it (e.g. "Edit Contact Info" or whatever), you'll need the country and
region fields to be prefilled with the appropriate value on page load. To do that, just add a `data-default-value=""` attribute region fields to be prefilled with the appropriate value on page load. To do that, just add a `data-default-value=""`
to each element containing the country / region value last saved. Note: the region value will only ever be populated if the attribute to each element containing the country / region value last saved. Note: the region value will only ever be
country field is as well. populated if the country field is as well.
### List of data-* attributes ### List of data-* attributes
@ -69,6 +65,9 @@ and behaviour.
- `data-region-id` - required. This should contain the ID of the region field that it's being mapped to. - `data-region-id` - required. This should contain the ID of the region field that it's being mapped to.
- `data-default-option` - optional. Default: "Select country". This determines the default, blank option display value. - `data-default-option` - optional. Default: "Select country". This determines the default, blank option display value.
- `data-default-value` - optional. The default selected value in the country dropdown (e.g. "Canada") - `data-default-value` - optional. The default selected value in the country dropdown (e.g. "Canada")
- `data-value="2-char"` - optional. The default behaviour is for the value attributes of the country dropdown options
to be the full country name. If you'd rather use a 2-char code, add this attribute. Note: the 2-char codes are **mostly**
ISO standard 2-char country codes, but not all. They are, however, unique across the dataset.
##### region fields ##### region fields
- `data-blank-option` - before the user selects a country, there's a single <option> displayed which by default is the - `data-blank-option` - before the user selects a country, there's a single <option> displayed which by default is the