WebSVN - Integrator Subversion - Blame - Rev 1 - /DOCUMENTOS E ANALISE/telas/templates/admin3/angularjs/views/form

Rev	Author	Line No.	Line
1	espaco	1	<!-- BEGIN PAGE BREADCRUMB -->
		2	<ul class="page-breadcrumb breadcrumb">
		3	<li>
		4	<a href="#">Home</a><i class="fa fa-circle"></i>
		5	</li>
		6	<li>
		7	<a href="#">jQuery Plugins</a><i class="fa fa-circle"></i>
		8	</li>
		9	<li class="active">
		10	Form Tools
		11	</li>
		12	</ul>
		13	<!-- END PAGE BREADCRUMB -->
		14
		15	<!-- BEGIN MAIN CONTENT -->
		16	<div class="note note-success note-bordered">
		17	<p>
		18	With AngularJS you stil can use any jQuery plugin comes with Metronic.
		19	The jQuery plugins can be used as a standalone component or integrated with AngularJS by using directives.
		20	</p>
		21	<p>
		22	For more info please check this blog <a target="_blank" href="https://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/">An approach to use jQuery Plugins with AngularJS</a>
		23	</p>
		24	</div>
		25	<div class="row">
		26	<div class="col-md-12">
		27	<!-- BEGIN PORTLET-->
		28	<div class="portlet box yellow-crusta">
		29	<div class="portlet-title">
		30	<div class="caption">
		31	<i class="fa fa-gift"></i>Twitter Auto Complete(typeahead.js)
		32	</div>
		33	<div class="tools">
		34	<a href="javascript:;" class="collapse">
		35	</a>
		36	<a href="#" data-toggle="modal" class="config">
		37	</a>
		38	<a href="javascript:;" class="reload">
		39	</a>
		40	<a href="javascript:;" class="remove">
		41	</a>
		42	</div>
		43	</div>
		44	<div class="portlet-body form">
		45	<form action="#" id="form-username" class="form-horizontal form-bordered">
		46	<div class="form-group">
		47	<label class="col-sm-3 control-label">Basic Auto Complete</label>
		48	<div class="col-sm-4">
		49	<div class="input-group">
		50	<span class="input-group-addon">
		51	<i class="fa fa-user"></i>
		52	</span>
		53	<input type="text" id="typeahead_example_1" name="typeahead_example_1" class="form-control"/>
		54	</div>
		55	<p class="help-block">
		56	E.g: metronic, keenthemes.<br>
		57	<span class="label label-success label-sm">
		58	Learn more: </span>
		59	<a target="_blank" href="http://twitter.github.io/typeahead.js/">
		60	http://twitter.github.io/typeahead.js/ </a>
		61	</p>
		62	</div>
		63	</div>
		64	<div class="form-group">
		65	<label class="col-sm-3 control-label">Country Auto Complete</label>
		66	<div class="col-sm-4">
		67	<div class="input-group">
		68	<span class="input-group-addon">
		69	<i class="fa fa-search"></i>
		70	</span>
		71	<input type="text" id="typeahead_example_2" name="typeahead_example_2" class="form-control"/>
		72	</div>
		73	<p class="help-block">
		74	E.g: USA, Malaysia. Prefetch from JSON source</code>
		75	</p>
		76	</div>
		77	</div>
		78	<div class="form-group">
		79	<label class="col-sm-3 control-label">Custom Template</label>
		80	<div class="col-sm-4">
		81	<div class="input-group">
		82	<span class="input-group-addon">
		83	<i class="fa fa-cogs"></i>
		84	</span>
		85	<input type="text" id="typeahead_example_3" name="typeahead_example_3" class="form-control"/>
		86	</div>
		87	<p class="help-block">
		88	Uses a precompiled template to customize look of suggestion.</code>
		89	</p>
		90	</div>
		91	</div>
		92	<div class="form-group ">
		93	<label class="col-sm-3 control-label">Multiple Sections with Headers</label>
		94	<div class="col-sm-4">
		95	<div class="input-group">
		96	<span class="input-group-addon">
		97	<i class="fa fa-check"></i>
		98	</span>
		99	<input type="text" id="typeahead_example_4" name="typeahead_example_4" class="form-control"/>
		100	</div>
		101	<p class="help-block">
		102	Two datasets that are prefetched, stored, and searched on the client. Highlighting is enabled.
		103	</p>
		104	</div>
		105	</div>
		106	<div class="form-group last">
		107	<label class="control-label col-md-3">Modal</label>
		108	<div class="col-md-4">
		109	<a href="#" data-target="#myModal_autocomplete" role="button" class="btn red" data-toggle="modal">
		110	View in Modal </a>
		111	</div>
		112	</div>
		113	<div class="form-actions">
		114	<div class="row">
		115	<div class="col-md-offset-3 col-md-9">
		116	<button type="submit" class="btn purple"><i class="fa fa-check"></i> Submit</button>
		117	<button type="button" class="btn default">Cancel</button>
		118	</div>
		119	</div>
		120	</div>
		121	</form>
		122	<div id="myModal_autocomplete" class="modal fade" role="dialog" aria-hidden="true">
		123	<div class="modal-dialog">
		124	<div class="modal-content">
		125	<div class="modal-header">
		126	<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
		127	<h4 class="modal-title">Radio Switch in Modal</h4>
		128	</div>
		129	<div class="modal-body form">
		130	<form action="#" class="form-horizontal form-row-seperated">
		131	<div class="form-group">
		132	<label class="col-sm-4 control-label">Basic Auto Complete</label>
		133	<div class="col-sm-8">
		134	<div class="input-group">
		135	<span class="input-group-addon">
		136	<i class="fa fa-user"></i>
		137	</span>
		138	<input type="text" id="typeahead_example_modal_1" name="typeahead_example_modal_1" class="form-control"/>
		139	</div>
		140	<p class="help-block">
		141	E.g: metronic, keenthemes.<br>
		142	<span class="label label-success label-sm">
		143	Learn more: </span>
		144	<a target="_blank" href="http://twitter.github.io/typeahead.js/">
		145	http://twitter.github.io/typeahead.js/ </a>
		146	</p>
		147	</div>
		148	</div>
		149	<div class="form-group">
		150	<label class="col-sm-4 control-label">Country Auto Complete</label>
		151	<div class="col-sm-8">
		152	<div class="input-group">
		153	<span class="input-group-addon">
		154	<i class="fa fa-search"></i>
		155	</span>
		156	<input type="text" id="typeahead_example_modal_2" name="typeahead_example_modal_2" class="form-control"/>
		157	</div>
		158	<p class="help-block">
		159	E.g: USA, Malaysia. Prefetch from JSON source</code>
		160	</p>
		161	</div>
		162	</div>
		163	<div class="form-group">
		164	<label class="col-sm-4 control-label">Custom Template</label>
		165	<div class="col-sm-8">
		166	<div class="input-group">
		167	<span class="input-group-addon">
		168	<i class="fa fa-cogs"></i>
		169	</span>
		170	<input type="text" id="typeahead_example_modal_3" name="typeahead_example_modal_3" class="form-control"/>
		171	</div>
		172	<p class="help-block">
		173	Uses a precompiled template to customize look of suggestion.</code>
		174	</p>
		175	</div>
		176	</div>
		177	<div class="form-group last">
		178	<label class="col-sm-4 control-label">Multiple Sections with Headers</label>
		179	<div class="col-sm-8">
		180	<div class="input-group">
		181	<span class="input-group-addon">
		182	<i class="fa fa-check"></i>
		183	</span>
		184	<input type="text" id="typeahead_example_modal_4" name="typeahead_example_modal_4" class="form-control"/>
		185	</div>
		186	<p class="help-block">
		187	Two datasets that are prefetched, stored, and searched on the client. Highlighting is enabled.
		188	</p>
		189	</div>
		190	</div>
		191	</form>
		192	</div>
		193	<div class="modal-footer">
		194	<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		195	<button type="button" class="btn btn-primary"><i class="fa fa-check"></i> Save changes</button>
		196	</div>
		197	</div>
		198	</div>
		199	</div>
		200	</div>
		201	</div>
		202	<!-- END PORTLET-->
		203	</div>
		204	</div>
		205	<div class="row">
		206	<div class="col-md-12">
		207	<!-- BEGIN PORTLET-->
		208	<div class="portlet box blue-hoki">
		209	<div class="portlet-title">
		210	<div class="caption">
		211	<i class="fa fa-gift"></i>Form Tools
		212	</div>
		213	<div class="tools">
		214	<a href="javascript:;" class="collapse">
		215	</a>
		216	<a href="#" data-toggle="modal" class="config">
		217	</a>
		218	<a href="javascript:;" class="reload">
		219	</a>
		220	<a href="javascript:;" class="remove">
		221	</a>
		222	</div>
		223	</div>
		224	<div class="portlet-body form">
		225	<!-- BEGIN FORM-->
		226	<form action="#" id="form-username" class="form-horizontal form-bordered">
		227	<div class="form-body">
		228	<div class="form-group">
		229	<label class="control-label col-md-3">Username #1</label>
		230	<div class="col-md-4">
		231	<div class="input-group" style="text-align:left">
		232	<input type="text" class="form-control" name="username1" id="username1_input">
		233	<span class="input-group-btn">
		234	<a href="javascript:;" class="btn green" id="username1_checker">
		235	<i class="fa fa-check"></i> Check </a>
		236	</span>
		237	</div>
		238	<div class="help-block">
		239	Type a username(E.g: user1, user2) and check its availability.
		240	</div>
		241	</div>
		242	</div>
		243	<div class="form-group">
		244	<label class="control-label col-md-3">Username #2</label>
		245	<div class="col-md-4">
		246	<div class="input-icon right">
		247	<input type="text" class="form-control" name="username1" id="username2_input">
		248	</div>
		249	<div class="help-block">
		250	Type a username(E.g: user1, user2) and check its availability on focus lost
		251	</div>
		252	</div>
		253	</div>
		254	<div class="form-group last password-strength">
		255	<label class="control-label col-md-3">Password</label>
		256	<div class="col-md-4">
		257	<input type="text" class="form-control" name="password" id="password_strength">
		258	<span class="help-block">
		259	Type a password to check its strength </span>
		260	</div>
		261	</div>
		262	</div>
		263	<div class="form-actions">
		264	<div class="row">
		265	<div class="col-md-offset-3 col-md-9">
		266	<button type="submit" class="btn purple"><i class="fa fa-check"></i> Submit</button>
		267	<button type="button" class="btn default">Cancel</button>
		268	</div>
		269	</div>
		270	</div>
		271	</form>
		272	<!-- END FORM-->
		273	</div>
		274	</div>
		275	<!-- END PORTLET-->
		276	</div>
		277	</div>
		278	<div class="row">
		279	<div class="col-md-12">
		280	<!-- BEGIN PORTLET-->
		281	<div class="portlet box purple">
		282	<div class="portlet-title">
		283	<div class="caption">
		284	<i class="fa fa-gift"></i>Bootstrap Input MaxLength
		285	</div>
		286	<div class="tools">
		287	<a href="javascript:;" class="collapse">
		288	</a>
		289	<a href="#" data-toggle="modal" class="config">
		290	</a>
		291	<a href="javascript:;" class="reload">
		292	</a>
		293	<a href="javascript:;" class="remove">
		294	</a>
		295	</div>
		296	</div>
		297	<div class="portlet-body form">
		298	<!-- BEGIN FORM-->
		299	<form action="#" class="form-horizontal form-bordered">
		300	<div class="form-body">
		301	<div class="form-group">
		302	<label class="control-label col-md-3">Default usage</label>
		303	<div class="col-md-4">
		304	<input type="text" class="form-control" maxlength="25" name="defaultconfig" id="maxlength_defaultconfig">
		305	<span class="help-block">
		306	Maxlength is 25 chars. The badge will show up by default when the remaining chars are 10 or less. </span>
		307	</div>
		308	</div>
		309	<div class="form-group">
		310	<label class="control-label col-md-3">Change the threshold value</label>
		311	<div class="col-md-4">
		312	<input type="text" class="form-control" maxlength="25" name="defaultconfig" id="maxlength_thresholdconfig">
		313	<span class="help-block">
		314	Maxlength is 25 chars. Do you want the badge to show up when there are 20 chars or less? Use the threshold option: <code>threshold: 20</code>
		315	</span>
		316	</div>
		317	</div>
		318	<div class="form-group">
		319	<label class="control-label col-md-3">Advance usage</label>
		320	<div class="col-md-9">
		321	<input type="text" class="form-control" maxlength="25" name="defaultconfig" id="maxlength_alloptions">
		322	<span class="help-block">
		323	This is a complete example where all the options configured for the bootstrap-maxlength counter are setted. Please note: if the <code>alwaysShow</code> option is enabled, the <code>threshold</code>
		324	</span>
		325	</div>
		326	</div>
		327	<div class="form-group">
		328	<label class="control-label col-md-3">Textarea</label>
		329	<div class="col-md-9">
		330	<textarea id="maxlength_textarea" class="form-control" maxlength="225" rows="2" placeholder="This textarea has a limit of 225 chars."></textarea>
		331	<span class="help-block">
		332	Bootstrap maxlength supports textarea as well as inputs. Even on old IE. </span>
		333	</div>
		334	</div>
		335	<div class="form-group">
		336	<label class="control-label col-md-3">Position</label>
		337	<div class="col-md-9">
		338	<input type="text" class="form-control" maxlength="25" name="defaultconfig" id="maxlength_placement">
		339	<span class="help-block">
		340	The field counter can be positioned at the top, bottom, left or right. You can also place the maxlength indicator on the corners: <code>bottom-right</code>, <code>top-right</code>, <code>top-left</code>, <code>bottom-left</code> and <code>centered-right</code>. All you need to do is specify the <code>placement</code> option, with one of those strings. </span>
		341	</div>
		342	</div>
		343	</div>
		344	<div class="form-actions">
		345	<div class="row">
		346	<div class="col-md-offset-3 col-md-9">
		347	<button type="submit" class="btn green"><i class="fa fa-check"></i> Submit</button>
		348	<button type="button" class="btn default">Cancel</button>
		349	</div>
		350	</div>
		351	</div>
		352	</form>
		353	<!-- END FORM-->
		354	</div>
		355	</div>
		356	<!-- END PORTLET-->
		357	</div>
		358	</div>
		359	<div class="row">
		360	<div class="col-md-12">
		361	<!-- BEGIN PORTLET-->
		362	<div class="portlet box green-meadow">
		363	<div class="portlet-title">
		364	<div class="caption">
		365	<i class="fa fa-gift"></i>Spinners
		366	</div>
		367	<div class="tools">
		368	<a href="javascript:;" class="collapse">
		369	</a>
		370	<a href="#" data-toggle="modal" class="config">
		371	</a>
		372	<a href="javascript:;" class="reload">
		373	</a>
		374	<a href="javascript:;" class="remove">
		375	</a>
		376	</div>
		377	</div>
		378	<div class="portlet-body form">
		379	<!-- BEGIN FORM-->
		380	<form action="#" class="form-horizontal form-bordered">
		381	<div class="form-body">
		382	<div class="form-group">
		383	<label class="control-label col-md-3">Spinner 1</label>
		384	<div class="col-md-9">
		385	<div id="spinner1">
		386	<div class="input-group input-small">
		387	<input type="text" class="spinner-input form-control" maxlength="3" readonly>
		388	<div class="spinner-buttons input-group-btn btn-group-vertical">
		389	<button type="button" class="btn spinner-up btn-xs blue">
		390	<i class="fa fa-angle-up"></i>
		391	</button>
		392	<button type="button" class="btn spinner-down btn-xs blue">
		393	<i class="fa fa-angle-down"></i>
		394	</button>
		395	</div>
		396	</div>
		397	</div>
		398	<span class="help-block">
		399	basic example </span>
		400	</div>
		401	</div>
		402	<div class="form-group">
		403	<label class="control-label col-md-3">Spinner 2</label>
		404	<div class="col-md-9">
		405	<div id="spinner2">
		406	<div class="input-group input-small">
		407	<input type="text" class="spinner-input form-control" maxlength="3" readonly>
		408	<div class="spinner-buttons input-group-btn btn-group-vertical">
		409	<button type="button" class="btn spinner-up btn-xs red">
		410	<i class="fa fa-angle-up"></i>
		411	</button>
		412	<button type="button" class="btn spinner-down btn-xs red">
		413	<i class="fa fa-angle-down"></i>
		414	</button>
		415	</div>
		416	</div>
		417	</div>
		418	<span class="help-block">
		419	disabled state </span>
		420	</div>
		421	</div>
		422	<div class="form-group">
		423	<label class="control-label col-md-3">Spinner 3</label>
		424	<div class="col-md-9">
		425	<div id="spinner3">
		426	<div class="input-group" style="width:150px;">
		427	<input type="text" class="spinner-input form-control" maxlength="3" readonly>
		428	<div class="spinner-buttons input-group-btn">
		429	<button type="button" class="btn spinner-up default">
		430	<i class="fa fa-angle-up"></i>
		431	</button>
		432	<button type="button" class="btn spinner-down default">
		433	<i class="fa fa-angle-down"></i>
		434	</button>
		435	</div>
		436	</div>
		437	</div>
		438	<span class="help-block">
		439	with max value: 10 </span>
		440	</div>
		441	</div>
		442	<div class="form-group last">
		443	<label class="control-label col-md-3">Spinner 4</label>
		444	<div class="col-md-9">
		445	<div id="spinner4">
		446	<div class="input-group" style="width:150px;">
		447	<div class="spinner-buttons input-group-btn">
		448	<button type="button" class="btn spinner-up blue">
		449	<i class="fa fa-plus"></i>
		450	</button>
		451	</div>
		452	<input type="text" class="spinner-input form-control" maxlength="3" readonly>
		453	<div class="spinner-buttons input-group-btn">
		454	<button type="button" class="btn spinner-down red">
		455	<i class="fa fa-minus"></i>
		456	</button>
		457	</div>
		458	</div>
		459	</div>
		460	<span class="help-block">
		461	with step: 5 </span>
		462	</div>
		463	</div>
		464	</div>
		465	<div class="form-actions">
		466	<div class="row">
		467	<div class="col-md-offset-3 col-md-9">
		468	<button type="submit" class="btn green"><i class="fa fa-check"></i> Submit</button>
		469	<button type="button" class="btn default">Cancel</button>
		470	</div>
		471	</div>
		472	</div>
		473	</form>
		474	<!-- END FORM-->
		475	</div>
		476	</div>
		477	<!-- END PORTLET-->
		478	</div>
		479	</div>
		480	<div class="row">
		481	<div class="col-md-12">
		482	<!-- BEGIN PORTLET-->
		483	<div class="portlet box yellow-crusta">
		484	<div class="portlet-title">
		485	<div class="caption">
		486	<i class="fa fa-gift"></i>Bootstrap Switch
		487	</div>
		488	<div class="actions">
		489	<input type="checkbox" class="make-switch" checked data-on="success" data-off="warning">
		490	</div>
		491	</div>
		492	<div class="portlet-body form">
		493	<!-- BEGIN FORM-->
		494	<form action="#" class="form-horizontal form-bordered">
		495	<div class="form-body">
		496	<div class="form-group">
		497	<label class="control-label col-md-3">Default Sizes</label>
		498	<div class="col-md-9">
		499	<input type="checkbox" checked class="make-switch" data-size="small">
		500	<input type="checkbox" checked class="make-switch" data-size="normal">
		501	<input type="checkbox" checked class="make-switch" data-size="large">
		502	</div>
		503	</div>
		504	<div class="form-group">
		505	<label class="control-label col-md-3">Colors</label>
		506	<div class="col-md-9">
		507	<input type="checkbox" class="make-switch" checked data-on-color="primary" data-off-color="info">
		508	<input type="checkbox" class="make-switch" checked data-on-color="info" data-off-color="success">
		509	<input type="checkbox" class="make-switch" checked data-on-color="success" data-off-color="warning">
		510	<input type="checkbox" class="make-switch" checked data-on-color="warning" data-off-color="danger">
		511	<input type="checkbox" class="make-switch" checked data-on-color="danger" data-off-color="default">
		512	<input type="checkbox" class="make-switch" checked data-on-color="default" data-off-color="primary">
		513	</div>
		514	</div>
		515	<div class="form-group">
		516	<label class="control-label col-md-3">Disabled / Readonly</label>
		517	<div class="col-md-9">
		518	<input type="checkbox" checked disabled class="make-switch"/>
		519	<input type="checkbox" checked readonly class="make-switch"/>
		520	</div>
		521	</div>
		522	<div class="form-group">
		523	<label class="control-label col-md-3">Text</label>
		524	<div class="col-md-9">
		525	<input type="checkbox" class="make-switch" data-on-text="Yes" data-off-text="No">
		526	<input type="checkbox" class="make-switch" data-on-text="1" data-off-text="0">
		527	</div>
		528	</div>
		529	<div class="form-group">
		530	<label class="control-label col-md-3">Long Text</label>
		531	<div class="col-md-9">
		532	<input type="checkbox" class="make-switch" data-on-text=" External " data-off-text=" Internal ">
		533	<input type="checkbox" class="make-switch" data-on-text=" Enabled  " data-off-text=" Disabled ">
		534	</div>
		535	</div>
		536	<div class="form-group">
		537	<label class="control-label col-md-3">Label Text</label>
		538	<div class="col-md-9">
		539	<input type="checkbox" class="make-switch" checked data-on-text="TV">
		540	<input type="checkbox" class="make-switch" checked data-off-text="Signal">
		541	</div>
		542	</div>
		543	<div class="form-group">
		544	<label class="control-label col-md-3">HTML Text</label>
		545	<div class="col-md-9">
		546	<input type="checkbox" class="make-switch" checked data-on-text="<i class='fa fa-check'></i>" data-off-text="<i class='fa fa-times'></i>"> <input type="checkbox" class="make-switch" checked data-on-text="<i class='fa fa-user'></i>" data-off-text="<i class='fa fa-trash-o'></i>">
		547	</div>
		548	</div>
		549	<div class="form-group">
		550	<label class="control-label col-md-3">HTML Text Label Icon</label>
		551	<div class="col-md-9">
		552	<input type="checkbox" checked class="make-switch switch-large" data-label-icon="fa fa-fullscreen" data-on-text="<i class='fa fa-check'></i>" data-off-text="<i class='fa fa-times'></i>"> <input type="checkbox" checked class="make-switch switch-large" data-label-icon="fa fa-youtube" data-on-text="<i class='fa fa-thumbs-up'></i>" data-off-text="<i class='fa fa-thumbs-down'></i>">
		553	</div>
		554	</div>
		555	<div class="form-group">
		556	<label class="control-label col-md-3">Radio Group</label>
		557	<div class="col-md-9">
		558	<div class="margin-bottom-10">
		559	<label for="option1">Option 1</label>
		560	<input id="option1" type="radio" name="radio1" value="option1" class="make-switch switch-radio1">
		561	</div>
		562	<div class="margin-bottom-10">
		563	<label for="option2">Option 2</label>
		564	<input id="option2" type="radio" name="radio1" value="option2" class="make-switch switch-radio1">
		565	</div>
		566	<div class="margin-bottom-10">
		567	<label for="option3">Option 3</label>
		568	<input id="option3" type="radio" name="radio1" value="option3" class="make-switch switch-radio1">
		569	</div>
		570	</div>
		571	</div>
		572	<div class="form-group last">
		573	<label class="control-label col-md-3">Modal</label>
		574	<div class="col-md-9">
		575	<a href="#" data-target="#myModal" role="button" class="btn red" data-toggle="modal">
		576	View in Modal </a>
		577	</div>
		578	</div>
		579	</div>
		580	<div class="form-actions">
		581	<div class="row">
		582	<div class="col-md-offset-3 col-md-9">
		583	<button type="submit" class="btn green"><i class="fa fa-check"></i> Submit</button>
		584	<button type="button" class="btn default">Cancel</button>
		585	</div>
		586	</div>
		587	</div>
		588	</form>
		589	<div id="myModal" class="modal fade" role="dialog" aria-hidden="true">
		590	<div class="modal-dialog">
		591	<div class="modal-content">
		592	<div class="modal-header">
		593	<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
		594	<h4 class="modal-title">Bootstrap switches</h4>
		595	</div>
		596	<div class="modal-body">
		597	<form action="#" class="form-horizontal">
		598	<div class="form-group">
		599	<label class="control-label col-md-3">Default Sizes</label>
		600	<div class="col-md-9">
		601	<input type="checkbox" checked class="make-switch" data-size="small">
		602	<input type="checkbox" checked class="make-switch" data-size="normal">
		603	<input type="checkbox" checked class="make-switch" data-size="large">
		604	</div>
		605	</div>
		606	<div class="form-group">
		607	<label class="control-label col-md-3">Colors</label>
		608	<div class="col-md-9">
		609	<input type="checkbox" class="make-switch" checked data-on-color="primary" data-off-color="info">
		610	<input type="checkbox" class="make-switch" checked data-on-color="success" data-off-color="warning">
		611	<input type="checkbox" class="make-switch" checked data-on-color="warning" data-off-color="danger">
		612	</div>
		613	</div>
		614	<div class="form-group last">
		615	<label class="control-label col-md-3">Disabled / Readonly</label>
		616	<div class="col-md-9">
		617	<input type="checkbox" checked disabled class="make-switch"/>
		618	<input type="checkbox" checked readonly class="make-switch"/>
		619	</div>
		620	</div>
		621	</form>
		622	</div>
		623	<div class="modal-footer">
		624	<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		625	<button type="button" class="btn btn-primary"><i class="fa fa-check"></i> Save changes</button>
		626	</div>
		627	</div>
		628	</div>
		629	</div>
		630	<!-- END FORM-->
		631	</div>
		632	</div>
		633	<!-- END PORTLET-->
		634	</div>
		635	</div>
		636	<div class="row">
		637	<div class="col-md-12">
		638	<!-- BEGIN PORTLET-->
		639	<div class="portlet box blue-madison">
		640	<div class="portlet-title">
		641	<div class="caption">
		642	<i class="fa fa-gift"></i>Bootstrap TouchSpin
		643	</div>
		644	<div class="tools">
		645	<a href="javascript:;" class="collapse">
		646	</a>
		647	<a href="#" data-toggle="modal" class="config">
		648	</a>
		649	<a href="javascript:;" class="reload">
		650	</a>
		651	<a href="javascript:;" class="remove">
		652	</a>
		653	</div>
		654	</div>
		655	<div class="portlet-body form">
		656	<!-- BEGIN FORM-->
		657	<form action="#" class="form-horizontal form-bordered">
		658	<div class="form-body">
		659	<div class="form-group">
		660	<label class="control-label col-md-3">Spinner 1</label>
		661	<div class="col-md-9">
		662	<div class="input-inline input-medium">
		663	<input id="touchspin_demo1" type="text" value="55" name="demo1" class="form-control">
		664	</div>
		665	<span class="help-block">
		666	basic example </span>
		667	</div>
		668	</div>
		669	<div class="form-group">
		670	<label class="control-label col-md-3">Spinner 2</label>
		671	<div class="col-md-9">
		672	<div class="input-inline input-medium">
		673	<input id="touchspin_demo2" type="text" value="55" name="demo1" class="form-control">
		674	</div>
		675	<span class="help-block">
		676	example with decimal steps </span>
		677	</div>
		678	</div>
		679	<div class="form-actions">
		680	<div class="row">
		681	<div class="col-md-offset-3 col-md-9">
		682	<button type="submit" class="btn green"><i class="fa fa-check"></i> Submit</button>
		683	<button type="button" class="btn default">Cancel</button>
		684	</div>
		685	</div>
		686	</div>
		687	</div>
		688	</form>
		689	</div>
		690	</div>
		691	</div>
		692	</div>
		693	<div class="row">
		694	<div class="col-md-12">
		695	<div class="portlet box green-turquoise">
		696	<div class="portlet-title">
		697	<div class="caption">
		698	<i class="fa fa-gift"></i>IP Address Input
		699	</div>
		700	<div class="tools">
		701	<a href="javascript:;" class="collapse">
		702	</a>
		703	<a href="javascript:;" class="reload">
		704	</a>
		705	</div>
		706	</div>
		707	<div class="portlet-body form">
		708	<!-- BEGIN FORM-->
		709	<form action="#" class="form-horizontal form-row-seperated">
		710	<div class="form-body">
		711	<div class="form-group">
		712	<label class="control-label col-md-3">IPV4</label>
		713	<div class="col-md-4">
		714	<input class="form-control" id="input_ipv4" type="text"/>
		715	<span class="help-block">
		716	192.168.120.150 </span>
		717	</div>
		718	</div>
		719	<div class="form-group last">
		720	<label class="control-label col-md-3">IPV6</label>
		721	<div class="col-md-4">
		722	<input class="form-control" id="input_ipv6" type="text"/>
		723	<span class="help-block">
		724	3ffe:1900:4545:3:200:f8ff:fe21:67cf </span>
		725	</div>
		726	</div>
		727	</div>
		728	<div class="form-actions">
		729	<div class="row">
		730	<div class="col-md-offset-3 col-md-9">
		731	<button type="submit" class="btn purple"><i class="fa fa-check"></i> Submit</button>
		732	<button type="button" class="btn default">Cancel</button>
		733	</div>
		734	</div>
		735	</div>
		736	</form>
		737	<!-- END FORM-->
		738	</div>
		739	</div>
		740	</div>
		741	</div>
		742	<div class="row">
		743	<div class="col-md-12">
		744	<div class="portlet box red-sunglo">
		745	<div class="portlet-title">
		746	<div class="caption">
		747	<i class="fa fa-gift"></i>Input Masks
		748	</div>
		749	<div class="tools">
		750	<a href="javascript:;" class="collapse">
		751	</a>
		752	<a href="javascript:;" class="reload">
		753	</a>
		754	</div>
		755	</div>
		756	<div class="portlet-body form">
		757	<!-- BEGIN FORM-->
		758	<form action="#" class="form-horizontal form-bordered">
		759	<div class="form-body">
		760	<div class="form-group">
		761	<label class="control-label col-md-3">Date 1</label>
		762	<div class="col-md-4">
		763	<input class="form-control" id="mask_date" type="text"/>
		764	<span class="help-block">
		765	y/m/d </span>
		766	</div>
		767	</div>
		768	<div class="form-group">
		769	<label class="control-label col-md-3">Date 2</label>
		770	<div class="col-md-4">
		771	<input class="form-control" id="mask_date1" type="text"/>
		772	<span class="help-block">
		773	change the placeholder </span>
		774	</div>
		775	</div>
		776	<div class="form-group">
		777	<label class="control-label col-md-3">Date 3</label>
		778	<div class="col-md-4">
		779	<input class="form-control" id="mask_date2" type="text"/>
		780	<span class="help-block">
		781	multi-char placeholder </span>
		782	</div>
		783	</div>
		784	<div class="form-group">
		785	<label class="control-label col-md-3">Phone</label>
		786	<div class="col-md-4">
		787	<input class="form-control" id="mask_phone" type="text"/>
		788	<span class="help-block">
		789	(999) 999-9999 </span>
		790	</div>
		791	</div>
		792	<div class="form-group">
		793	<label class="control-label col-md-3">Tax ID</label>
		794	<div class="col-md-4">
		795	<input class="form-control" id="mask_tin" type="text"/>
		796	<span class="help-block">
		797	99-9999999 </span>
		798	</div>
		799	</div>
		800	<div class="form-group">
		801	<label class="control-label col-md-3">Number</label>
		802	<div class="col-md-4">
		803	<input class="form-control" id="mask_number" type="text"/>
		804	<span class="help-block">
		805	mask "9" or mask "99" or ... mask "9999999999" </span>
		806	</div>
		807	</div>
		808	<div class="form-group">
		809	<label class="control-label col-md-3">Currency</label>
		810	<div class="col-md-4">
		811	<input class="form-control" id="mask_currency" type="text"/>
		812	<span class="help-block">
		813	123456 => € ___.__1.234,56 </span>
		814	</div>
		815	</div>
		816	<div class="form-group">
		817	<label class="control-label col-md-3">Currency 2</label>
		818	<div class="col-md-4">
		819	<input class="form-control" id="mask_currency2" type="text"/>
		820	<span class="help-block">
		821	123456 => € ___.__1.234,56(left aligned) </span>
		822	</div>
		823	</div>
		824	<div class="form-group last">
		825	<label class="control-label col-md-3">SSN</label>
		826	<div class="col-md-4">
		827	<input class="form-control" id="mask_ssn" type="text"/>
		828	<span class="help-block">
		829	999-99-9999. remove the empty mask on blur or when not empty removes the optional trailing part </span>
		830	</div>
		831	</div>
		832	</div>
		833	<div class="form-actions">
		834	<div class="row">
		835	<div class="col-md-offset-3 col-md-9">
		836	<button type="submit" class="btn purple"><i class="fa fa-check"></i> Submit</button>
		837	<button type="button" class="btn default">Cancel</button>
		838	</div>
		839	</div>
		840	</div>
		841	</form>
		842	<!-- END FORM-->
		843	</div>
		844	</div>
		845	</div>
		846	</div>
		847	<div class="row">
		848	<div class="col-md-12">
		849	<!-- BEGIN PORTLET-->
		850	<div class="portlet box purple">
		851	<div class="portlet-title">
		852	<div class="caption">
		853	<i class="fa fa-gift"></i>Tags Input
		854	</div>
		855	<div class="tools">
		856	<a href="javascript:;" class="collapse">
		857	</a>
		858	<a href="#" data-toggle="modal" class="config">
		859	</a>
		860	<a href="javascript:;" class="reload">
		861	</a>
		862	<a href="javascript:;" class="remove">
		863	</a>
		864	</div>
		865	</div>
		866	<div class="portlet-body ">
		867	<!-- BEGIN FORM-->
		868	<form action="#" class="form-horizontal">
		869	<div class="form-group">
		870	<label class="control-label col-md-3">Default</label>
		871	<div class="col-md-9">
		872	<input id="tags_1" type="text" class="form-control tags" value="foo,bar,baz,roffle"/>
		873	</div>
		874	</div>
		875	<div class="form-group">
		876	<label class="control-label col-md-3">Fixed Width</label>
		877	<div class="col-md-6">
		878	<input id="tags_2" type="text" class="form-control tags medium" value="tag1,tag2"/>
		879	</div>
		880	</div>
		881	</form>
		882	<!-- END FORM-->
		883	</div>
		884	</div>
		885	<!-- END PORTLET-->
		886	</div>
		887	</div>
		888	<div class="row">
		889	<div class="col-md-12">
		890	<!-- BEGIN PORTLET-->
		891	<div class="portlet box blue-hoki">
		892	<div class="portlet-title">
		893	<div class="caption">
		894	<i class="fa fa-gift"></i>Advanced File Input
		895	</div>
		896	<div class="tools">
		897	<a href="javascript:;" class="collapse">
		898	</a>
		899	<a href="#" data-toggle="modal" class="config">
		900	</a>
		901	<a href="javascript:;" class="reload">
		902	</a>
		903	<a href="javascript:;" class="remove">
		904	</a>
		905	</div>
		906	</div>
		907	<div class="portlet-body form">
		908	<!-- BEGIN FORM-->
		909	<form action="#" class="form-horizontal form-bordered">
		910	<div class="form-body">
		911	<div class="form-group">
		912	<label class="control-label col-md-3">Default</label>
		913	<div class="col-md-9">
		914	<div class="fileinput fileinput-new" data-provides="fileinput">
		915	<div class="input-group input-large">
		916	<div class="form-control uneditable-input span3" data-trigger="fileinput">
		917	<i class="fa fa-file fileinput-exists"></i>  <span class="fileinput-filename">
		918	</span>
		919	</div>
		920	<span class="input-group-addon btn default btn-file">
		921	<span class="fileinput-new">
		922	Select file </span>
		923	<span class="fileinput-exists">
		924	Change </span>
		925	<input type="file" name="...">
		926	</span>
		927	<a href="#" class="input-group-addon btn red fileinput-exists" data-dismiss="fileinput">
		928	Remove </a>
		929	</div>
		930	</div>
		931	</div>
		932	</div>
		933	<div class="form-group">
		934	<label class="control-label col-md-3">Without input</label>
		935	<div class="col-md-9">
		936	<div class="fileinput fileinput-new" data-provides="fileinput">
		937	<span class="btn default btn-file">
		938	<span class="fileinput-new">
		939	Select file </span>
		940	<span class="fileinput-exists">
		941	Change </span>
		942	<input type="file" name="...">
		943	</span>
		944	<span class="fileinput-filename">
		945	</span>
		946	<a href="#" class="close fileinput-exists" data-dismiss="fileinput">
		947	</a>
		948	</div>
		949	</div>
		950	</div>
		951	<div class="form-group ">
		952	<label class="control-label col-md-3">Image Upload #1</label>
		953	<div class="col-md-9">
		954	<div class="fileinput fileinput-new" data-provides="fileinput">
		955	<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
		956	</div>
		957	<div>
		958	<span class="btn default btn-file">
		959	<span class="fileinput-new">
		960	Select image </span>
		961	<span class="fileinput-exists">
		962	Change </span>
		963	<input type="file" name="...">
		964	</span>
		965	<a href="#" class="btn red fileinput-exists" data-dismiss="fileinput">
		966	Remove </a>
		967	</div>
		968	</div>
		969	<div class="clearfix margin-top-10">
		970	<span class="label label-danger">
		971	NOTE! </span>
		972	Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead.
		973	</div>
		974	</div>
		975	</div>
		976	<div class="form-group last">
		977	<label class="control-label col-md-3">Image Upload #2</label>
		978	<div class="col-md-9">
		979	<div class="fileinput fileinput-new" data-provides="fileinput">
		980	<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
		981	<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt=""/>
		982	</div>
		983	<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;">
		984	</div>
		985	<div>
		986	<span class="btn default btn-file">
		987	<span class="fileinput-new">
		988	Select image </span>
		989	<span class="fileinput-exists">
		990	Change </span>
		991	<input type="file" name="...">
		992	</span>
		993	<a href="#" class="btn red fileinput-exists" data-dismiss="fileinput">
		994	Remove </a>
		995	</div>
		996	</div>
		997	<div class="clearfix margin-top-10">
		998	<span class="label label-danger">
		999	NOTE! </span>
		1000	Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead.
		1001	</div>
		1002	</div>
		1003	</div>
		1004	</div>
		1005	<div class="form-actions">
		1006	<div class="row">
		1007	<div class="col-md-offset-3 col-md-9">
		1008	<button type="submit" class="btn purple"><i class="fa fa-check"></i> Submit</button>
		1009	<button type="button" class="btn default">Cancel</button>
		1010	</div>
		1011	</div>
		1012	</div>
		1013	</form>
		1014	<!-- END FORM-->
		1015	</div>
		1016	</div>
		1017	<!-- END PORTLET-->
		1018	</div>
		1019	</div>
		1020	<!-- END MAIN CONTENT -->
		1021	<script>
		1022	ComponentsFormTools.init(); // init todo page
		1023	</script>

Subversion Repositories Integrator Subversion

(root)/DOCUMENTOS E ANALISE/telas/templates/admin3/angularjs/views/form_tools.html - Rev 1