Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘jQuery UI’

jQuery UI, the official user interface components library of jQuery, offers a lot for quickly implementing widely-used widgets and features into websites.

It consists of the popular datepicker, slider, accordion, progress bar, drag 'n' drop and much more.

And, it is themable, there is even ThemeRoller which allows anyone to customize their own themes.

However, any ThemeRoller-customized theme will still smell jQuery UI which can be seen in many sites.

If you are looking for highly-customized (like Bootstrap or Windows-Metro looking), quality and free jQuery UI themes, there are not too much options and here they are:

jQuery UI Bootstrap

jQuery UI Bootstrap Theme

An awesome theme for the Twitter Bootstrap fans as it transforms the widgets into the Bootstrap style.

Delta

Delta jQuery UI Theme

A slick, retina-ready jQuery UI theme which makes use of CSS3 gradients and some @2x images.

It works well in both dark and light backgrounds.

Read the rest of this entry »

jQuery UI is a great addition to jQuery JavaScript framework with the widgets and customization it offers.

If you're looking for alternative widgets, Wijmo, which is a set of 30 items, can be the one.

Wijmo

It has 2 versions where the "Open" version has ~15 free to use items and the "Complete" version, which is commercial (or free for GPL licenses apps), includes the full set.

Wijmo's "Open" version has many frequently used widgets like accordion, calendar, progress bar, slider, tabs, tooltip and more.

They make use of the jQuery UI CSS Framework and they are Themeroller-ready.

jStackMenu is a jQuery UI widget which transforms the children of any element into a beautiful stack menu.

The menu opens with a smooth animation and it is possible to control:

  • when it opens and closes
  • the direction it opens
  • the size of the arc
  • the time it takes to open

In order customize it more, it also has support for events.

The widget uses CSS transforms for creating the arcing and for browsers that doesn't support the feature, it displays the menu as a straight line.

jQuery Stack Menu

jQuery UI Multiselect is a widget that converts html multiple select inputs into slicker interfaces.

It makes searching within the options possible which is very functional for large lists & selected items can be re-ordered by drag’n drops.

jQuery UI Multi Select

It can display the number of selected items & for an easier selection, there are select all/deselect all links provided.

The widget is unobtrusive & and be styled with ThemeRoller.

IxEdit is an easy-to-use & free tool which aims to simplify the implementation of interactions on a web page, specially for anyone who is not experienced in JavaScript.

This interaction design tool is built with JavaScript & needs to be embedded into the webpage being edited. With the help of a modal-box-like interface, interactions created will be applied instantly.

Interaction Design Tool

Rather than totally new scripts, IxEdit generates jQuery & jQuery UI code using the parameters specified.

Interactions are stored in a local database (Google Gears), so, anything created won’t be lost even if the page is refreshed or closed.

After publishing ScheduledTweets yesterday, I received e-mails asking "how the drag'n drop & saving the new positions to the database was working".

Drag'n drop generally looks hard-to-apply but it is definitely not by using JavaScript frameworks. Here is, how it is done by using jQuery & jQuery UI:

jQuery Drag'n DropjQuery Drag'n Drop DemoDownload

The Database:

We create a simple database as below:

jQuery Drag'n Drop Database

The most important column in the database is recordListingID which shows us the order of the records.

This feature can be applied to any table by adding such a column to it.

The HTML:

We'll be using an unordered list that is generated from a PHP query that lists the items according to the recordListingID value mentioned above.

Here it is:

<div id="contentLeft">
	<ul>
		<li id="recordsArray_&lt;?php echo $row['recordID']; ?&gt;">&nbsp;</li>
	</ul>
</div>
<p>

 

The JavaScript:

We will be using jQuery UI's sortable plugin.

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

	$(function() {
		$("#contentLeft ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
			var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
			$.post("updateDB.php", order, function(theResponse){
				$("#contentRight").html(theResponse);
			});
		}
		});
	});

});
</script>

We made the unordered list inside #contentLeft a sortable item, used the serialize function of jQuery to create the array and posted it to updateDB.php.

The PHP:

After posting the array of "new order of the items" to updateDB.php, we must run a query to update our database that will reflect the last positions of every item:

<?php
require("db.php");

$action 				= mysql_real_escape_string($_POST['action']);
$updateRecordsArray 	= $_POST['recordsArray'];

if ($action == "updateRecordsListings"){

	$listingCounter = 1;
	foreach ($updateRecordsArray as $recordIDValue) {

		$query = "UPDATE records SET recordListingID = " . $listingCounter . " WHERE recordID = " . $recordIDValue;
		mysql_query($query) or die('Error, insert query failed');
		$listingCounter = $listingCounter + 1;
	}

	echo '<pre>';
	print_r($updateRecordsArray);
	echo '</pre>';
	echo 'If you refresh the page, you will see that records will stay just as you modified.';
}
?>

You can see that this is the easiest part. We handled the array as $updateRecordsArray and used it inside a for each statement.

With a new variable named $listingCounter, while the for each statement runs, we have updated the values of recordListingID column of every item in the database with $listingCounter values. And that's it.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com