mysql no error logs | gimp merge two images | create rss php | php code get current date time
 


 

jui_dropdown (v1.0.4)


Share:

Theme switch using jui_theme_switch.

DEMO

Selected:
 

SOURCE

HTML (head section)

	<link id="ui-theme" rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/ui-lightness/jquery-ui.css"/>
	<link rel="stylesheet" type="text/css" href="http://pontikis.github.io/jui_dropdown/v1.0.4/jquery.jui_dropdown.css"/>
	<!-- custom classes -->
	<link rel="stylesheet" href="index.css">

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
	<script type="text/javascript" src="http://pontikis.github.io/jui_dropdown/v1.0.4/jquery.jui_dropdown.min.js"></script>
    

HTML (body)

	<div id="opt_selected">
		<span>Selected: </span><span id="result"></span>
	</div>
	
	<div id="toggle_mouseenter_div" style="margin-top: 30px;">
		<input type="checkbox" id="toggle_mouseenter"> <label
			style="display: inline-block" for="toggle_mouseenter">Enable menu on
			mouse over ("toolbar" functionality)</label>
	</div>		
			
	<!-- demo dropdown 1 ------------------------------------------------ -->
	<div id="demo_drop1">
		<div id="launcher1_container">
			<button id="launcher1">Select an action</button>
		</div>
		<ul id="menu1">
			<li id="opt_1.1"><a href="javascript:void(0);">Option-1.1</a></li>
			<hr>
			<li id="opt_1.2"><a href="javascript:void(0);"><img
					src="images/feed.png"
					style="margin-right: 3px; margin-bottom: -2px; border: 0">Option-1.2</a></li>
			<li id="opt_1.3"><a href="javascript:void(0);"><img
					src="images/feed_edit.png"
					style="margin-right: 3px; margin-bottom: -2px; border: 0">Option-1.3</a>
			</li>
			<li id="opt_1.4"><a href="javascript:void(0);"><img
					src="images/feed_delete.png"
					style="margin-right: 3px; margin-bottom: -2px; border: 0">Option-1.4<br>
				<small>with second line</small>
			</a></li>
			<hr>
			<li id="opt_1.5">
				<a href="javascript:void(0);">
					<div style="display: table-row">
						<input type="checkbox" id="chk1" style="margin-left: 0">
						<label for="chk1"
							   style="display: table-cell; text-align: left; width: 100%;">Option-1.5</label>
					</div>
				</a>
			</li>
		</ul>
	</div>
	
	<!-- demo dropdown 2 ------------------------------------------------ -->
	<div id="demo_drop2">
		<div id="launcher2_container">
			<button id="launcher2">Select another</button>
		</div>
		<ul id="menu2">
			<li id="opt_2.1"><a href="javascript:void(0);">Option-2.1</a></li>
			<li id="opt_2.2"><a href="javascript:void(0);">Option-2.2</a></li>
			<hr>
			<li id="opt_2.3"><a href="javascript:void(0);">Option-2.3</a></li>
		</ul>
	</div>

	<!-- demo dropdown 3 ------------------------------------------------ -->
	<div id="demo_drop3">
		<div id="launcher3_container">
			<a id="launcher3" href="javascript:void(0);"
			   style="text-decoration: none;">Select another here ↓</a>
		</div>
		<ul id="menu3">
			<li id="opt_3.1"><a href="javascript:void(0);">Option-3.1</a></li>
			<hr>
			<li id="opt_3.2"><a href="javascript:void(0);">Option-3.2</a></li>
			<li id="opt_3.3"><a href="javascript:void(0);">Option-3.3</a></li>
		</ul>
	</div>
	
	<!-- demo dropdown 4 ------------------------------------------------ -->
	<div id="demo_drop4">
		<div id="launcher4_container">
			<button id="launcher4">Select</button>
		</div>
		<ul id="menu4">
			<li id="opt_4.1"><a href="javascript:void(0);">Option-4.1</a></li>
			<li id="opt_4.2"><a href="javascript:void(0);">Option-4.2</a></li>
			<li id="opt_4.3"><a href="javascript:void(0);">Option-4.3</a></li>
		</ul>
	</div>
    

JS code

	$(function() {

		// demo dropdown 1 ---------------------------------------------------------
		$("#demo_drop1").jui_dropdown({
			launcher_id: 'launcher1',
			launcher_container_id: 'launcher1_container',
			menu_id: 'menu1',
			containerClass: 'container1',
			menuClass: 'menu1',
			onSelect: function(event, data) {
				$("#result").text('index: ' + data.index + ' (id: ' + data.id + ')');
			}
		});


		// demo dropdown 2 ---------------------------------------------------------
		$("#demo_drop2").jui_dropdown({
			launcher_id: 'launcher2',
			launcher_container_id: 'launcher2_container',
			menu_id: 'menu2',
			containerClass: 'container2',
			menuClass: 'menu2',
			launcher_is_UI_button: false,
			onSelect: function(event, data) {
				$("#result").text('index: ' + data.index + ' (id: ' + data.id + ')');
			}
		});

		// demo dropdown 3 ---------------------------------------------------------
		$("#demo_drop3").jui_dropdown({
			launcher_id: 'launcher3',
			launcher_container_id: 'launcher3_container',
			menu_id: 'menu3',
			containerClass: 'container3',
			launcherClass: 'launcher3',
			launcherContainerClass: 'launcher3_container',
			menuClass: 'menu3',
			launcher_is_UI_button: false,
			toggle_launcher: true,
			onSelect: function(event, data) {
				$("#result").text('index: ' + data.index + ' (id: ' + data.id + ')');
			}
		});


		// demo dropdown 4 ---------------------------------------------------------
		$("#demo_drop4").jui_dropdown({
			launcher_id: 'launcher4',
			launcher_container_id: 'launcher4_container',
			menu_id: 'menu4',
			launcherUIShowText: false,
			launcherUISecondaryIconClass: 'ui-icon-gear',
			menuClass: 'menu4',
			containerClass: 'container4',
			my_position: 'right top',
			at_position: 'right bottom',
			onSelect: function(event, data) {
				$("#result").text('index: ' + data.index + ' (id: ' + data.id + ')');
			}
		});

		$("#toggle_mouseenter").click(function() {

			var flag = $(this).is(":checked");

			$("#demo_drop1").jui_dropdown({
				launchOnMouseEnter: flag
			});

			$("#demo_drop2").jui_dropdown({
				launchOnMouseEnter: flag
			});

			$("#demo_drop3").jui_dropdown({
				launchOnMouseEnter: flag
			});

			$("#demo_drop4").jui_dropdown({
				launchOnMouseEnter: flag
			});

		});

	});
    

CSS


	#jui_dropdown_demo {
		height: 400px;
	}

	#jui_dropdown_demo button {
		padding: 3px !important;
	}

	#jui_dropdown_demo ul li {
		background: none;
		display: inline-block;
		list-style: none;
	}

	/* selected option indicator ------------------------------------------------ */
	#opt_selected {
		margin-top: 20px;
		font-size: 20px;
	}

	/* demo_dropdown 1 ---------------------------------------------------------- */
	.container1 {
		margin: 20px 30px 10px 30px ;
		display: inline-block;
	}

	.menu1 {
		position: absolute;
		width: 240px !important;
		margin-top: 3px !important;
	}

	/* fix for jquery-ui-bootstrap theme */
	#launcher1 span {
		display: inline-block;
	}

	/* demo_dropdown 2 ---------------------------------------------------------- */
	.container2 {
		margin: 20px 30px 10px 30px ;
		display: inline-block;
	}

	.menu2 {
		position: absolute;
		width: 120px !important;
		margin-top: 3px !important;
	}

	/* demo_dropdown 3 ---------------------------------------------------------- */
	.container3 {
		margin: 20px 30px 10px 30px ;
		padding: 4px;
		width: 200px;
		display: inline-block;
	}

	.menu3 {
		position: absolute;
		width: 120px !important;
		margin-top: 3px !important;
	}

	.launcher3_container {
		padding: 4px 4px 6px 4px;
	}

	.launcher3 {
		padding: 3px;
	}

	/* demo_dropdown 4 ---------------------------------------------------------- */
	.container4 {
		margin: 20px 30px 10px 30px ;
		padding: 4px;
		display: inline-block;
	}

	.menu4 {
		position: absolute;
		width: 100px !important;
		margin-top: 3px !important;
	}

	/* fix for jquery-ui-bootstrap theme */
	#launcher4 span {
		display: inline-block;
	}