eulalie: client/player/css/jq-css/demos/tabs/manipulation.html@6b346cb90c5a (annotated)

51 2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	1	<!DOCTYPE html>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	2	<html lang="en">
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	3	<head>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	4	<meta charset="UTF-8" />
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	5	<title>jQuery UI Tabs - Simple manipulation</title>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	6	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	7	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	8	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	9	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	10	<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	11	<script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	12	<script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	13	<link type="text/css" href="../demos.css" rel="stylesheet" />
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	14	<style type="text/css">
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	15	#dialog label, #dialog input { display:block; }
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	16	#dialog label { margin-top: 0.5em; }
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	17	#dialog input, #dialog textarea { width: 95%; }
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	18	#tabs { margin-top: 1em; }
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	19	#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	20	#add_tab { cursor: pointer; }
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	21	</style>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	22	<script type="text/javascript">
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	23	$(function() {
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	24	var $tab_title_input = $('#tab_title'), $tab_content_input = $('#tab_content');
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	25	var tab_counter = 2;
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	26
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	27	// tabs init with a custom tab template and an "add" callback filling in the content
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	28	var $tabs = $('#tabs').tabs({
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	29	tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>',
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	30	add: function(event, ui) {
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	31	var tab_content = $tab_content_input.val() \|\| 'Tab '+tab_counter+' content.';
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	32	$(ui.panel).append('<p>'+tab_content+'</p>');
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	33	}
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	34	});
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	35
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	36	// modal dialog init: custom buttons and a "close" callback reseting the form inside
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	37	var $dialog = $('#dialog').dialog({
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	38	autoOpen: false,
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	39	modal: true,
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	40	buttons: {
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	41	'Add': function() {
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	42	addTab();
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	43	$(this).dialog('close');
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	44	},
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	45	'Cancel': function() {
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	46	$(this).dialog('close');
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	47	}
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	48	},
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	49	open: function() {
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	50	$tab_title_input.focus();
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	51	},
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	52	close: function() {
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	53	$form[0].reset();
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	54	}
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	55	});
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	56
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	57	// addTab form: calls addTab function on submit and closes the dialog
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	58	var $form = $('form',$dialog).submit(function() {
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	59	addTab();
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	60	$dialog.dialog('close');
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	61	return false;
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	62	});
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	63
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	64	// actual addTab function: adds new tab using the title input from the form above
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	65	function addTab() {
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	66	var tab_title = $tab_title_input.val() \|\| 'Tab '+tab_counter;
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	67	$tabs.tabs('add', '#tabs-'+tab_counter, tab_title);
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	68	tab_counter++;
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	69	}
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	70
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	71	// addTab button: just opens the dialog
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	72	$('#add_tab')
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	73	.button()
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	74	.click(function() {
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	75	$dialog.dialog('open');
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	76	});
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	77
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	78	// close icon: removing the tab on click
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	79	// note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	80	$('#tabs span.ui-icon-close').live('click', function() {
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	81	var index = $('li',$tabs).index($(this).parent());
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	82	$tabs.tabs('remove', index);
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	83	});
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	84	});
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	85	</script>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	86	</head>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	87	<body>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	88
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	89	<div class="demo">
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	90
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	91	<div id="dialog" title="Tab data">
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	92	<form>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	93	<fieldset class="ui-helper-reset">
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	94	<label for="tab_title">Title</label>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	95	<input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" />
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	96	<label for="tab_content">Content</label>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	97	<textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	98	</fieldset>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	99	</form>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	100	</div>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	101
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	102	<button id="add_tab">Add Tab</button>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	103
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	104	<div id="tabs">
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	105	<ul>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	106	<li><a href="#tabs-1">Nunc tincidunt</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	107	</ul>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	108	<div id="tabs-1">
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	109	<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	110	</div>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	111	</div>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	112
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	113	</div><!-- End demo -->
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	114
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	115	<div class="demo-description">
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	116	<p>Simple tabs adding and removing.</p>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	117	</div><!-- End demo-description -->
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	118
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	119	</body>
2d6866072851 fichiers oublier dans le dernier commit samuel huron <admin@cybunk.com> parents: diff changeset	120	</html>

author	veltr
	Fri, 11 Oct 2013 17:37:25 +0200
changeset 107	6b346cb90c5a
parent 57	3a3c15c462f8
permissions	-rw-r--r--