Free jQuery For Sortable Draggable News Tabs

« How To Design Smooth Multi-Tier Horizontal Dropdown Menu With Free JavaScript | Simple 2-Column Content With Rounded Corners Using Free JavaScript »

In the recent past we have created news tabs with scrollable sidebar, and another that can have nested tabs and fixed or variable height.

Now with jQuery UI (User Interface), we will work on creating news tabs that can be sorted and dragged horizontally.

This may not be a feature to serve a great advantage but is surely fun to create one.

An example of the news tabs is given below. Drag the tabs to see how the respective news item shifts with the chosen tab.

More variations can be seen in this site, and also you’ve the option to choose a theme and the components you need at the download page. The script is free for use.

The video coming below explains the steps to follow to create the sortable & draggable news tabs for your website. And after that you’ll find the full html code for the example shown above.

Feel free to copy the html code which you’ll need to alter for your specific need. Enjoy!

The HTML Code

Find the html code in the box below. The code highlighted in blue is important. This only makes the news tabs sortable and draggable.

<html><head>
		<title>jQuery UI Sortable Tabs</title>

		<link type="text/css" href="css/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

		<script type="text/javascript">
			$(function(){

				// Tabs
				$('#tabs').tabs().find(".ui-tabs-nav").sortable({axis:'x'});

				//hover states on the static widgets
				$('#dialog_link, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); },
					function() { $(this).removeClass('ui-state-hover'); }
				);

			});
		</script>
		<style type="text/css">
			/*demo page css*/
			body{ font: 75% "Trebuchet MS", sans-serif; margin: 0px; letter-spacing: 1px;}
			#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
			#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
			ul#icons {margin: 0; padding: 0;}
			ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
			ul#icons span.ui-icon {float: left; margin: 0 4px;}
		</style>
	</head>
	<body>

	<div style="width:500px;">

		<!-- Tabs -->

		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">First Tab</a></li>
				<li><a href="#tabs-2">Second Tab</a></li>
				<li><a href="#tabs-3">Third Tab</a></li>
			</ul>

			<!-- First Tab -->

			<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

			<!-- Second Tab -->

			<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>

			<!-- Third Tab -->

			<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
		</div>

	</div>

</body>
</html>

Get the latest top web marketing tips! 'Like 2WebVideo' now on Facebook below!

This article of November 30th, 2009 is authored by Partha Bhattacharya, who runs this website. Partha also creates video-based e-learning course for clients, and when time permits, writes guest articles for selected sites.