grunt
This commit is contained in:
		
							parent
							
								
									a566a556f8
								
							
						
					
					
						commit
						ffd1332a8f
					
				
							
								
								
									
										24
									
								
								README.md
									
									
									
									
									
								
							
							
						
						
									
										24
									
								
								README.md
									
									
									
									
									
								
							@ -1,36 +1,36 @@
 | 
				
			|||||||
## country-region-dropdowns
 | 
					## country-region-dropdowns
 | 
				
			||||||
 | 
					
 | 
				
			||||||
A common thing you often see in forms is a country dropdown which populates a second region field when a country is
 | 
					A common thing you often see in forms is a country dropdown which changes the contents of a second region field
 | 
				
			||||||
selected. It's super easy to do this, but requires a lot of leg work tracking down the data and rigging it all up
 | 
					when a country is selected. It's super easy to do this, but requires a lot of leg work tracking down the data and
 | 
				
			||||||
in your form. So this script does exactly that - and gives you a few options to cover the most likely scenarios you
 | 
					rigging it all up in your form. This script let's you set that all up automatically without having to run any custom
 | 
				
			||||||
may need to handle.
 | 
					javascript.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
The script comes in two versions:
 | 
					The script comes in two flavours:
 | 
				
			||||||
- standalone script (no dependencies, just plain JS) - **10KB**
 | 
					- standalone script (no dependencies, just plain JS) - **10KB**
 | 
				
			||||||
- a jQuery-dependent version (slightly smaller) - **8KB**
 | 
					- a jQuery-dependent version (slightly smaller) - **8KB**
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### Features
 | 
					### Features
 | 
				
			||||||
 | 
					
 | 
				
			||||||
- Lets you define an optional "please select" field for each (with whatever language you want).
 | 
					- Lets you customize the default "Please select" field for each country/region with whatever language you want.
 | 
				
			||||||
- Lets you specify a default value for each field.
 | 
					- Lets you specify a default value for each field.
 | 
				
			||||||
- Lets you customize the appearance and value of the country field ("Canada" or "CA").
 | 
					- Lets you customize the appearance and value of the country field ("Canada" or "CA") - they can be different, if desired
 | 
				
			||||||
- Lets you have as many country-region fields as you need in your page.
 | 
					(e.g. 2 char code for saving to database; full name for displaying purposes).
 | 
				
			||||||
- The standalone version has no dependencies on other any libs (jQuery etc).
 | 
					- Lets you have as many country-region-mapped fields as you need in your page.
 | 
				
			||||||
 | 
					- The standalone version has no dependencies on other any libs (jQuery etc) and you can include the JS file anywhere you want
 | 
				
			||||||
 | 
					(head/foot).
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### Example
 | 
					### Example
 | 
				
			||||||
 | 
					
 | 
				
			||||||
Here's an example page that shows a few different ways it can be used.
 | 
					Here's an example page that shows a few different ways it can be used.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
- Example page
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
### How to Use
 | 
					### How to Use
 | 
				
			||||||
 | 
					
 | 
				
			||||||
It's very easy.
 | 
					It's very easy.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
1. Include the `country-region-selector.min.js' file in your webpage.
 | 
					1. Include the `country-region-selector.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. Give the region field a class of `crs-country`.
 | 
				
			||||||
 | 
				
			|||||||
							
								
								
									
										15
									
								
								gruntfile.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										15
									
								
								gruntfile.js
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,15 @@
 | 
				
			|||||||
 | 
					module.exports = function(grunt) {
 | 
				
			||||||
 | 
						"use strict";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						// load what we need
 | 
				
			||||||
 | 
						grunt.loadNpmTasks('grunt-template');
 | 
				
			||||||
 | 
						grunt.loadNpmTasks('grunt-contrib-uglify');
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						var config = {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						grunt.initConfig(config);
 | 
				
			||||||
 | 
						grunt.registerTask('default', ['uglify']);
 | 
				
			||||||
 | 
						grunt.registerTask('generate', ['uglify']);
 | 
				
			||||||
 | 
					};
 | 
				
			||||||
@ -22,6 +22,7 @@
 | 
				
			|||||||
    "url": "https://github.com/benkeen/country-region-dropdowns/issues"
 | 
					    "url": "https://github.com/benkeen/country-region-dropdowns/issues"
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  "devDependencies": {
 | 
					  "devDependencies": {
 | 
				
			||||||
    "grunt": "~0.4.4"
 | 
					    "grunt": "~0.4.4",
 | 
				
			||||||
 | 
					    "grunt-contrib-uglify": "^0.4.0"
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
				
			|||||||
@ -336,7 +336,6 @@
 | 
				
			|||||||
		}
 | 
							}
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					 | 
				
			||||||
	// when the page has loaded, run our init function
 | 
						// when the page has loaded, run our init function
 | 
				
			||||||
	_contentLoaded(window, _init);
 | 
						_contentLoaded(window, _init);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user