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

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

Subversion Repositories Integrator Subversion

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