Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
js
 
 
src
 
 
 
 
 
 

README.md

ThumbSelect

jQuery plugin to change the traditional select tag for "thumb friendly" items


Demo

Demo in jsFiddle
How to use

Your HTML:

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="js/ThumbSelect.js"></script>
</head>
<body>
	<!-- YOUR TRADITIONAL SELECT -->
	<select id="select">
		<option value="Linux">Linux</option>
		<option value="OSX">OSX</option>
		<option value="Windows">Windows</option>
		<option value="Other">Other</option>
	</select>
	<!-- YOUR TRADITIONAL SELECT -->
	<br/><br/>
	<div class="selected"></div>
	<script type="text/javascript" src="js/script.js"></script>
</body>
</html>



Your script:

$(document).ready(function () {
	//Create ThumbSelect
	$('#select').ThumbSelect();

	//Select multiple items
    //$('#select').ThumbSelect('multiple', true);

    //Select items previously
    //$('#select').ThumbSelect('select', ["Linux"]); //Single select
    //$('#select').ThumbSelect('select', ["Linux", "OSX"]); //Multiple select

	//Event change item
	$('#select').ThumbSelect('change', function (value) {
		$('.selected').html("Item selected: " +  value);
	});

	//Get value
	//var value = $('#select').ThumbSelect('value');
});

About

jQuery plugin to change the traditional select tag for "thumb friendly" items

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.