Getting started with select menu and button jquery

Annoy with default button/input submit and select/option menu form?

Jquery Select Menu *thanks filament group!!*

I love the default styling from jquery, especially for select menu plugin that still in development (although it have worked well in most cases). Actually I only need that the option item in select from can warp the text if it’s too long.

Unfortunately I don’t find jquery select menu when I googled the issue at the first time. The other plugins I found offer many dropdown styling with div-ul-li element+css+javascript combination, but they won’t work like common select. They need to be pre-processed before we can really submit to the target page. I think Jquery plugin select menu (TM Filament group) work really amazing and also neat.  They work just like common select.

Enough with the crap, so let’s get started! If you want to read the (really) limited documentation you can see here, here, here, and here.

#1 get the files you need : download files here

#2 Prepare your project —-> Prepare css and js files needed

	<link rel="Stylesheet" href="./css/jquery-ui-1.8.16.custom.css" type="text/css">
	<link rel="Stylesheet" href="./css/ui.selectmenu.css" type="text/css">
	<script type="text/javascript" src="./js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="./js/ui.selectmenu.js"></script>

—-> put this jquery part on your page :


<script type="text/javascript">

	$(function() {
		$("select[name='speed']").selectmenu({
			speed: 200,
			style: 'dropdown',
			maxHeight: 300,
			direction: "auto",
			width:300});
		$("select[name='type']").selectmenu({
			speed: 200,
			maxHeight: 300,
			direction: "auto",
			width:300});
	});

</script>

—-> and then the php file(I made it in php so that I can test it automatically)

<label for="speed">Select a speed:</label>
	<form action="<?php echo $_SERVER['php_self'];?>" method="get">
	<select name="speed" id="speed" style="display: none; ">
		<option value="Slower">Slower</option>
		<option value="Slow">Slow</option>
		<option value="Medium" selected="selected">Medium Medium Medium Medium Medium Medium Medium Medium Medium Medium Medium Medium </option>
		<option value="Fast">Fast</option>
		<option value="Faster">Faster</option>
	</select>
	<select name="type" id="type" style="display: none; ">
		<option value="Good">Good</option>
		<option value="Slow">Slow</option>
	</select>
	<input type="submit" value="submit">
	</form>

Play it out… click the submit button… voila.. the url turn into :

localhost/test2.php?speed=Faster&type=Good

See? It works just like common select, but even better (it can be styled and word warped).

JQuery Button

OMG, I forget to explain the jquery button, lol…. Easy tiger, just put it on your javascript part :

$(document).ready(function(){
       $( "input:submit, input:button, button").button();
});

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s