jQuery Show & Tell

NYS DEPT OF LABOR

USER EXPERIENCE TEAM Dept of Labor

A-Z INDEX Basic jQuery

DYNAMIC DATATABLES Third Party Plugin

NOTIFICATIONS Custom Plugin

A-Z INDEX JavaScript Disabled

A-Z INDEX Demo

A-Z INDEX Implementation

<!-- Index Header -->
<div class="ux-a-z-index">
    <a class="selected" href="#A" id="A-index">A</a>
    ...            
    <a href="#numbers" id="numbers-index">#</a>
</div>

<!-- Container Section -->
<div class="ux-a-z-item-container selected" id="A-container">
	<h3 class="ux-hide-js"><a id="A">A</a></h3>
        <ul>
            <li><a href="##url##">abc</a></li>
            <li><a href="##url##">abd</a></li>
            <li><a href="##url##">apple</a></li>
            <li><a href="##url##">applicable</a></li>
        </ul>
</div>
    ... ### omiting redundant repeats for example's sake ### ...
<div class="ux-a-z-item-container" id="numbers-container">
    <h3 class="ux-hide-js"><a id="numbers">#</a></h3>
    <p class="ux-weak">
    	There are no keywords for this option. 
    </p>
</div>

<script>
	// Overrides click functions of links
	function switch_selected(newSelection) {
		jQuery('.ux-a-z-index a.selected').removeClass('selected');
		jQuery('.ux-a-z-item-container.selected').fadeOut('fast', function() {
			jQuery(this).removeClass('selected');
			jQuery('#' + newSelection + '-index').addClass('selected');
			jQuery('#' + newSelection + '-container').fadeIn('fast', function() {
				jQuery(this).addClass('selected');
			});
		});
	}

	// Setup on page load
	$(document).ready(function() { 
		if (jQuery('.ux-a-z-index').length) {
			jQuery('.ux-a-z-index a').each(function() {
				jQuery(this).click(function(event) {
					// Prevent link click event
					event.preventDefault();
					var selection = jQuery(this).text();
					
					if (selection == "#") {
						selection = "numbers";
					}
					
					switch_selected(selection);
				});
			});
		}
	});
</script>

					

A-Z INDEX Demo

A-Z INDEX Documentation

A-Z INDEX What we've learned . . .

SENSIBLE DEFAULTS Allows for Implementation w/o JavaScript

PROGRESSIVELY ENHANCE and Gracefully Degrade

PLUGINS? go Simple and Standardized Sometimes

DYNAMIC DATATABLES not so dynamic table

DYNAMIC DATATABLES 1 Liner Dynamizer

<script src="jQuery-1.6.6.min.js"></script>
<script src="datatables.js></script>
<script>
$(document).ready(function() { 
	// select my table via ID
	$('#myTableID').dataTable();
});
</script>

DYNAMIC DATATABLES In Action

DYNAMIC DATATABLES Custom Paremeters

	//A more advanced implementation
	$(document).ready(function() { 	
		// target all elements with this class
		$('.custom-jqDataTable').dataTable( {
			
			// turn on search
			"bfilter" : true,
			
			// turn on paging
			"bPaginate": true, 
			
			// paging type
			"sPaginationType": "full_numbers", 	
			
			// turn on sorting
			"bSort": true,  
			
			// pre-sort columns
			"aaSorting": [[2,'desc'], [0,'asc'], [1, 'asc']]
		});
	});

DYNAMIC DATATABLES Custom in Action

DYNAMIC DATATABLES Documentation

DYNAMIC DATATABLES What we've learned . . .

IF PLUGINS ARE USED Solid, Supported, Maintained

ACCESSIBILE/COMPATIBLE Beware of the Black Box

CONTRIBUTE BACK Feedback & Fixes

NOTIFICATIONS Demo

NOTIFICATIONS Implementation

// Basic Notification
$('.basic-note').click(function(){
	$(this).uxNotice({
        title: "Hey",
        message: 'I just wanted to let you know about something.'
    });
});
 
// Persistent Notification
$('.persistent-note').click(function(){
    $(this).uxNotice({
        type: "persist",
        title: "Hey",
        message: "Close me if you want me to go away.",
    });
});
					

NOTIFICATIONS Form Demo

NOTIFICATIONS Form Implementation

			function cakeCheck() {
				var name = $('input[name="name"]').val();
				var email = $('input[name="email"]').val();
				
			    if ((name != "") && (email != "")) {
			        $(this).uxNotice({
			            title: 'Thanks',
			            message: '[HTML IMAGE TAG]' + name +  ', 
			            thank you for the information. But the cake is a lie!.'
			        });
			    } else {
			        $(this).uxNotice({
			            title: 'Missing Information',
			            message: '[HTML IMAGE TAG] Please enter your 
			            information if you would like some cake.'
			        });	
			    }
			}
					

NOTIFICATIONS Documentation

CUSTOM PLUGINS What we've learned . . .

TAILORED FUNCTIONALITY To individual needs

FASTER DEVELOPMENT No need to wait

INCREASES SKILLS A better developer

RESOURCES / Slide Deck

Presentation: http://labor.ny.gov/cc-2011
Google Chrome Required

Presentation template: Ascensor
Data-Tables Plugin: DataTables

Questions?
Email the UX Team:


Documentation Pages:
A-Z Indexing
Dynamic Tables
Notifications