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.
2. Add two `<select>` fields in the appropriate locations in your form.
3. Give the country field a class of `crs-country`.
4. Give the region field a class of `crs-country`.
3. Now we need to map each country to the region field so the script knows what to update. Add an
attribute to the country dropdown: `data="crsX"` where X is any number (e.g. start with 1). Give the region dropdown a
**class** of "crxX" where X is the same number you just picked.
4. Now we need to map each country field to its corresponding region field so the script knows what to update when
a country is selected. Add an attribute to the country dropdown: `data-region-id="ABC"` where ABC is any string. Now
Give the region dropdown a **id** of "ABC".
5. That's it! You're done.
But here's a few more tips for further configuration.
#### 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
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
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
to each element containing the country / region value last saved. Note: the region value will only ever be populated if the
country field is as well.
region fields to be prefilled with the appropriate value on page load. To do that, just add a `data-default-value=""`
attribute to each element containing the country / region value last saved. Note: the region value will only ever be
populated if the country field is as well.
### 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-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-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
- `data-blank-option` - before the user selects a country, there's a single <option> displayed which by default is the