elijahmanor

<!-- 
Goal: To match a set of elements based on their HTML5 data attribute. 
The match can be an exact search, starts with, ends with, or contains. 

Example: Find elements that HTML5 data attribute starts with "my".
-->

<p>Hello World</p>                      <!-- don't match -->
<p data-m>Hello World</p>               <!-- don't match -->
<p data-my="1">Hello World</p>          <!-- match -->

elijahmanor

(function( $ ) {
    $.fn.confirmAction = function() {  
        return this.each( function() {        
            var $this = $( this ),
                confirmText = $this.data( "confirm-text" );        
            
            $this.bind( "click.confirmAction", function( e ) {
                if ( confirmText ) {
                    if ( confirm( confirmText ) ) {
                        console.log( "Confirmed" );

elijahmanor

(function( $ ) {
    $.fn.confirmAction = function() {  
        return this.each( function() {        
            var $this = $( this ),
                confirmText = $this.data( "confirmText" );        
            
            $this.bind( "click.confirmAction", function( e ) {
                if ( confirmText ) {
                    if ( confirm( confirmText ) ) {
                        console.log( "Confirmed" );

elijahmanor

<ul>
    <li class="team">Darcy Clarke</li>
    <li class="team">Chris Coyier</li>
    <li class="team">Corey Frang</li>
    <li class="board">Scott González</li>
    <li class="board">Dan Heberden</li>
    <li class="board">Paul Irish</li>
    <li class="board">Scott Jehl</li>
    <li class="board">Yehuda Katz</li>
    <li class="board">Dave Methvin</li>

elijahmanor

<ul>
    <li class="team">Darcy Clarke</li>
    <li class="team">Chris Coyier</li>
    <li class="team">Corey Frang</li>
    <li class="board">Scott González</li>
    <li class="board">Dan Heberden</li>
    <li class="board">Paul Irish</li>
    <li class="board">Scott Jehl</li>
    <li class="board">Yehuda Katz</li>
    <li class="board">Dave Methvin</li>

elijahmanor

<label for="attendee-name">Attendee Name</label>
<input id="attendee-name" type="text"></input>
<button id="register" data-target="#attendee-name">Register</button>​

elijahmanor

<label for="attendee-name">Attendee Name</label>
<input id="attendee-name" type="text"></input>
<button id="register" data-target="#attendee-name">Register</button>​

elijahmanor

<form id="personForm" name="personForm" method="post" 
    action="/Demo/jsf/main.jsf;jsessionid=0596FB948C236D0FFC162223" 
    enctype="application/x-www-form-urlencoded">
    <div class="field">
        <label>Last Name</label>
        <input id="personForm:lastname" 
            name="personForm:lastname" type="text" />
    </div>
    <div class="field">
        <label>First Name</label> 

elijahmanor

<form id="personForm" name="personForm" method="post" 
    action="/Demo/jsf/main.jsf;jsessionid=0596FB948C236D0FFC16227FC10A0C23" 
    enctype="application/x-www-form-urlencoded">
    <div class="field">
        <label>Last Name</label>
        <input id="personForm:lastname" name="personForm:lastname" type="text" value="" />
    </div>
    <div class="field">
        <label>First Name</label> 
        <input id="personForm:firstname" name="personForm:firstname" type="text" value="" />

elijahmanor

div[data-role='header'] h1 { font-weight: bold; }
.ui-li-desc strong { font-weight: bold; }
div[data-role='footer'] a { text-decoration: none; }​