jQuery Queue Plugin Demo

This demo shows how to build flexible Javascript application. We are going to build a really simple application to show how we can write code a more flexible way.

Functions of this app:

When we click on BUTTON A, create a BUTTON B after BUTTON A
Now if we click on BUTTON B, create a BUTTON C after BUTTON B
Again click on BUTTON C, create a BUTTON CLEAER after BUTTON C
At last,click on BUTTON CLEAR to remove BUTTON B, C, and CLEAR

The purpose of those functions is to bind events to dynamically created DOM elements. Without using this plugin your code would be nested like the following code.

  $( function(){
    var $playground = $( '#play-ground' );

    // bind btn-a click event when DOM is ready
    $( '#btn-a' ).bind( 'click', function(){

      // only create btn-b in DOM if it does not exist
      if( $( '#btn-b' ).length === 0 ){

        // bind 'after click btn-b' queue functions to btn-b click event
        $( '<div id="btn-b" class="btn">BUTTON B</div>' ).bind( 'click', function(){

          // only create btn-c in DOM if it does not exist
          if( $( '#btn-c' ).length === 0 ){

            // bind 'after click btn-c' queue functions to btn-c click event
             $( '<div id="btn-c" class="btn">BUTTON C</div>' ).bind( 'click', function(){

               // only create btn-clear in DOM if it does not exist
               if( $( '#btn-clear' ).length === 0 ){

                 // remove btn-b, c and clear if the clear btn is clicked
                 $( '<div id="btn-clear" class="btn">CLEAR</div>' ).bind( 'click', function(){

                   $( '#btn-b' ).remove();
                   $( '#btn-c' ).remove();
                   $( '#btn-clear' ).remove();
                 }).appendTo( $playground );
               }
            }).appendTo( $playground );
          }
        }).appendTo( $playground );
      }
    });
  });

With jQuery.queue plugin we can separate code to modules and store each in different files like the following.

Code in btn_a.js

  // push a function in 'after click btn-a' queue
  $.queue( 'add', 'afterClickBtnA', function( $playground ){

    // only create btn-b in DOM if it does not exist
    if( $( '#btn-b' ).length === 0 ){

      // bind 'after click btn-b' queue functions to btn-b click event
      $( '<div id="btn-b" class="btn">BUTTON B</div>' ).bind( 'click', function(){

        $.queue( 'call', 'afterClickBtnB', $playground );
      }).appendTo( $playground );
    }
  });

Code in btn_b.js

  // push a function in 'after click btn-b' queue
  $.queue( 'add', 'afterClickBtnB', function( $playground ){

    // only create btn-c in DOM if it does not exist
    if( $( '#btn-c' ).length === 0 ){

      // bind 'after click btn-c' queue functions to btn-c click event
       $( '<div id="btn-c" class="btn">BUTTON C</div>' ).bind( 'click', function(){

        $.queue( 'call', 'afterClickBtnC', $playground );
      }).appendTo( $playground );
    }
  });

Code in btn_c.js

  // push a function in 'after click btn-c' queue
  $.queue( 'add', 'afterClickBtnC', function( $playground ){

    // only create btn-clear in DOM if it does not exist
    if( $( '#btn-clear' ).length === 0 ){

      // remove btn-b, c and clear if the clear btn is clicked
      $( '<div id="btn-clear" class="btn">CLEAR</div>' ).bind( 'click', function(){

        $( '#btn-b' ).remove();
        $( '#btn-c' ).remove();
        $( '#btn-clear' ).remove();
      }).appendTo( $playground );
    }
  });

Code in init.js

  $( function(){

    // bind btn-a click event when DOM is ready
    $( '#btn-a' ).bind( 'click', function(){

      $.queue( 'call', 'afterClickBtnA', $( '#play-ground' ));
    });
  });

Click the button to see how these code works.

BUTTON A