WebSVN - Integrator Subversion - Blame - Rev 1 - /DOCUMENTOS E ANALISE/telas/assets/global/plugins/uniform/README.md

Rev	Author	Line No.	Line
1	espaco	1	Uniform
		2	=======
		3
		4	Sexy form elements with jQuery. Now with HTML5 attributes!
		5
		6	Version 2.1.1
		7
		8	Works well with jQuery 1.6+, but we've received patches and heard that this works with jQuery 1.3.
		9
		10	Licensed under the [MIT License](http://www.opensource.org/licenses/mit-license.php)
		11
		12
		13	Installation
		14	------------
		15
		16	Installation of Uniform is quite simple. First, make sure you have jQuery installed. Then you’ll want to link to the jquery.uniform.js file and uniform.default.css in the head area of your page. Here's what your `<head>` tag contents should probably contain:
		17
		18	<!-- Make sure your CSS file is listed before jQuery -->
		19	<link rel="stylesheet" href="uniform.default.css" media="screen" />
		20	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
		21	<script src="jquery.uniform.js"></script>
		22
		23	This relies upon a copy of jquery.uniform.js, uniform.default.css and the various images all being available on your webserver.
		24
		25
		26	Basic usage
		27	-----------
		28
		29	Using Uniform is easy. Simply tell it what elements to style:
		30
		31	// Style all <select> elements
		32	$("select").uniform();
		33
		34	To "uniform" all possible form elements, just do something like this. Things that can't get styled appropriately will be skipped by Uniform.
		35
		36	// Style everything
		37	$("select, input, a.button, button").uniform();
		38
		39	You can exclude elements too by using more jQuery selectors or methods:
		40
		41	// Avoid styling some elements
		42	$("select").not(".skip_these").uniform(); // Method 1
		43	$('select[class!="skip_these"]').uniform(); // Method 2
		44
		45	A complete set of tags in the HEAD section of your site can therefore look like this:
		46
		47	<!-- Make sure your CSS file is listed before jQuery -->
		48	<link rel="stylesheet" href="uniform.default.css" media="screen" />
		49	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
		50	<script src="jquery.uniform.js"></script>
		51	<script type='text/javascript'>
		52	// On load, style typical form elements
		53	$(function () {
		54	$("select, input, button").uniform();
		55	});
		56	</script>
		57
		58
		59	Extra parameters
		60	----------------
		61
		62	You can pass in extra parameters to control certain aspects of Uniform. To pass in parameters, use syntax like what is seen here. This only changes the settings for the elements that are actually uniformed in this particular call.
		63
		64	$("select").uniform({
		65	param1: value,
		66	param2: value,
		67	param3: value
		68	});
		69
		70	There is a separate listing of global defaults. You access them by using the `defaults` property. Note: This property name changed in v2.0.
		71
		72	$.uniform.defaults.checkedClass = "uniformCheckedClass";
		73	$.uniform.defaults.fileBtnHtml = "Pick a file";
		74
		75	Uniform v1.x had a bug where setting values in the call to `.uniform()` also potentially reset the defaults and redrew other uniformed objects with new settings. As of version 2.0.0 the global defaults are now completely separate from the settings passed to every `.uniform()` call. Extra parameters defined when instantiating Uniform are not global and can't be recalled from `$.uniform.defaults` later.
		76
		77	### activeClass (string)
		78
		79	Default: "active"
		80
		81	Sets the class given to elements when they are active (pressed).
		82
		83	$("select").uniform({activeClass: 'myActiveClass'});
		84
		85	### autoHide (boolean)
		86
		87	Default: true
		88
		89	If this option is set to true, Uniform will hide the new elements if the existing elements are currently hidden using `display: none`.
		90
		91	If you want to show a select or checkbox you'll need to show the new Uniform div instead of the child element.
		92
		93	### buttonClass (string)
		94
		95	Default: "button"
		96
		97	Sets the class given to a button that's been Uniformed
		98
		99	$("input[type=button]").uniform({buttonClass: 'myBtnClass'});
		100
		101	### checkboxClass (string)
		102
		103	Default: "checker"
		104
		105	Sets the class given to the wrapper div for checkbox elements.
		106
		107	$(":checkbox").uniform({checkboxClass: 'myCheckClass'});
		108
		109	### checkedClass (string)
		110
		111	Default: "checked"
		112
		113	Sets the class given to elements when they are checked (radios and checkboxes).
		114
		115	$(":radio, :checkbox").uniform({checkedClass: 'myCheckedClass'});
		116
		117	### disabledClass (string)
		118
		119	Default: "disabled"
		120
		121	Sets the class given to elements when they are disabled.
		122
		123	$("select").uniform({disabledClass: 'myDisabledClass'});
		124
		125	### eventNamespace (string)
		126
		127	Default: ".uniform"
		128
		129	Binds events using this namespace with jQuery. Useful if you want to unbind them later. Shouldn't probably need to be changed unless it conflicts with other code.
		130
		131	$("select").uniform({eventNamespace: '.uniformEvents'});
		132
		133	### fileButtonClass (string)
		134
		135	Default: "action"
		136
		137	Sets the class given to div inside a file upload container that acts as the "Choose file" button.
		138
		139	$(":file").uniform({fileButtonClass: 'myFileBtnClass'});
		140
		141	### fileButtonHtml (string)
		142
		143	Default: "Choose File"
		144
		145	Sets the text written on the action button inside a file upload input.
		146
		147	$(":file").uniform({fileButtonHtml: 'Choose …'});
		148
		149	### fileClass (string)
		150
		151	Default: "uploader"
		152
		153	Sets the class given to the wrapper div for file upload elements.
		154
		155	$(":file").uniform({fileClass: 'myFileClass'});
		156
		157	### fileDefaultHtml (string)
		158
		159	Default: "No file selected"
		160
		161	Sets the text written in the filename div of a file upload input when there is no file selected.
		162
		163	$(":file").uniform({fileDefaultHtml: 'Select a file please'});
		164
		165	### filenameClass (string)
		166
		167	Default: "filename"
		168
		169	Sets the class given to div inside a file upload container that spits out the filename.
		170
		171	$(":file").uniform({filenameClass: 'myFilenameClass'});
		172
		173	### focusClass (string)
		174
		175	Default: "focus"
		176
		177	Sets the class given to elements when they are focused.
		178
		179	$("select").uniform({focusClass: 'myFocusClass'});
		180
		181	### hoverClass (string)
		182
		183	Default: "hover"
		184
		185	Sets the class given to elements when they are currently hovered.
		186
		187	$("select").uniform({hoverClass: 'myHoverClass'});
		188
		189	### idPrefix (string)
		190
		191	Default: "uniform"
		192
		193	If useID is set to true, this string is prefixed to element ID’s and attached to the container div of each Uniformed element. If you have a checkbox with the ID of "remember-me" the container div would have the ID "uniform-remember-me".
		194
		195	$("select").uniform({idPrefix: 'container'});
		196
		197	### inputAddTypeAsClass (boolean)
		198
		199	Default: true
		200
		201	When true, `<input>` elements will get a class applied that is equal to their "type" attribute.
		202
		203	$("input").uniform({inputAddTypeAsClass: true});
		204
		205	### inputClass (string)
		206
		207	Default: "uniform-input"
		208
		209	Applies this class to all input elements when they get uniformed.
		210
		211	$("input").uniform({inputClass: "inputElement"});
		212
		213	### radioClass (string)
		214
		215	Default: "radio"
		216
		217	Sets the class given to the wrapper div for radio elements.
		218
		219	$(":radio").uniform({radioClass: 'myRadioClass'});
		220
		221	### resetDefaultHtml (string)
		222
		223	Default: "Reset"
		224
		225	This text is what's shown on form reset buttons. It is very similar to submitDefaultHtml.
		226
		227	$("input[type='reset']).uniform({resetDefaultHtml: "Clear"});
		228
		229	### resetSelector (boolean/string)
		230
		231	Default: false
		232
		233	This parameter allows you to use a jQuery-style selector to point to a "reset" button in your form if you have one. Use false if you have no "reset" button, or a selector string that points to the reset button if you have one.
		234
		235	$("select").uniform({resetSelector: 'input[type="reset"]'});
		236
		237	### selectAutoWidth (boolean)
		238
		239	Default: true
		240
		241	If this option is set to true, Uniform will try to fit the select width to the actual content. When false, it forces the selects to all be the width that was specified in the theme.
		242
		243	When using auto widths, the size of the element is detected, then wrapped by Uniform and expanded to fit the wrapping.
		244
		245	If you want to specify a size of a select element and then have Uniform wrap it appropriately, there will be some difficulty. The size of the element needs to get detected and then will be changed by Uniform. For this to happen, it is suggested you do one of these solutions when you have issues.
		246
		247	* Set a custom inline width for the element (`<select style="width:XXpx">`)
		248	* Use two css rules; `select { width: XXpx }` and `.selector select { width: 100% }`
		249
		250	If the select is empty and later populated via JavaScript, you can do one the following:
		251
		252	* Set a custom inline width for the element (`<select style="width:XXpx">`)
		253	* Uniform the element after it was loaded with options
		254	* Use `$('select').uniform.restore().uniform()` to reapply Uniform to the selects that change
		255
		256	### selectClass (string)
		257
		258	Default: "selector"
		259
		260	Sets the class given to the wrapper div for select elements, but not multiselects.
		261
		262	$("select").uniform({selectClass: 'mySelectClass'});
		263
		264	### selectMultiClass (string)
		265
		266	Default: "uniform-multiselect"
		267
		268	Sets the class given to the wrapper div for select elements that are multiselects.
		269
		270	$("select").uniform({selectMultiClass: 'myMultiSelectClass'});
		271
		272	### submitDefaultHtml (string)
		273
		274	Default: "Submit"
		275
		276	This text is what's shown on form submit buttons. It is very similar to resetDefaultHtml.
		277
		278	$("input[type='submit']).uniform({resetDefaultHtml: "Submit Form"});
		279
		280	### textareaClass (string)
		281
		282	Default: "uniform"
		283
		284	The class that is applied to textarea elements.
		285
		286	$("textarea").uniform({textareaClass: "myTextareaClass"});
		287
		288	### useID (boolean)
		289
		290	Default: true
		291
		292	If true, sets an ID on the container div of each form element. The ID is a prefixed version of the same ID of the form element.
		293
		294	$("select").uniform({useID: false});
		295
		296	### wrapperClass (string)
		297
		298	Default: null
		299
		300	When uniforming, the top level element that wraps the input is given this class. When elements would not normally be given a wrapper element, this option will create a wrapper element anyway. This can really help with running multiple themes on a single page.
		301
		302	$('input.blue').uniform({wrapperClass: "blueTheme"});
		303	$('input').uniform({wrapperClass: "defaultTheme"});
		304
		305
		306	Additional Functions And Properties
		307	-----------------------------------
		308
		309	In addition to the parameters, there are a couple of other ways you can interact with Uniform.
		310
		311	### $.uniform.update([elem/selector string]);
		312
		313	If you need to change values on the form dynamically you must tell Uniform to update that element’s style. Fortunately, it’s very simple. Just call this function, and Uniform will do the rest.
		314
		315	$.uniform.update("#myUpdatedCheckbox");
		316
		317	If you don't mind updating all Uniformed elements or just don’t specifically know which element to update, you can just leave out the parameter (see below) and Uniform will update all Uniformed elements on the page:
		318
		319	$.uniform.update();
		320
		321	### $.uniform.restore([elem/selector string]);
		322
		323	If you want to "un-uniform" something, simply call this function. It will remove the inline styles, extra dom elements, and event handlers, effectively restoring the element to it's previous state.
		324
		325	$.uniform.restore("select");
		326
		327	### $.uniform.elements[]
		328
		329	You can get an array of all the elements that have been Uniformed at any time using this public variable. I don't advise changing the contents!
		330
		331	var uniforms = $.uniform.elements;
		332
		333
		334	Customizing CSS
		335	---------------
		336
		337	To edit the CSS of Uniform it is highly recommended to not edit the theme files, but to override them using CSS. Make sure your CSS file comes after the Uniform theme css file in the HEAD section.
		338
		339	It's common to want to resize the selects or other elements. The best way is to set the width property on the div element, span element and the form element itself. Resizing "select" lists is a bit tougher as you need to change the line height. I suggest looking at the _base theme's SCSS file to see where the various width and height variables are used.
		340
		341	If you'd like to create your own theme, take a peek at theme-kit/README.md. It's on [github](https://github.com/pixelmatrix/uniform) and included in the [theme kit](http://uniformjs.org/downloads/theme-kit.zip).
		342
		343
		344	Tips & Tricks
		345	-------------
		346
		347	Uniform is supposed to be pretty simple, but there are a few things that can be tricky. Here are some tips that may make your experience simpler:
		348
		349	* Remember to change the CSS classes in the theme if you change the parameters for elements’ classes. This can be tedious work, but if you don’t do it, it’s not going to look correct. Find and Replace is your friend.
		350
		351	* Uniform cannot automatically sniff out dynamic value changes. If you make changes to elements in JavaScript or using a reset button of some kind, remember to call $.uniform.update(); to sync the changes with Uniform. See [Issue #270](https://github.com/pixelmatrix/uniform/issues/270) for the little bit of code you will need.
		352
		353	* Likewise, when you add elements to the DOM, perhaps via AJAX, and they need to get styled, you will need to use $('#newElement').uniform() on it so the styling is applied.
		354
		355	* Uniform is disabled in IE6. It’s not possible to fix due to the way IE6 handles form elements. If you care about IE6 users, give it a quick look to make sure your "naked" form elements look alright in there.
		356
		357	* There is a bug in Safari 5.1 that will cause the web rendering process to crash when you use custom fonts. For more information, see [Issue #183](https://github.com/pixelmatrix/uniform/issues/183).
		358
		359	* With IE 7-9, sometimes the "change" event doesn't get fired or doesn't get triggered at the right time. When we detect a change, Uniform may submit its own "change" event on the element. See [Issue #152](https://github.com/pixelmatrix/uniform/issues/152) and [Issue #238](https://github.com/pixelmatrix/uniform/issues/238).
		360
		361	* With IE9, you may have problems with some fonts on your site. See [Issue #226](https://github.com/pixelmatrix/uniform/issues/226) if you mysteriously see a blank page or blank form elements. The fonts in Uniform have been arranged to work around this, but custom themes may not work properly.
		362
		363	* If you have ideas, or bugs, please post them in [GitHub](https://github.com/pixelmatrix/uniform). We rely on our users' for improvement ideas and bug reports. Without your participation, Uniform will stay static.
		364
		365	* If you are having problems with automatically sized select elements in Firefox, double check and ensure your CSS files are listed before jQuery, Uniform and your code that uniforms the form elements. Also check the selectAutoWidth property's documentation.
		366
		367
		368	Upgrading To 2.0 And Later
		369	--------------------------
		370
		371	Your sprite map will now support many new things and will need to be updated. If you use custom backgrounds that are not in the sprite map, those will need updating as well.
		372
		373	The uniform.options object was renamed to uniform.defaults since they are the default options. Other properties were renamed to be consistent or have less ambiguous names, such as `fileBtnClass` becoming `fileButtonClass`.
		374
		375	Previously, calls to update() would render all elements with the most recent set of options. This has been fixed, but may change how your page looks. Test to make sure things still render as expected.
		376
		377	$.uniform.noSelect is no longer exposed and has been updated to version 1.0.3.
		378
		379	$.uniform.restore() does not need to be global; you now can use $('#myId').uniform.restore() instead to just restore some elements. Same thing for updates.
		380
		381	The sprite changed a bit. The caps for select lists were moved to the left-hand side. Button theming was added and the file upload images were reordered to match the select list order. See the theme-kit/README.md file for further reading on this topic.
		382
		383
		384	Reporting Bugs
		385	--------------
		386
		387	It sure would be handy if you could create a test page to help illustrate bugs. When you use the <a href="https://github.com/pixelmatrix/uniform/issues">GitHub Issue Tracker</a>, you could clone this [bug template gist](https://gist.github.com/4328659) or use [this jsfiddle](http://jsfiddle.net/fidian/JNCFP/) to help illustrate your point.
		388
		389	Even if you don't do that, all sorts of feedback is welcome, but narrowing down your problem or providing an example would immediately help narrow down the problem quickly.

Subversion Repositories Integrator Subversion

(root)/DOCUMENTOS E ANALISE/telas/assets/global/plugins/uniform/README.md - Rev 1