jQuery Show & Tell

USER EXPERIENCE TEAM Dept of Labor

A-Z INDEX JavaScript Disabled

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 Documentation

DYNAMIC DATATABLES not so dynamic table

DYNAMIC DATATABLES In Action

DYNAMIC DATATABLES Custom in Action

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 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.'
			        });	
			    }
			}