$.is$(param)

Checks to see if the parameter is a $afm object
var foo=$('#header');
$.is$(foo);

Params

  1. element - Object

Returns

Boolean -

Example

$.is$ checks to see if the instance of an object is of type "$" or "$afm or App Framework. This is usefull for checking for parameter types in functions.

var tmp = $("div");
var bar=null;
function test(el){
    if($.is$(el)) //if we have an App Framework object, get the first element
       el=el[0];
};
alert(test(tmp));//true
alert(test(bar));//false
Test it on the following.

$.map(elements,callback)

Map takes in elements and executes a callback function on each and returns a collection
$.map([1,2],function(ind){return ind+1});

Params

  1. elements - Array|Object
  2. callback - Function

Returns

Object - appframework object with elements in it

Example

Map takes in elements and executes a callback function on each element. It returns a new App Framework object with the values in the collection.

The following example will loop through an array and add 1 to each element value and return a new App Framework object

function testMap(){
    var final=[1,2,3];
    var res=$.map([0,1,2],function(ind){return ind+1}).get(0);
    var pass=true;
    if(final.length!==res.length){
        pass=false;
    }
    for(var i=0; i < final.length; i++){
        if(final[i]!==res[i])
            pass=false;
    }
    alert(pass);
}

$.each(elements,callback)

Iterates through elements and executes a callback. Returns if false
$.each([1,2],function(ind){console.log(ind);});

Params

  1. elements - Array|Object
  2. callback - Function

Returns

Array - elements

Example

$.each allows you to iterate through a collection and execute a callback. Does not have to be DOM nodes.

The callback recieves two parameters, the index of the element (or key in an object) and then the element

Below is a simple function that will iterate through an array and add the values to the "sum" variable.

function getSum(arr){
    var sum=0;
    $.each(arr,function(index,val){sum+=val});
    return sum;
}
alert(getSum([1,2,3,4]));

Try it below. The response should be 10;

$.extend(target,{params})

Extends an object with additional arguments
$.extend({foo:'bar'});
$.extend(element,{foo:'bar'});

Params

  1. [target] - Object
  2. number - any

Returns

Object - [target]

Example

$.extend allows you to merge the content of two or more objects into the first object.

A basic example is below.

var cart={
    apples:1,
    bread:2
}
var productsToAdd={
    bananas:2,
    oranges:3
}
$.extend(cart,productsToAdd);
/*
 cart = {
    apples:1,
    bread:2,
    bananas:2,
    oranges:3,
 }
 */

You can try it below. The result is from JSON.stringify(cart);

$.isArray(param)

Checks to see if the parameter is an array
var arr=[];
$.isArray(arr);

Params

  1. element - Object

Returns

Boolean -

Example

$.isArray returns true or false if the passed in parameter is indeed an array.

See the following examples

var notArray={};
var isArray=[];
function testIsArray(pass){
    if(pass)
        alert($.isArray(isArray));
    else
        alert($.isArray(notArray));
}

$.isFunction(param)

Checks to see if the parameter is a function
var func=function(){};
$.isFunction(func);

Params

  1. element - Object

Returns

Boolean -

Example

$.isFunction returns true or false if the passed in parameter is indeed a function.

See the following examples

var notFunction={};
var isFunction=function(){};
function testisFunction(pass){
    if(pass)
        alert($.isFunction(isFunction));
    else
        alert($.isFunction(notFunction));
}

$.isObject(param)

Checks to see if the parameter is a object
var foo={bar:'bar'};
$.isObject(foo);

Params

  1. element - Object

Returns

Boolean -

Example

$.isObject returns true or false if the passed in parameter is indeed an object.

See the following examples

var notObject=function(){};
var isObject={};
function testisObject(pass){
    if(pass)
        alert($.isObject(isObject));
    else
        alert($.isObject(notObject));
}

$().map(function)

This is a wrapper to $.map on the selected elements
$().map(function(){this.value+=ind});

Params

  1. callback - Function

Returns

Object - an appframework object

Example

$().map is used to iterate through elements and execute a callback function on each element. The elements can be an Array or an Object.

It returns a NEW App Framework object.

The following would loop through all checkboxes and return a string with every id as a comma separated string

<form>
    Agree to terms?<input type='checkbox' id='terms'/><br/>
    Sign up for offers?<input type='checkbox' id='offers'><br/>
    <input type='submit' value='Go'/>
</form>
$('input[type='checkbox']).map(function() {
    return this.id;
}).get(0).join(",");

The above would output the following "terms, offers"

Below is a more detailed example. Here we will create a function to set the height to the smallest div.

<input id="equalize" type="button" value="Equalize">
<div class="mapsample" style="background:red; height: 40px;width:50px;float:left;" ></div>
<div class="mapsample" style="background:green; height: 70px;width:50px;float:left;" ></div>
<div class="mapsample" style="background:blue; height: 50px;width:50px;float:left;" ></div>
<script>
$.fn.equalizeHeights = function() {
  var maxHeight = this.map(function(i,e) {
    return $(e).height();
  }).get(0);
  return this.height( Math.min.apply(this, minHeight)+"px" );
};
$('#equalize').bind("click",function(){
  $('.mapsample').equalizeHeights();
});
</script>

$().each(function)

Iterates through all elements and applys a callback function
$().each(function(){console.log(this.value)});

Params

  1. callback - Function

Returns

Object - an appframework object

Example

$().ready(function)

This is executed when DOMContentLoaded happens, or after if you've registered for it.
$(document).ready(function(){console.log('I'm ready');});

Params

  1. callback - Function

Returns

Object - an appframework object

Example

$().ready will execute a function as soon as the DOM is available. If it is called after the DOM is ready, it will fire the event right away.

<script>
$(document).ready(function(){
    //The dom is ready, do whatever you want
    $("#readytest").html("The dom is now loaded");
});
</script>
<div id="readytest">The dom is not ready</div>

Below, you should see the message changed because the DOM is available

The dom is not ready

$().find(selector)

Searches through the collection and reduces them to elements that match the selector
$("#foo").find('.bar');
$("#foo").find($('.bar'));
$("#foo").find($('.bar').get(0));

Params

  1. selector - String|Object|Array

Returns

Object - an appframework object filtered

Example

$().find() takes in a selector and searches through the collection for matching elements. The selector can be a CSS selector, App Framework collection or an element. It returns a new App Framework collection.

Consider the following. We want to find all elements with class "foo" that are nested inside the div "bar"

<div id="bar">
    <ul>
        <li class="foo">Foo</li>
        <li>Bar</li>
    </ul>
    <span class="foo">Foo</span>
    <span>Bar</span>
</div>

Staring with the div "bar", we will find everything with class "foo"

$("#bar").find(".foo"); 

The result is a list item and a span. Below we will alert the node names of the items found.

  • Foo
  • Bar
Foo Bar

$().html([html])

Gets or sets the innerHTML for the collection.
If used as a get, the first elements innerHTML is returned
$("#foo").html(); //gets the first elements html
$("#foo").html('new html');//sets the html
$("#foo").html('new html',false); //Do not do memory management cleanup

Params

  1. html - String
  2. [cleanup] - Bool

Returns

Object - an appframework object

Example

$().html() will get or set the innerHTML property of DOM node(s)

If you pass in a string, it will set the innerHTML of all the DOM nodes to the new value.

If you do not have a parameter, it will return the first elements innerHTML value;

<div id="bar">
    This is some html
</div>
<div id="foo">
    We will update this
</div>
var html=$("#bar").html();
$("#foo").html("new content");
This is some html
We will update this

$().text([text])

Gets or sets the innerText for the collection.
If used as a get, the first elements innerText is returned
$("#foo").text(); //gets the first elements text;
$("#foo").text('new text'); //sets the text

Params

  1. text - String

Returns

Object - an appframework object

Example

$().text() will get or set the innerText property of DOM node(s). This will remove any HTML formatting/nodes.

If you pass in a string, it will set the innerText of all the DOM nodes to the new value.

If you do not have a parameter, it will return the first elements innerText value;

<div id="bar">
    This is some text <a>Test</a>
</div>
<div id="foo">
    <div style='background:red'>This has a red background</div>
</div>
var text=$("#bar").text();
$("#foo").text("new content");
This is some text Test
This has a red background

$().css(attribute,[value])

Gets or sets css vendor specific css properties
If used as a get, the first elements css property is returned
$().css("background"); // Gets the first elements background
$().css("background","red") //Sets the elements background to red

Params

  1. attribute - String
  2. value - String

Returns

Object - an appframework object

Example

$().css() will get or set CSS properties on the DOM nodes

If you pass in two parameters, a key and value, it will set the CSS property

If you only supply a key, it will return the first objects value.

Additionally, you can pass in an object as the first parameter and it will set multiple values

$("div").css("display","none"); //Set display:none on all divs
$("span").css("display");//Get the display property of the first span
$("div").css({color:'red',background:'black'});//Set the color to red, and the background color to black on all divs
This is the CSS test div

$().vendorCss(value)

Performs a css vendor specific transform:translate operation on the collection.

Params

  1. Transform - String

Returns

Object - an appframework object

Example

$().vendorCss() will get or set CSS properties on the DOM nodes with vendor specific prefixes. It does not work on a hash set.

$.feat.cssPrefix is the css prefix for each browser.

This is a wrapper to $().css($.feat.cssPrefix+attribute,value);

See $().css for more

$().computedStyle()

Gets the computed style of CSS values

Params

  1. css - String

Returns

Int|String|Float| - css vlaue

Example

$().computedStyle(prop) returns the computed style of the element.

$().css() does not return the computed style, only the value associated with the style attribute.

Let's take the following example below. $().css() and $().computedStyle will return two different values.

<div id="compTest" style="background:green;width:100px;height:100%;" class="myClass1"></div>

$().empty()

Sets the innerHTML of all elements to an empty string
$().empty();

Params

    Returns

    Object - an appframework object

    Example

    $().empty() will empty out the contents of the element. It is better to use $().empty() than to simply use innerHTML with an empty string because it internally calls $.cleanUpContent to clean up tne node content which prevents memory links.

    Consider that there is a div defined and you want to empty the content.

    <div id="empty_content" style="border:1px solid black">
        This is the content string we will empty
    </div>
    

    Empty the contents of the above defined div.

    $("#empty_content").empty();
    


    This is the content string we will empty

    $().hide()

    Sets the elements display property to "none".
    This will also store the old property into an attribute for hide
    $().hide();

    Params

      Returns

      Object - an appframework object

      Example

      $().hide() will set the element's display property to "none", thus hiding the div content.

      Consider that there is a div with some content that you want to hide

      <div id="hide_content" style="border:1px solid green">
          This is the content we will hide
      </div>
      

      Based upon some event, you can then hide the div

      $("#hide_content").hide();
      


      This is the content we will hide

      $().show()

      Shows all the elements by setting the css display property
      We look to see if we were retaining an old style (like table-cell) and restore that, otherwise we set it to block
      $().show();

      Params

        Returns

        Object - an appframework object

        Example

        $().show() will set the elements display property to "block", thus showing the content.

        First set up a div with the content you want to show.

        <div id="show_content" style="border:1px solid green;display:none;">
          Hello --  I am some content
        </div>
        

        Then perfom some function to show the div

        $("#show_content").show();
        


        $().toggle([show])

        Toggle the visibility of a div
        $().toggle();
        $().toggle(true); //force showing

        Params

        1. [show] - Boolean

        Returns

        Object - an appframework object

        Example

        $().toggle() will toggle the visibility of a div. If the div is currently visible, it will be hidden. If the div is currently hidden, it will be shown. Using $().toggle(true) will force showing the div.

        Consider the following div which is shown initially.

        <div id="toggle_content" style="border:1px solid green;display:block;">
            This is some content
        </div>
        

        Use toggle to switch the visibility to hide, then show again.

        $("#toggle_content").toggle();
        


        This is some content

        $().val([value])

        Gets or sets an elements value
        If used as a getter, we return the first elements value. If nothing is in the collection, we return undefined
        $().value; //Gets the first elements value;
        $().value="bar"; //Sets all elements value to bar

        Params

        1. [value] - String

        Returns

        String|Object - A string as a getter, appframework object as a setter

        Example

        $().val([value]) gets or sets the value of an HTML element.

        Provide a method for a user to set a value,

        <input type="text" id="value_input" size=15>
        

        Then use $().val to get the value that was input and show it in an alert.

        alert($("#value_input").val());
        

        Or you can set a default value within your code

        $("#value_input").val("Default Value");
        




        $().attr(attribute,[value])

        Gets or sets an attribute on an element
        If used as a getter, we return the first elements value. If nothing is in the collection, we return undefined
        $().attr("foo"); //Gets the first elements 'foo' attribute
        $().attr("foo","bar");//Sets the elements 'foo' attribute to 'bar'
        $().attr("foo",{bar:'bar'}) //Adds the object to an internal cache

        Params

        1. attribute - String|Object
        2. [value] - String|Array|Object|function

        Returns

        String|Object|Array|Function - If used as a getter, return the attribute value. If a setter, return an appframework object

        Example

        $().attr(attribute,[value]) gets or sets an attribute of an HTML element.

        Assume we set a default attribute value of an element to "foo"

        <div id="attr_content" test_attr="foo"></div>
        

        We then use $().attr along with the attribute name to get the value and show it in an alert.

        alert($("#attr_content").attr("test_attr"));
        

        The attribute can then be modified by assigning a new value of "bar" to the attribute

        $("#attr_content").attr("test_attr","bar");
        


        The test attribute is initially set to "foo"


        $().removeAttr(attribute)

        Removes an attribute on the elements
        $().removeAttr("foo");

        Params

        1. attributes - String

        Returns

        Object - appframework object

        Example

        $().removeAttr(attribute) removes an attribute of an HTML element.

        Assume we set a default attribute value of an element to "foo"

        <div id="removeattr_content" test_attr="foo"></div>
        

        We then use $().attr along with the attribute name to get the value and show it in an alert.

        alert($("#removeattr_content").attr("test_attr"));
        

        The attribute can then be removed by using $().removeAttribute() and specifying the attribute name

        $("#removeattr_content").removeAttr("test_attr");
        


        The test_attr attribute is set to "foo"


        $().prop(property,[value])

        Gets or sets a property on an element
        If used as a getter, we return the first elements value. If nothing is in the collection, we return undefined
        $().prop("foo"); //Gets the first elements 'foo' property
        $().prop("foo","bar");//Sets the elements 'foo' property to 'bar'
        $().prop("foo",{bar:'bar'}) //Adds the object to an internal cache

        Params

        1. property - String|Object
        2. [value] - String|Array|Object|function

        Returns

        String|Object|Array|Function - If used as a getter, return the property value. If a setter, return an appframework object

        Example

        $().prop(property,[value]) gets or sets a property of an HTML element.

        First set up an element

        <div id="property_content"></div>
        

        Then set a property value by specifying a property name and value of "hello"

        $("#property_content").prop("test_prop","hello");
        

        We then use $().prop along with the property name to get the value and show it in an alert. If you attempt to get the value before it is assigned, we return undefined.

        alert($("#property_content").prop("test_prop"));
        



        $().removeProp(attribute)

        Removes a property on the elements
        $().removeProp("foo");

        Params

        1. properties - String

        Returns

        Object - appframework object

        Example

        $().removeProp(property) removes a property of an HTML element.

        First set up an element

        <div id="property_content"></div>
        

        Then set a property with a value of "hello"

        $("#property_content").prop("test_prop","hello");
        

        Later you can use $().removeProp using the property name to remove the property from the element.

        $("#property_content").removeProp("test_prop");
        




        $().remove(selector)

        Removes elements based off a selector
        ```
        $().remove(); //Remove all
        $().remove(".foo");//Remove off a string selector
        var element=$("#foo").get(0);
        $().remove(element); //Remove by an element
        $().remove($(".foo")); //Remove by a collection

        Params

        1. selector - String|Object|Array

        Returns

        Object - appframework object

        Example

        $().remove(selector) removes elements based off a selector

        Assume we have an element that displays some content

        <div id="some_content" style="border:1px solid green">This is content that will be removed from the DOM.</div>
        

        We then use $().remove() to remove the element from the DOM

        $("#some_content").remove();
        


        This is content that will be removed from the DOM.



        $().addClass(name)

        Adds a css class to elements.
        $().addClass("selected");

        Params

        1. classes - String

        Returns

        Object - appframework object

        Example

        $().addClass(name) adds a css class to the element.

        Assume there is an element that displays some content

        <div style='border:1px solid black' id="cssclass_content">This is some content</div>
        

        Then using $().addClass() we can apply the css defined as by greenredclass to that element.

        $("#cssclass_content").addClass("greenredclass");
        


        This is some content

        $().removeClass(name)

        Removes a css class from elements.
        $().removeClass("foo"); //single class
        $().removeClass("foo selected");//remove multiple classess

        Params

        1. classes - String

        Returns

        Object - appframework object

        Example

        $().removeClass(name) will remove a css class from an element.

        Assume there is an element that displays some content usinge the "greenredclass" css class

        <div style='border:1px solid black' id="removeclass_content" class="greenredclass">This is some content</div>
        

        Then using $().removeClass() we can remove the css class defined as by greenredclass to that element.

        $("#removeclass_content").removeClass("greenredclass");
        


        This is some content

        $().toggleClass(name)

        Adds or removes a css class to elements.
        $().toggleClass("selected");

        Params

        1. classes - String
        2. [state] - Boolean

        Returns

        Object - appframework object

        Example

        $().replaceClass(old, new)

        Replaces a css class on elements.
        $().replaceClass("on", "off");

        Params

        1. classes - String

        Returns

        Object - appframework object

        Example

        $().replaceClass(old,new) will replace a css class on an element with another class.

        Assume there is an element that displays some content usinge the "greenredclass" css class

        <div style='border:1px solid black' id="replaceclass_content" class="greenredclass">This is some content</div>
        

        Then using $().replaceClass() you can replace the greenredclass with the blueyellowclass.

        $("#replaceclass_content").replaceClass("greenredclass","blueyellowclass");
        


        This is some content

        $().hasClass(name,[element])

        Checks to see if an element has a class.
        $().hasClass('foo');
        $().hasClass('foo',element);

        Params

        1. class - String
        2. [element] - Object

        Returns

        Boolean -

        Example

        $().hasClass(name) checks to see if an element has a class.

        Assume there is an element that displays some content usinge the "greenredclass" css class

        <div style='border:1px solid black' id="hasclass_content" class="greenredclass">This is some content</div>
        

        You can then use $().hasClass() to determine if the element has that class or not.

        $("#hasclass_content").hasClass("greenredclass");
        


        This is some content


        $().append(element,[insert])

        Appends to the elements
        We boil everything down to an appframework object and then loop through that.
        If it's HTML, we create a dom element so we do not break event bindings.
        if it's a script tag, we evaluate it.
        $().append(""); //Creates the object from the string and appends it
        $().append($("#foo")); //Append an object;

        Params

        1. Element/string - String|Object
        2. [insert] - Boolean

        Returns

        Object - appframework object

        Example

        $().append(element,[insert]) appends an element or content to an existing element.

        Assume we have an element defined with content for which we want to add additional content

        <div id="append_content">I'll append content after the &lt;hr> <hr></div>
        

        We then use $().append() to add the additional content after the <hr> tag .

        $("#append_content").append("<span>Some more content</br></span>");
        


        I'll append content after the <hr>

        $().appendTo(element,[insert])

        Appends the current collection to the selector
        $().appendTo("#foo"); //Append an object;

        Params

        1. Selector - String|Object
        2. [insert] - Boolean

        Returns

        null

        Example

        $().appendTo(element|selector) appends the collection to an element

        Assume we have found all the paragraphcs on the page and want to move them into another div

        var paragraphs=$("p");
        

        Now let's put them in a div with the id called "paragraphs". The will move to the dop

        $("#appendTest p").appendTo("#paragraphsappend");
        
        <div id="paragraphsappend">
           This content will stay at the bottom when the <p> tags are moved
        </div>
        <div id="appendTest">
            <p>Paragraph One</p>
            <p>Paragraph Two</p>
        </div>
        

        Paragraph One

        Paragraph Two

        This content will stay at the top when the <p> tags are moved

        $().prependTo(element)

        Prepends the current collection to the selector
        $().prependTo("#foo"); //Prepend an object;

        Params

        1. Selector - String|Object

        Returns

        null

        Example

        $().prependTo(element|selector) prepends the collection to an element

        Assume we have found all the paragraphcs on the page and want to move them into another div

        var paragraphs=$("p");
        

        Now let's put them in a div with the id called "paragraphs". The will move to the dop

        $("#prependTest p").prependTo("#paragraphsPrepend");
        
        <div id="paragraphsPrepend">
           This content will stay at the bottom when the <p> tags are moved
        </div>
        <div id="prependTest">
            <p>Paragraph One</p>
            <p>Paragraph Two</p>
        </div>
        
        This content will stay at the bottom when the <p> tags are moved

        Paragraph One

        Paragraph Two

        $().prepend(element)

        Prepends to the elements
        This simply calls append and sets insert to true
        $().prepend("");//Creates the object from the string and appends it
        $().prepend($("#foo")); //Prepends an object

        Params

        1. Element/string - String|Object

        Returns

        Object - appframework object

        Example

        $().prepend(element) prepends to an element by calling append and setting insert to true.

        Assume we have an element defined with content for which we want to add additional content

        <div id="prepend_content"><hr>I'll prepend content before the &lt;hr></div>
        

        We then use $().prepend() to add the additional content before the <hr> tag .

        $("#prepend_content").prepend("<span>Some more content<br /></span>");
        



        I'll prepend content before the <hr>

        $().insertBefore(target);

        Inserts collection before the target (adjacent)
        $().insertBefore(af("#target"));

        Params

        1. Target - String|Object

        Returns

        null

        Example

        $().insertBefore(element) Inserts a collection before the element in the dom.

        Let's say we want to move all paragraphs before an element with id ="insertBeforeTest"

        <div>Some stuff</div>
        <div id="insertBeforeTest">P's will go before me</div>
        <p>This is p1</p>
        <p>This is p2</p>
        

        We can find all the p tags, then insert before #insertBeforeTest

        $("p").insertBefore("#insertBeforeTest");
        


        Some stuff
        P's will go before me

        This is p1

        This is p2

        $().insertAfter(target);

        Inserts collection after the target (adjacent)
        $().insertAfter(af("#target"));

        Params

        1. target - String|Object

        Returns

        null

        Example

        $().insertAfter(element) Inserts a collection after the element in the dom.

        Let's say we want to move all paragraphs after an element with id ="insertBeforeTest"

        <p>This is p1</p>
        <p>This is p2</p>
        <div id="insertAfterTest">P's will go after me</div>
        <div>Some stuff</div>
        

        We can find all the p tags, then insert after #insertAfterTest

        $("p").insertAfter("#insertAfterTest");
        


        This is p1

        This is p2

        P's will go after me
        Some stuff

        $().get([index])

        Returns the raw DOM element.
        $().get(0); //returns the first element
        $().get(2);// returns the third element

        Params

        1. [index] - Int

        Returns

        Object - raw DOM element

        Example

        $().get([index]) to get the raw DOM element

        Write a function that uses $().get(0) to get the first element

        function getElementByIndex(){
            var obj=$(".panel").get(0);
            alert("This is the first panel = "+obj.id);
        }
        

        You can then set up a way to call the function, in this case we set up a button


        $().offset()

        Returns the offset of the element, including traversing up the tree
        $().offset();

        Params

          Returns

          Object - with left, top, width and height properties

          Example

          $().offset() returns the offset of the first element in the collection

          The offset returns the following

          1. left
          2. top
          3. right
          4. bottom
          5. width
          6. height

          Below we have a box absolutely positioned in the div.

          <div id="offsetTest" style="position:absolute;background:red;width:100px;height:100px;left:100px;top:100px;">
              This is content
          </div>
          

          Now we will get the offset

          $("#offsetTest").offset();
          



          This is content

          $().height()

          returns the height of the element, including padding on IE
          $().height();

          Params

            Returns

            string - height

            Example

            $().height() returns the css height of the element based. The "px" is stripped from the result.

            Below we have to divs. One has a fixed height, and the other is based off %

            <div id="heightTest" style="background:red;height:100px;height:100px;">
                This is content
            </div>
            <div id="heightTest2" style="background:green;height:100%;height:30%;">
                This is content 2
            </div>
            

            Now we will get the offset

            $("#heightTest").height();
            




            This is content
            This is content 2

            $().width()

            returns the width of the element, including padding on IE
            $().width();

            Params

              Returns

              string - width

              Example

              $().width() returns the css width of the element based. The "px" is stripped from the result.

              Below we have to divs. One has a fixed width, and the other is based off %

              <div id="widthTest" style="background:red;width:100px;height:100px;">
                  This is content
              </div>
              <div id="widthTest2" style="background:green;width:100%;height:100px;">
                  This is content 2
              </div>
              

              Now we will get the offset

              $("#widthTest").width();
              




              This is content
              This is content 2

              $().parent(selector)

              Returns the parent nodes of the elements based off the selector
              $("#foo").parent('.bar');
              $("#foo").parent($('.bar'));
              $("#foo").parent($('.bar').get(0));

              Params

              1. [selector] - String|Array|Object

              Returns

              Object - appframework object with unique parents

              Example

              $().parent([selector]) returns the parents of each element in the collection, filtered by the optional selector

              Let's look at the following html structure

              <div id="parent1">
                  <div class="child">
                      <div class="gc">GC</div>
                  </div>
              </div>
              <div id="parent2">
                  <div class="child">Child</div>
              </div>
              

              Now we will get the parent elements of everything with the class "child"

              $(".child").parent();
              
              GC
              Child

              $().parents(selector)

              Returns the parents of the elements based off the selector (traversing up until html document)
              $("#foo").parents('.bar');
              $("#foo").parents($('.bar'));
              $("#foo").parents($('.bar').get(0));

              Params

              1. [selector] - String|Array|Object

              Returns

              Object - appframework object with unique parents

              Example

              $().parents([selector]) returns the parents of each element in the collection and traverses up the DOM, filtered by the optional selector

              Let's look at the following html structure

              <div id="parents1">
                  <div class="childs">
                      <div class="gcs">GC</div>
                  </div>
              </div>
              <div id="parents2">
                  <div class="childs">Child</div>
              </div>
              

              Now we will get the parent elements of everything with the class "child"

              $(".child").parent();
              
              GC
              Child

              This test will have "parents1" and "parents2" and then the shared ancestors


              This test will not include "parent2", since gcs is a single element

              $().children(selector)

              Returns the child nodes of the elements based off the selector
              $("#foo").children('.bar'); //Selector
              $("#foo").children($('.bar')); //Objects
              $("#foo").children($('.bar').get(0)); //Single element

              Params

              1. [selector] - String|Array|Object

              Returns

              Object - appframework object with unique children

              Example

              $().children([selector]) returns the children of each element in the collection, filtered by the optional selector

              Let's look at the following html structure

              <div id="childstest1">
                  <div id='childtestgc1' class="childstest">
                      <div id='childtestgc3'  class="gcstest">GC</div>
                  </div>
                  <div id='childtestgc2'  class="childstest">Child</div>
              </div>
              

              Now we will get the child elements of everything of parents

              $("#childtest1").children();
              
              GC
              Child

              This test will have to elements, but not include "gctest"


              this will only have "gctest" since there is only one child of both childtest divs

              $().siblings(selector)

              Returns the siblings of the element based off the selector
              $("#foo").siblings('.bar'); //Selector
              $("#foo").siblings($('.bar')); //Objects
              $("#foo").siblings($('.bar').get(0)); //Single element

              Params

              1. [selector] - String|Array|Object

              Returns

              Object - appframework object with unique siblings

              Example

              $().siblings([selector]) returns the siblings of each element in the collection, filtered by the optional selector

              Let's look at the following html structure

              <div id="siblingstest1">
                  <div id='siblingtestgc1' class="siblingstest">
                      <div id='siblingtestgc3'  class="siblingsgcstest">GC</div>
                  </div>
                  <div id='siblingtestgc2'  class="siblingstest">Child</div>
                  <div id='siblingtestgc4'  class="siblingstest">Child</div>
              </div>
              

              Now we will get the child elements of everything of parents

              $("#siblingtest1").siblings();
              
              GC
              Child
              Child

              This test will have to elements, but not include "gctest"


              this will be empty since there are no other elements in the div

              $().closest(selector,[context]);

              Returns the closest element based off the selector and optional context
              $("#foo").closest('.bar'); //Selector
              $("#foo").closest($('.bar')); //Objects
              $("#foo").closest($('.bar').get(0)); //Single element

              Params

              1. selector - String|Array|Object
              2. [context] - Object

              Returns

              Object - Returns an appframework object with the closest element based off the selector

              Example

              $().closest([selector]) for each element in the collection, including itself, it will search and traverse up the dom until it finds the first element matching the selector. If the elements in the collection match the selector, it will return those.

              <div id="closest1" class="grandparent">
                  <div id='closestgc1' class="closest">
                      <div id='closestgc3'  class="closest">GC</div>
                  </div>
                  <div id='closestgc2'  class="closest">Child</div>
              </div>
              

              Now lets get the closest div

              $("#closestgc3").closest('div');
              

              Or we can find the closest "grandparent" class

              $(".closest").closest(".grandparent");
              
              GC
              Child

              This will be the closestgc3 div since it is a div


              This will traverse up to .grandparent from all the .closest class divs

              $().filter(selector);

              Filters elements based off the selector
              $("#foo").filter('.bar'); //Selector
              $("#foo").filter($('.bar')); //Objects
              $("#foo").filter($('.bar').get(0)); //Single element

              Params

              1. selector - String|Array|Object

              Returns

              Object - Returns an appframework object after the filter was run

              Example

              $().filter(selector) reduces a collection to elements that match the selector

              Let's say we have all <li> elements and we want to filter to only elements that have class "anchor"

              <ul>
                  <li class="anchor">One</li>
                  <li class="anchor">Two</li>
                  <li>Three</li>
                  <li>Four</li>
                  <li>Five</li>
                  <li>Six</li>
              </ul>
              

              By calling filter of ".anchor", we will reduce our set from six elements to two.

              $("ul li").filter(".anchor");
              
              • One
              • Two
              • Three
              • Four
              • Five
              • Six

              $().not(selector);

              Basically the reverse of filter. Return all elements that do NOT match the selector
              $("#foo").not('.bar'); //Selector
              $("#foo").not($('.bar')); //Objects
              $("#foo").not($('.bar').get(0)); //Single element

              Params

              1. selector - String|Array|Object

              Returns

              Object - Returns an appframework object after the filter was run

              Example

              $().not(selector) reduces a collection to elements that do not match the selector

              Let's say we have all <li> elements and we want to remove the elements that have class "anchor"

              <ul>
                  <li class="anchor">One</li>
                  <li class="anchor">Two</li>
                  <li>Three</li>
                  <li>Four</li>
                  <li>Five</li>
                  <li>Six</li>
              </ul>
              

              By calling not of ".anchor", we will reduce our set from six elements to four.

              $("ul li").not(".anchor");
              
              • One
              • Two
              • Three
              • Four
              • Five
              • Six

              $().data(key,[value]);

              Gets or set data-* attribute parameters on elements (when a string)
              When used as a getter, it's only the first element
              $().data("foo"); //Gets the data-foo attribute for the first element
              $().data("foo","bar"); //Sets the data-foo attribute for all elements
              $().data("foo",{bar:'bar'});//object as the data

              Params

              1. key - String
              2. value - String|Array|Object

              Returns

              String|Object - returns the value or appframework object

              Example

              $().data(key,value) gets or sets data-* attributes on an HTML element when value is a string.

              This makes a call to $().attr("data-"+key,value).

              Please see $().attr()

              $().end();

              Rolls back the appframework elements when filters were applied
              This can be used after .not(), .filter(), .children(), .parent()
              $().filter(".panel").end(); //This will return the collection BEFORE filter is applied

              Params

                Returns

                Object - returns the previous appframework object before filter was applied

                Example

                $().end() rolls back the elements before filtering

                Let's look at the filter example below.

                <ul>
                    <li class="anchor">One</li>
                    <li class="anchor">Two</li>
                    <li>Three</li>
                    <li>Four</li>
                    <li>Five</li>
                    <li>Six</li>
                </ul>
                

                By calling filter of ".anchor", we will reduce our set from six elements to two.
                After we call end(), it will reduce the set back to $("ul li");

                $("ul li").filter(".anchor").end();
                
                • One
                • Two
                • Three
                • Four
                • Five
                • Six

                $().clone();

                Clones the nodes in the collection.
                $().clone();// Deep clone of all elements
                $().clone(false); //Shallow clone

                Params

                1. [deep] - Boolean

                Returns

                Object - appframework object of cloned nodes

                Example

                $().clone(deep) clones all the DOM nods in the collection. If deep is set to "true", it will also clone the elements children.

                Let's say we have an ordered list and we want to keep adding elements by cloning the first LI.

                <ol>
                    <li>Entry</li>
                </ol>
                

                We can clone and then add it to the list like the following.

                var obj=$("ol li").eq(0).clone();
                $("ol li").append(obj);
                

                Below we can clone and add elements. You can also change the text of the first element to see how the cloned nodes will reflecct it.

                1. Entry

                $().size();

                Returns the number of elements in the collection
                $().size();

                Params

                  Returns

                  Int -

                  Example

                  $().size() returns the number of elements in the collection. This is the same as $().length;

                  $().serialize()

                  Serailizes a form into a query string
                  $().serialize();

                  Params

                    Returns

                    String -

                    Example

                    $().serialize() serializes a form for use in a url.

                    Below is a form that we will serialize the values of

                    <form id="serializeForm" onsubmit="return false">Name:
                        <input type='text' class='af-ui-forms' name='name' value='John Smith'>
                        <br>
                        <input type='checkbox' class='af-ui-forms' value='yes' checked name='human'>
                        <label for='human'>Are you human?</label>
                        <br>
                        <br>Gender: <span><select id='serialize_gender' name="gender"><option value='m'>Male</option><option value='f'>Female</option><select></span>
                        <br>
                        <br>
                        <br>
                        <input type="button" onclick="serializeForm()" value="Serialize">
                    </form>
                    

                    Below is the form that you can modify and get the serialized result.

                    Name:


                    Gender:


                    $().eq(index)

                    Reduce the set of elements based off index
                    $().eq(index)

                    Params

                    1. index - Int

                    Returns

                    Object - appframework object

                    Example

                    $().eq(index) reduces the collection to the element at that index. If the index is negative, it will go backwards.

                    Let's take the following list

                    <ol>
                        <li>One</li>
                        <li>Two</li>
                        <li>Three</li>
                        <li>Four</li>
                        <li>Five</li>
                    </ol>
                    
                    1. One
                    2. Two
                    3. Three
                    4. Four
                    5. Five

                    Now we will get the html of the li at 0, 3 and -1.

                    0 = "One"
                    3 = "Four"
                    -1 = "Five"



                    $().index(elem)

                    Returns the index of the selected element in the collection
                    $().index(elem)

                    Params

                    1. element - String|Object

                    Returns

                    integer - - index of selected element

                    Example

                    $().index(element) returns the numerical index of the element matching the selector.

                    Let's take the following list

                    <ol>
                        <li>One</li>
                        <li>Two</li>
                        <li>Three</li>
                        <li id="seven">Seven</li>
                        <li>Four</li>
                        <li>Five</li>
                    </ol>
                    

                    Now we want to get the index of the element with id "seven"

                    var ind=$("ol li").index("#seven");
                    
                    1. One
                    2. Two
                    3. Three
                    4. Seven
                    5. Four
                    6. Five

                    $().is(selector)

                    Returns boolean if the object is a type of the selector
                    $().is(selector)

                    param {String|Object} selector to act upon

                    Params

                      Returns

                      boolean -

                      Example

                      $().is(selector) returns a boolean if at least one element in the collection match the selector

                      Lets take the following html.

                      <ol>
                          <li>One</li>
                          <li class="foo">Two</li>
                          <li>Three</li>
                      </ol>
                      

                      We will now check three cases.

                      $("ol li").is("li"); //Check if they are LI elements
                      $("ol li").is(".foo"); //Check if there are any elements of class foo
                      $("ol li").is("div"); //Check if any elements are divs' - they are not
                      

                      Run the tests below. The last one will fail because a LI element can not be a div.

                      1. One
                      2. Two
                      3. Three

                      $.jsonP(options)

                      Execute a jsonP call, allowing cross domain scripting
                      options.url - URL to call
                      options.success - Success function to call
                      options.error - Error function to call
                      $.jsonP({url:'mysite.php?callback=?&foo=bar',success:function(){},error:function(){}});

                      Params

                      1. options - Object

                      Returns

                      null

                      Example

                      $.ajax(options)

                      Execute an Ajax call with the given options
                      options.type - Type of request
                      options.beforeSend - function to execute before sending the request
                      options.success - success callback
                      options.error - error callback
                      options.complete - complete callback - callled with a success or error
                      options.timeout - timeout to wait for the request
                      options.url - URL to make request against
                      options.contentType - HTTP Request Content Type
                      options.headers - Object of headers to set
                      options.dataType - Data type of request
                      options.data - data to pass into request. $.param is called on objects
                      var opts={
                      type:"GET",
                      success:function(data){},
                      url:"mypage.php",
                      data:{bar:'bar'},
                      }
                      $.ajax(opts);

                      Params

                      1. options - Object

                      Returns

                      null

                      Example

                      $.ajax(opts) makes an Ajax call using XMLHttpRequest Object.

                      Examples below

                      $.ajax({
                          type:"GET",
                          url:"mypage.php",
                          data:{'foo':'bar'},
                          success:function(data){}
                      });
                      

                      Below is an example for posting a JSON payload to a server

                      $.ajax({
                          type:"post",
                          url:"/api/updateuser/",
                          data:{id:1,username:'bill'},
                          contentType:"application/json"
                      });
                      

                      When the response has the type 'application/json', we will return the JSON object for you.

                      When the response has the type "application/xml", we return responseXML.

                      When the response has the type "text/html", we call $.parseJS on the result to process any JS scripts in the response.

                      Below is the code to show the dataType values

                      switch (settings.dataType) {
                          case "script":
                              settings.dataType = 'text/javascript, application/javascript';
                              break;
                          case "json":
                              settings.dataType = 'application/json';
                              break;
                          case "xml":
                              settings.dataType = 'application/xml, text/xml';
                              break;
                          case "html":
                              settings.dataType = 'text/html';
                              break;
                          case "text":
                              settings.dataType = 'text/plain';
                              break;
                          default:
                              settings.dataType = "text/html";
                              break;
                          case "jsonp":
                              return $.jsonP(opts);
                      }
                      

                      $.get(url,success)

                      Shorthand call to an Ajax GET request
                      $.get("mypage.php?foo=bar",function(data){});

                      Params

                      1. url - String
                      2. success - Function

                      Returns

                      null

                      Example

                      $.get(url,successFnc) is a shorthand call to $.ajax

                      The first parameter is the URL, the second is the sucess function. You can not specify any other options for $.ajax.

                      $.get("mydata.php?foo=bar",function(res){console.log(res)});
                      

                      $.post(url,[data],success,[dataType])

                      Shorthand call to an Ajax POST request
                      $.post("mypage.php",{bar:'bar'},function(data){});

                      Params

                      1. url - String
                      2. [data] - Object
                      3. success - Function
                      4. [dataType] - String

                      Returns

                      null

                      Example

                      $.post(url,[data],success,[dataType]) is a shorthand call to Ajax POST

                      The following is a simple post with no data and a success callback

                      $.post("mypage.php",function(res){console.log(res)});
                      

                      The next example shows how to use the data and dataType parameters

                      $.post("mypage.php",{username:'foo'},function(res){},'html');
                      

                      $.getJSON(url,data,success)

                      Shorthand call to an Ajax request that expects a JSON response
                      $.getJSON("mypage.php",{bar:'bar'},function(data){});

                      Params

                      1. url - String
                      2. [data] - Object
                      3. [success] - Function

                      Returns

                      null

                      Example

                      $.getJSON(url,data,success) is a wrapper to $.ajax that expects JSON data as the response. It will return the JSON object to the success function.

                      $.getJSON('mypage.php',
                          {'foo':'bar'},
                          function(data){
                              //interact with JSON object
                          }
                      );
                      

                      You can not specify other ajax options.

                      $.param(object,[prefix];

                      Converts an object into a key/value par with an optional prefix. Used for converting objects to a query string
                      var obj={
                      foo:'foo',
                      bar:'bar'
                      }
                      var kvp=$.param(obj,'data');

                      Params

                      1. object - Object
                      2. [prefix] - String

                      Returns

                      String - Key/value pair representation

                      Example

                      $.param(object,[prefix]) is usefull for converting an object to query string variables.

                      Let's look at the following object

                      var obj {
                          foo:'bar',
                          id:'12'
                      };
                      

                      $.parseJSON(string)

                      Used for backwards compatibility. Uses native JSON.parse function
                      var obj=$.parseJSON("{\"bar\":\"bar\"}");

                      Params

                        Returns

                        Object -

                        Example

                        This is for backwards compatibility with old plugins.

                        var obj=$.parseJSON("{\"foo\":\"bar\"}");
                        

                        Now we will parse the object and see the value of obj.foo

                        $.parseXML(string)

                        Helper function to convert XML into the DOM node representation
                        var xmlDoc=$.parseXML("bar");

                        Params

                        1. string - String

                        Returns

                        Object - DOM nodes

                        Example

                        $.parseXML takes a string and returns a DOM Document

                         var xmlDoc=$.parseXML("<xml><foo>bar</foo></xml>");
                        

                        The above will return the DOM Document that you can then interact with

                        $.uuid

                        Utility function to create a psuedo GUID
                        var id= $.uuid();

                        Params

                          Returns

                          null

                          Example

                          $.uuid creates a psuedo GUID. We uses this with plugins to create a unique id for each plugin

                          var id=$.uuid();
                          

                          $.create(type,[params])

                          $.create - a faster alertnative to $("this is some text");
                          $.create("div",{id:'main',innerHTML:'this is some text'});
                          $.create("this is some text");

                          Params

                          1. DOM - String
                          2. properties - [Object]

                          Returns

                          Object - Returns an appframework object

                          Example

                          $.create(type,[params]) is new for 2.0. It is a faster, and sometimes "safter" way to create DOM Nodes.

                          $.create allows you to bypass logic inside the $() engine and jump right to element creation. It returns an App Framework collection.

                          $.create works two ways.

                          1. Parse a string and return the DOM elements (slower)
                          2. Create the element using document.createElement and setting properties (faster)

                          Below are two examples that provide the same node. The first is faster.

                          var faster=$.create("div",{id:"test",html:"Test HTML"})
                          var slower=$.create(" < div id='test'>Test HTML< /div> ");
                          

                          $.query(selector,[context])

                          $.query - a faster alertnative to $("div");
                          $.query(".panel");

                          Params

                          1. selector - String
                          2. [context] - Object

                          Returns

                          Object - Returns an appframework object

                          Example

                          $.query(selector,[context]) is faster then using $() to find an element using a query selector.

                          $() has a lot of logic to handle finding elements, turning arrays/objects into a collection, etc.

                          $.query lets you jump right to the query selector engine and returns an App Framework collection. You should use this when possible.

                          When context is passed in, it must be a DOM node to search within.

                          var divs=$.query("divs");
                          var elem=$.query("#main");
                          var lis=$.query("li",$("#main").get(0));
                          

                          $().bind(event,callback)

                          Binds an event to each element in the collection and executes the callback
                          $().bind('click',function(){console.log('I clicked '+this.id);});

                          Params

                          1. event - String|Object
                          2. callback - Function

                          Returns

                          Object - appframework object

                          Example

                          $().bind(event,callback) binds an event for each element in the collection, and executes a callback when teh event is dispatched.

                          When calling $().bind(), the elements MUST already exist in the DOM to be able to recieve an event listener. It is sometimes better to use
                          $().on instead for event delegation when your DOM has dynamic content.

                          Below is a sample of binding a click event to all list items

                          $("ol li").bind("click",function(event){alert(this.innerHTML)});
                          
                          <ol>
                              <li>One</li>
                              <li>Two</li>
                              <li>Three</li>
                          </ol>
                          

                          Click one of the items below

                          1. One
                          2. Two
                          3. Three

                          $().unbind(event,[callback]);

                          Unbinds an event to each element in the collection. If a callback is passed in, we remove just that one, otherwise we remove all callbacks for those events
                          $().unbind('click'); //Unbinds all click events
                          $().unbind('click',myFunc); //Unbinds myFunc

                          Params

                          1. event - String|Object
                          2. [callback] - Function

                          Returns

                          Object - appframework object

                          Example

                          $().unbind(event,callback) unbinds an event for each element in the collection.

                          If no callback function is passed in, we remove all listeners for that event.

                          Below is a sample of unbinding all click event to all list items

                          $("ol li").unbind("click");
                          

                          Say we had multiple click listners, but only want to unbind one

                          function bindOne(){
                          }
                          function bindTwo(){
                          }
                          $("ol li").bind("click",bindOne);
                          $("ol li").bind("click",bindTwo);
                          

                          Now we want to unbind only "bindOne"

                          $("ol li").unbind("click",bindOne);
                          
                          <ol>
                              <li>One</li>
                              <li>Two</li>
                              <li>Three</li>
                          </ol>
                          

                          Click one of the items below.

                          1. One
                          2. Two
                          3. Three

                          $().one(event,callback);

                          Binds an event to each element in the collection that will only execute once. When it executes, we remove the event listener then right away so it no longer happens
                          $().one('click',function(){console.log('I was clicked once');});

                          Params

                          1. event - String|Object
                          2. [callback] - Function

                          Returns

                          appframework - object

                          Example

                          $().one(event,callback) Registers an event listener and only executes it once.

                          There are many times where you only want an event to happen one time, and then remove it. This allows you to do that.

                          $("#testAnchor").one("click",function(){alert("Submitting form")});
                          

                          Try clicking the following button. It will execute an alert one time.

                          $().delegate(selector,event,[data],callback)

                          Delegate an event based off the selector. The event will be registered at the parent level, but executes on the selector.
                          $("#div").delegate("p",'click',callback);

                          Params

                          1. selector - String|Array|Object
                          2. event - String|Object
                          3. data - Object
                          4. callback - Function

                          Returns

                          Object - appframework object

                          Example

                          $().delegate() is provided for backwards compatibility only. You should use $().on instead.

                          $().undelegate(selector,event,[callback]);

                          Unbinds events that were registered through delegate. It acts upon the selector and event. If a callback is specified, it will remove that one, otherwise it removes all of them.
                          $("#div").undelegate("p",'click',callback);//Undelegates callback for the click event
                          $("#div").undelegate("p",'click');//Undelegates all click events

                          Params

                          1. selector - String|Array|Object
                          2. event - String|Object
                          3. callback - Function

                          Returns

                          Object - appframework object

                          Example

                          $().undelegate() is provided for backwards compatibility only. You should use $().off instead.

                          $().on(event,selector,[data],callback);

                          Similar to delegate, but the function parameter order is easier to understand.
                          If selector is undefined or a function, we just call .bind, otherwise we use .delegate
                          $("#div").on("click","p",callback);

                          Params

                          1. selector - String|Array|Object
                          2. event - String|Object
                          3. data - Object
                          4. callback - Function

                          Returns

                          Object - appframework object

                          Example

                          $().on() allows you to delegate events to a parent and then search for a selector to execute it against.

                          Say you have a list that you are adding items to dynamcally. You want to capture a click on each one, but binding to individual one's on DOM changes is cumbersome. Instead, you can bind to an ancestor, and then provide a selector to execute against.

                          <ol>
                              <li>One</li>
                              <li>Two</li>
                              <li>Three</li>
                          </ol>
                          

                          To bind a click event, we can do

                          $("ol").on("click","li",function(){alert(this.innerHTML)});
                          

                          Below is a list. There is a button to append options to the list. We will delegate the click to the <ol> and then select the <li> it was click on to execute.

                          Click an item below

                          1. One
                          2. Two

                          $().off(event,selector,[callback])

                          Removes event listeners for .on()
                          If selector is undefined or a function, we call unbind, otherwise it's undelegate
                          $().off("click","p",callback); //Remove callback function for click events
                          $().off("click","p") //Remove all click events

                          Params

                          1. event - String|Object
                          2. selector - String|Array|Object
                          3. callback - Sunction

                          Returns

                          Object - appframework object

                          Example

                          $().off(event,selector,[callback]) will remove a delegate added by $().on()

                          If a callback is specificed, it will only remove that callback.

                          Below is a sample of undelegating all click event to all list items

                          $("ol").off("click","li");
                          

                          Say we had multiple click listners, but only want to unbind one

                          function bindOne(){
                          }
                          function bindTwo(){
                          }
                          $("ol").on("click","li",bindOne);
                          $("ol").on("click","li",bindTwo);
                          

                          Now we want to unbind only "bindOne"

                          $("ol").of("click","li",bindOne);
                          
                          <ol>
                              <li>One</li>
                              <li>Two</li>
                              <li>Three</li>
                          </ol>
                          

                          Click one of the items below.

                          1. One
                          2. Two
                          3. Three

                          $().trigger(event,data);

                          This triggers an event to be dispatched. Usefull for emulating events, etc.
                          $().trigger("click",{foo:'bar'});//Trigger the click event and pass in data

                          Params

                          1. event - String|Object
                          2. [data] - Object

                          Returns

                          Object - appframework object

                          Example

                          $().trigger(event,data) allows you to trigger any event on the collection. This is usefull for emulating events, or sending custom events for listeners and delegates.

                          $("#triggerTest").trigger("customEvent");
                          

                          Below is a div that we will register "customEvent" for

                          <div id="triggerTest">Won't respond to a click</div>
                          
                          $("#triggerTest").bind("customEvent",function(){alert("Responding to custom event")});
                          
                          Won't respond to a click

                          $.Event(type,props);

                          Creates a custom event to be used internally.

                          Params

                          1. type - String
                          2. [properties] - Object

                          Returns

                          event - a custom event that can then be dispatched

                          Example

                          $.bind(object,event,function);

                          Bind an event to an object instead of a DOM Node
                          $.bind(this,'event',function(){});

                          Params

                          1. object - Object
                          2. event - String
                          3. function - Function

                          Returns

                          null

                          Example

                          $.bind(object,eventfunction) works the same as $().bind, except you are binding events on JavaScript Objects.

                          We use this to bind events in the touchLayer and scrolling libraries.

                          $.bind($.touchLayer, 'orientationchange-reshape', orientationChangeProxy);

                          $.trigger(object,event,argments);

                          Trigger an event to an object instead of a DOM Node
                          $.trigger(this,'event',arguments);

                          Params

                          1. object - Object
                          2. event - String
                          3. arguments - Array

                          Returns

                          null

                          Example

                          $.unbind(object,event,function);

                          Unbind an event to an object instead of a DOM Node
                          $.unbind(this,'event',function(){});

                          Params

                          1. object - Object
                          2. event - String
                          3. function - Function

                          Returns

                          null

                          Example

                          $.bind(object,eventfunction) works the same as $().unbind, except you are unbinding events on JavaScript Objects.

                          The following will tell the $.touchLayer object to no longer respond to "orientationchange-reshape" events
                          $.unbind($.touchLayer, 'orientationchange-reshape', orientationChangeProxy);

                          $.proxy(callback,context);

                          Creates a proxy function so you can change the 'this' context in the function
                          Update: now also allows multiple argument call or for you to pass your own arguments
                          ```
                          var newObj={foo:bar}
                          $("#main").bind("click",$.proxy(function(evt){console.log(this)},newObj);

                          Params

                          1. Callback - Function
                          2. Context - Object

                          Returns

                          null

                          Example

                          $.proxy(callback,context) allows you to create a proxy function that changes the context of "this"

                          There are times where you want "this" to be something other then the object that the event or function is dispatched on.

                          var newObj={foo:bar}
                          $("#main").bind("click",$.proxy(function(evt){console.log(this)},newObj);
                          or
                          ( $.proxy(function(foo, bar){console.log(this+foo+bar)}, newObj) )('foo', 'bar');
                          or
                          ( $.proxy(function(foo, bar){console.log(this+foo+bar)}, newObj, ['foo', 'bar']) )();
                          

                          Below we will have an anchor and proxy the click event so "this" is the object {foo:'bar'}

                          var obj={foo:'bar'}
                          $("#proxyTest").bind("click",$.proxy(function(){alert(this.foo);},obj));
                          

                          $.cleanUpContent(node,itself,kill)

                          Function to clean up node content to prevent memory leaks
                          $.cleanUpContent(node,itself,kill)

                          Params

                          1. node - HTMLNode
                          2. kill - Bool
                          3. Kill - bool

                          Returns

                          null

                          Example

                          $.cleanUpContent(node,[itself],[kill]) traverses through the dom and tries to de-regster any event listeners to prevent memory leaks.

                          This is called internally by $().html() and $().empty(). It does slow down those operations, but the gain is worth it.

                          Below is the code for $().html() to show how we use it

                          html: function (html, cleanup) {
                              if (this.length === 0)
                                  return this;
                              if (html ===nundefined)
                                  return this[0].innerHTML;
                              for (var i = 0; i < this.length; i++) {
                                  if (cleanup !== false)
                                      $.cleanUpContent(this[i], false, true);
                                  if(isWin8)
                                  {
                                      MSApp.execUnsafeLocalFunction(function(){
                                          this[i].innerHTML=html;
                                      });
                                  }
                                  else
                                      this[i].innerHTML = html;
                              }
                              return this;
                          },
                          

                          $.parseJS(content);

                          this function executes javascript in HTML.
                          $.parseJS(content)

                          Params

                          1. content - String|DOM

                          Returns

                          null

                          Example

                          $.parseJS(content) - This executes javascript inside an HTML string. This is usefull if you are performing an Ajax request that has JS inside that needs to be evaluated. If there are any script tags, they get added to the head tag.

                          var str="< script>alert('hi')< /script>";
                          $parseJS(str);
                          

                          Let's try the above

                          $.ui.setSideMenuWidth

                          This changes the side menu width

                          $.ui.setSideMenuWidth('300px');

                          Params

                            Returns

                            null

                            Example

                            $.ui.setSideMenuWidth(width) - This is a new API for 2.0. This allows you to programatically set the width of your side menu.

                            This overrides the default CSS style. This is used for animation and swiping to reveal.

                            $.ui.setSideMenuWidth("200px"); //static 200px
                            

                            Here we will set the width so only 50px of the main screen is available

                            $.ui.setSideMenuWidth(($("#content").width()-50)+"px");
                            

                            $.ui.disableNativeScrolling

                            this will disable native scrolling on iOS

                            Params

                              Returns

                              null

                              Example

                              $.ui.disableNativeScrolling() - this must be called before $.ui.launch happens.

                              This will disable native scrolling on iOS5+ globally and force javascript scrolling.

                              $.ui.disableNativeScrolling();
                              

                              $.ui.manageHistory

                              This is a boolean property. When set to true, we manage history and update the hash
                              $.ui.manageHistory=false;//Don't manage for apps using Backbone

                              Params

                                Returns

                                null

                                Example

                                $.ui.manageHistory - This is a boolean property. The default is true. When this is true, we manage history internally and update the hash.

                                When set to false, we do not manage history/hash. This is useful for some frameworks like Backbone.js

                                This should be set before $.ui.launch is executed.

                                $.ui.manageHistory=false;
                                

                                $.ui.loadDefaultHash

                                This is a boolean property. When set to true (default) it will load that panel when the app is started
                                $.ui.loadDefaultHash=false; //Never load the page from the hash when the app is started
                                $.ui.loadDefaultHash=true; //Default

                                Params

                                  Returns

                                  null

                                  Example

                                  $.ui.loadDefaultHash is a boolean value you set before $.ui.launch happens. This tells the browser to load the first panel off the hash/URL being loaded.

                                  $.ui.loadDefaultHash=true;
                                  $.ui.launch();
                                  

                                  Look at the URL above, you should see the hash "#$.ui.loadDefaultHash" . That is the ID for this panel. If you reload the page, you will be taken back here, instead of the main panel.

                                  Reload the page

                                  $.ui.useAjaxCacheBuster

                                  This is a boolean that when set to true will add "&cache=rand" to any ajax loaded link
                                  The default is false
                                  $.ui.useAjaxCacheBuster=true;

                                  Params

                                    Returns

                                    null

                                    Example

                                    $.ui.useAjaxCacheBuster - when set to true, any anchor links that are ajax reqeusts to panels will add a "cache buster" parameter to block the browser from caching the request.

                                    $.ui.useAjaxCacheBuster=true;
                                    

                                    $.ui.actionsheet()

                                    This is a shorthand call to the $.actionsheet plugin. We wire it to the afui div automatically
                                    $.ui.actionsheet("Settings Logout")
                                    $.ui.actionsheet("[{
                                    text: 'back',
                                    cssClasses: 'red',
                                    handler: function () { $.ui.goBack(); ; }
                                    }, {
                                    text: 'show alert 5',
                                    cssClasses: 'blue',
                                    handler: function () { alert("hi"); }
                                    }, {
                                    text: 'show alert 6',
                                    cssClasses: '',
                                    handler: function () { alert("goodbye"); }
                                    }]");

                                    Params

                                    1. links - String|Array

                                    Returns

                                    null

                                    Example

                                    $.ui.actionsheet is a shortcut to the action sheet plugin.

                                    $.ui.actionsheet("<a href='javascript:;' class='button'>Settings</a> <a href='javascript:;' class='button red'>Logout</a>")
                                    

                                    Let's try it below

                                    $.ui.popup(opts)

                                    This is a wrapper to $.popup.js plugin. If you pass in a text string, it acts like an alert box and just gives a message
                                    $.ui.popup(opts);
                                    $.ui.popup( {
                                    title:"Alert! Alert!",
                                    message:"This is a test of the emergency alert system!! Don't PANIC!",
                                    cancelText:"Cancel me",
                                    cancelCallback: function(){console.log("cancelled");},
                                    doneText:"I'm done!",
                                    doneCallback: function(){console.log("Done for!");},
                                    cancelOnly:false
                                    });
                                    $.ui.popup('Hi there');

                                    Params

                                    1. options - Object|String

                                    Returns

                                    null

                                    Example

                                    $.ui.popup is a wrapper to the popup plugin.

                                    Below are two examples

                                    $.ui.popup('Hi there');
                                    $.ui.popup( {
                                        title:"Alert! Alert!",
                                        message:"This is a test of the emergency alert system!! Don't PANIC!",
                                        cancelText:"Cancel me",
                                        cancelCallback: function(){console.log("cancelled");},
                                        doneText:"I'm done!",
                                        doneCallback: function(){console.log("Done for!");},
                                        cancelOnly:false
                                    });
                                    

                                    Let's try them below.

                                    $.ui.blockUI(opacity)

                                    This will throw up a mask and block the UI
                                    $.ui.blockUI(.9)
                                    `

                                    Params

                                    1. opacity - Float

                                    Returns

                                    null

                                    Example

                                    $.ui.blockUI is a shortcut to $.blockUI from the popup plugin.

                                    This function throws up a mask on the screen and is used with plugins like the popup plugin.

                                    $.ui.blockUI(0.9)
                                    

                                    Let's try it below. We will hide it after 3 seconds.

                                    $.ui.unblockUI()

                                    This will remove the UI mask
                                    $.ui.unblockUI()
                                    `

                                    Params

                                      Returns

                                      null

                                      Example

                                      $.ui.unblockUI is a shortcut to $.unblockUI from the popup plugin.

                                      This function clears the mask that was created by $.blockUI

                                      $.ui.removeFooterMenu

                                      Will remove the bottom nav bar menu from your application
                                      $.ui.removeFooterMenu();

                                      Params

                                        Returns

                                        null

                                        Example

                                        $.ui.removeFooterMenu will remove the footer from your application for every page.

                                        $.ui.removeFooterMenu();
                                        

                                        You can try it below, but you will loose the footer and have to reload the page.

                                        $.ui.autoLaunch

                                        Boolean if you want to auto launch afui
                                        ```
                                        $.ui.autoLaunch = false; //

                                        Params

                                          Returns

                                          null

                                          Example

                                          $.ui.autoLaunch when set to true, your app will launch as soon as possible (after the document is ready).

                                          If you need to run logic before launching the app, set $.ui.autoLaunch to false and call $.ui.launch() manually.

                                          $.ui.showBackButton

                                          Boolean if you want to show the back button
                                          ```
                                          $.ui.showBackButton = false; //

                                          Params

                                            Returns

                                            null

                                            Example

                                            $.ui.showBackButton . When set to false before your app starts, this will always hide the back button.

                                            $.ui.showBackButton=false;
                                            

                                            $.ui.backButtonText

                                            Override the back button text
                                            $.ui.backButtonText="Back"

                                            Params

                                              Returns

                                              null

                                              Example

                                              $.ui.backButtonText will override the back button text everywhere in the application.

                                              $.ui.backButtonText='Back';
                                              

                                              $.ui.resetScrollers

                                              Boolean if you want to reset the scroller position when navigating panels. Default is true
                                              $.ui.resetScrollers=false; //Do not reset the scrollers when switching panels

                                              Params

                                                Returns

                                                null

                                                Example

                                                $.ui.resetScrollers - when set to true, the scrollers will always revert to the top of the page when you load a new panel.

                                                $.ui.resetScrollers=false; //Do not reset the scrolling position
                                                

                                                $.ui.ready

                                                function to fire when afui is ready and completed launch
                                                $.ui.ready(function(){console.log('afui is ready');});

                                                Params

                                                1. function - Function

                                                Returns

                                                null

                                                Example

                                                $.ui.ready - this is similar to $(document).ready but fires after App Framework UI has launched.

                                                If you use data-defer to load content, this launches AFTER all data-defer files are loaded.

                                                If the event has already dispatched and you create a $.ui.ready function, it will execute right away.

                                                $.ui.ready(function(){
                                                    //App is ready lets check if a user exists.
                                                    if(user===false)
                                                       return $.ui.loadContent("#login");
                                                    else
                                                        return $.ui.loadContent("#main");
                                                });
                                                

                                                $.ui.setBackButtonStyle(class)

                                                Override the back button class name
                                                $.ui.setBackButtonStyle('newClass');

                                                Params

                                                1. new - String

                                                Returns

                                                null

                                                Example

                                                $.ui.setBackButtonStyle this function will override the back button styles with whatever style you want.

                                                By default, the class is "button".

                                                $.ui.setBackButtonStyle("myCustomClass");
                                                

                                                $.ui.goBack()

                                                Initiate a back transition
                                                $.ui.goBack()

                                                Params

                                                1. [delta=1] - Number

                                                Returns

                                                null

                                                Example

                                                $.ui.goBack() sends the user back one page in the history stack.

                                                This is the same as clicking the back button.

                                                $.ui.goBack();
                                                

                                                Try it below.

                                                $.ui.clearHistory()

                                                Clear the history queue
                                                $.ui.clearHistory()

                                                Params

                                                  Returns

                                                  null

                                                  Example

                                                  $.ui.clearHistory() will clear the history queue. This will remove the back button from the header until a new page is loaded.

                                                  $.ui.clearHistory();
                                                  

                                                  Try it below.

                                                  $.ui.updateBadge(target,value,[position],[color])

                                                  Update a badge on the selected target. Position can be
                                                  bl = bottom left
                                                  tl = top left
                                                  br = bottom right
                                                  tr = top right (default)
                                                  $.ui.updateBadge('#mydiv','3','bl','green');

                                                  Params

                                                  1. target - String
                                                  2. Value - String
                                                  3. [position] - String
                                                  4. [color - String|Object

                                                  Returns

                                                  null

                                                  Example

                                                  $.ui.updateBadge - creates or updates a badge.

                                                  If the badge does not exist, it will create it. If it does exist, it will update it with the new options.

                                                  $.ui.updateBadge("#myTest","3","tl",); //Badge will appear on the top left
                                                  $.ui.updateBadge("#myTest","5","bl","blue"); //Badge will appear on the bottom left with a blue background
                                                  

                                                  Let's update the badge below

                                                  • Test

                                                  $.ui.removeBadge(target)

                                                  Removes a badge from the selected target.
                                                  $.ui.removeBadge('#mydiv');

                                                  Params

                                                  1. target - String

                                                  Returns

                                                  null

                                                  Example

                                                  $.ui.removeBadge removes a badge that was created with $.ui.updateBadge

                                                  $.ui.removeBadge("#myListTest li");
                                                  
                                                  • One

                                                  $.ui.toggleNavMenu([force])

                                                  Toggles the bottom nav menu. Force is a boolean to force show or hide.
                                                  $.ui.toggleNavMenu();//toggle it
                                                  $.ui.toggleNavMenu(true); //force show it

                                                  Params

                                                  1. [force] - Boolean

                                                  Returns

                                                  null

                                                  Example

                                                  $.ui.toggleNavMenu(force) - will toggle the nav (footer) menu for your app.

                                                  If you specify false for "force", it will always hide the navbar.

                                                  If you specify true for "force", it will always show the navbar.

                                                  $.ui.toggleHeaderMenu([force])

                                                  Toggles the top header menu. Force is a boolean to force show or hide.
                                                  $.ui.toggleHeaderMenu();//toggle it

                                                  Params

                                                  1. [force] - Boolean

                                                  Returns

                                                  null

                                                  Example

                                                  $.ui.toggleHeaderMenu(force) - will toggle the header menu for your app.

                                                  If you specify false for "force", it will always hide the header.

                                                  If you specify true for "force", it will always show the header.

                                                  $.ui.toggleSideMenu([force],[callback],[time])

                                                  Toggles the side menu. Force is a boolean to force show or hide.
                                                  $.ui.toggleSideMenu();//toggle it

                                                  Params

                                                  1. [force] - Boolean
                                                  2. [callback] - Function
                                                  3. [time] - int

                                                  Returns

                                                  null

                                                  Example

                                                  $.ui.toggleSideMenu(force) - will toggle the Side menu for your app.

                                                  note On tablets and desktops, we always show the side menu so resize your browser to test this.

                                                  If you specify false for "force", it will always hide the Side Menu.

                                                  If you specify true for "force", it will always show the Side Menu.

                                                  $.ui.disableSideMenu();

                                                  Disables the side menu
                                                  $.ui.disableSideMenu();

                                                  Params

                                                    Returns

                                                    null

                                                    Example

                                                    $.ui.disableSideMenu() will disable/remove the side menu for your app.

                                                    This function removes the special class ".hasMenu" and hides the side menu.

                                                    Try it below, but you will have to reload the page to get the side menu back.

                                                    $.ui.enableSideMenu();

                                                    Enables the side menu if it has been disabled
                                                    $.ui.enableSideMenu();

                                                    Params

                                                      Returns

                                                      null

                                                      Example

                                                      $.ui.enableSideMenu() will enable/add the side menu for your app.

                                                      This function adds the special class ".hasMenu" and enables the side menu.

                                                      $.ui.updateNavbarElements(Elements)

                                                      Updates the elements in the navbar
                                                      $.ui.updateNavbarElements(elements);

                                                      Params

                                                      1. Elements - String|Object

                                                      Returns

                                                      null

                                                      Example

                                                      $.ui.updateNavbarElements(elements) will update the navbar (footer) with the elements passed in

                                                      This expects a <footer> as the container with all the elements in it.

                                                      <footer id="myTestFooter">
                                                          <a href="#af_ui" class="icon pencil">af.ui</a><a href="#appframework" class="icon bug">appframework</a>
                                                      </footer>
                                                      
                                                      $.ui.updateNavbarElements($("#myTestFooter"));
                                                      

                                                      Let's try it below

                                                      $.ui.updateHeaderElements(Elements)

                                                      Updates the elements in the header
                                                      $.ui.updateHeaderElements(elements);

                                                      Params

                                                      1. Elements - String|Object

                                                      Returns

                                                      null

                                                      Example

                                                      $.ui.updateSideMenuElements(Elements)

                                                      Updates the elements in the side menu
                                                      $.ui.updateSideMenuElements(elements);

                                                      Params

                                                      1. Elements - String|Object

                                                      Returns

                                                      null

                                                      Example

                                                      $.ui.updateSideMenuElements(elements) will update the side menu with the elements passed in

                                                      <nav id="myTestSideMenu">
                                                          <ul class="list">
                                                              <li><a href="#af_ui" class="icon pencil">af.ui</a></li>
                                                              <li><a href="#appframework" class="icon bug">appframework</a></li>
                                                          </ul>
                                                      </nav>
                                                      
                                                      $.ui.updateSideMenuElements($("#myTestSideMenu"));
                                                      

                                                      Let's try it below

                                                      $.ui.setTitle(value)

                                                      Set the title of the current panel
                                                      $.ui.setTitle("new title");

                                                      Params

                                                      1. value - String

                                                      Returns

                                                      null

                                                      Example

                                                      $.ui.setTitle(title) will change the title for the current panel.

                                                      This expects a string and will udpate the <h1> tag in the header with the value.

                                                      $.ui.setBackButtonText(value)

                                                      Override the text for the back button
                                                      $.ui.setBackButtonText("GO...");

                                                      Params

                                                      1. value - String

                                                      Returns

                                                      null

                                                      Example

                                                      $.ui.setBackButtonText(text) - This will change the back button text for the current panel.

                                                      If you set $.ui.backButtonText (like this API doc does) , you can not use this function to change the back button text.

                                                      $.ui.setBackButtonText("Go Back");
                                                      

                                                      $.ui.showMask(text);

                                                      Show the loading mask
                                                      $.ui.showMask()
                                                      $.ui.showMask('Doing work')

                                                      Params

                                                      1. [text] - String

                                                      Returns

                                                      null

                                                      Example

                                                      $.ui.showMask(text) >This will show the loading mask. You can trigger this manually for long operations.

                                                      $.ui.showMask("Loading...");
                                                      

                                                      $.ui.hideMask();

                                                      Hide the loading mask

                                                      Params

                                                        Returns

                                                        null

                                                        Example

                                                        $.ui.hideMask This will hide the loading mask.

                                                        $.ui.hideMask()
                                                        

                                                        $.ui.showModal();

                                                        Load a content panel in a modal window. We set the innerHTML so event binding will not work. Please use the data-load or panelloaded events to setup any event binding
                                                        $.ui.showModal("#myDiv","fade");

                                                        Params

                                                        1. panel - String|Object
                                                        2. [transition] - String

                                                        Returns

                                                        null

                                                        Example

                                                        $.ui.showModal() will load a panel as a modal window (full overlay).

                                                        Because we use .html(), events are not registered. Please use the data-load or "loadpanel" event to wire them for that modal window.

                                                        $.ui.showModal("#$.ui.showModal");
                                                        

                                                        Show this page as a modal window.

                                                        $.ui.hideModal();

                                                        Hide the modal window and remove the content. We remove any event listeners on the contents.
                                                        $.ui.hideModal("");

                                                        Params

                                                          Returns

                                                          null

                                                          Example

                                                          $.ui.updatePanel(id,content);

                                                          Update the HTML in a content panel
                                                          $.ui.updatePanel("#myDiv","This is the new content");

                                                          Params

                                                          1. panel - String|Object
                                                          2. html - String

                                                          Returns

                                                          null

                                                          Example

                                                          $.ui.updatePanel(id,content) will update the content of a panel. You must use this due to JS scrollers requiring a wrapper div.

                                                          $.ui.updatePanel("#$_ui_updatePanel","This is new content");
                                                          

                                                          Try it below. We will change the content of this panel.

                                                          $.ui.updateContentDiv(id,content);

                                                          Same as $.ui.updatePanel. kept for backwards compatibility
                                                          $.ui.updateContentDiv("#myDiv","This is the new content");

                                                          Params

                                                          1. panel - String|Object
                                                          2. html - String

                                                          Returns

                                                          null

                                                          Example

                                                          $.ui.addContentDiv(id,content,title);

                                                          Dynamically creates a new panel. It wires events, creates the scroller, applies Android fixes, etc.
                                                          $.ui.addContentDiv("myDiv","This is the new content","Title");

                                                          Params

                                                          1. Element - String|Object
                                                          2. Content - String
                                                          3. title - String

                                                          Returns

                                                          null

                                                          Example

                                                          $.ui.addContentDiv(id,content,title) - This will create a new panel in your application for you.

                                                          This handles all the heavy lifting, like wiring scollers and calling android fixes if needed. This will add the div to the DOM with the class="panel"

                                                          $.ui.addContentDiv("myTestPanel","This is a newly added panel","New Panel");
                                                          

                                                          Let's try it below.

                                                          $.ui.scrollToTop(id);

                                                          Scrolls a panel to the top
                                                          $.ui.scrollToTop(id);

                                                          Params

                                                          1. id - String
                                                          2. Time - string

                                                          Returns

                                                          null

                                                          Example

                                                          $.ui.scrollToBottom(id);

                                                          Scrolls a panel to the bottom
                                                          $.ui.scrollToBottom(id,time);

                                                          Params

                                                          1. id - String
                                                          2. Time - string

                                                          Returns

                                                          null

                                                          Example

                                                          $.ui.loadContent(target,newTab,goBack,transition);

                                                          This is called to initiate a transition or load content via ajax.
                                                          We can pass in a hash+id or URL and then we parse the panel for additional functions
                                                          $.ui.loadContent("#main",false,false,"up");

                                                          Params

                                                          1. target - String
                                                          2. newtab - Boolean
                                                          3. go - Boolean
                                                          4. transition - String

                                                          Returns

                                                          null

                                                          Example

                                                          $.ui.loadContent(target, newTab, goBack, transition)

                                                          This allows you to programatically initiate a transition. You specify the target panel, if it's a new tab and should clear the history, if it's going back, and the transition you want.

                                                          Below are two examples. The first will go back with a pop transition and clear the history stack. The second will go fowarded.

                                                          $.ui.loadContent("#af_ui",true,true,"pop");
                                                          $.ui.loadContent("#af_ui",false,false,"slide");
                                                          

                                                          $.ui.launch();

                                                          This is callled when you want to launch afui. If autoLaunch is set to true, it gets called on DOMContentLoaded.
                                                          If autoLaunch is set to false, you can manually invoke it.
                                                          $.ui.autoLaunch=false;
                                                          $.ui.launch();

                                                          Params

                                                            Returns

                                                            null

                                                            Example

                                                            $.ui.launch() tells App Framework UI to run the startup code. When $.ui.autoLaunch is set to true, this is called when the DOM is ready.

                                                            $.ui.autoLaunch=false;
                                                            /* Do your stuff */
                                                            function doLaunch(){
                                                                $.ui.launch();
                                                            }
                                                            document.addEventListener("appMobi.device.ready",doLaunch,false); //Intel apps
                                                            document.addEventListener("deviceready",doLaunch,false);// Phonegap apps
                                                            

                                                            $.ui.finishTransition(oldDiv)

                                                            This must be called at the end of every transition to remove all transforms and transitions attached to the inView object (performance + native scroll)

                                                            Params

                                                            1. Div - Object

                                                            Returns

                                                            null

                                                            Example

                                                            $.ui.finishTransition(oldDiv) must be called at the end of a transition to tell App Framework UI it can continue on.

                                                            When you are creating a custom transition, call this at the end with the div being "hidden".

                                                            function myNewTransition(){
                                                                //Do transition code
                                                                $.ui.finishTransition(oldDiv);
                                                            }