App Framework

Starting app

Welcome

Welcome to the kitchen sink demo for App Framework. Here you will find samples of how to use the App Framework libraries. Please select an option from below.

$("#form").serialize() - will return a key/value pair string of the form elements

Name:


Gender:


Div 1 (class="af2")
Div 2 (class="af2")
Div 3 (class="af2")
Div 4 (class="af4")

Click to get the Length by classname
$("#div").find("li") find all element(s) inside a container

  • Item 1
  • Item 2
Click to get the count of li's in the div

$("#div").html() allows you to get or set a contents HTML.

This is some content


Get Content| Set Content
$("#div").text() allows you to get or set a contents text.

This is some text other text


Get Text| Set Text
$("#div").css() - allows you to get or set a CSS property.

This is some content


Get background color
Set background color
$("#div").empty() - will empty out the contents of the element.

This is some content


$().empty()
$("#div").hide() - will set the elements display property to "none".

This is some content

Hide the div
$("#div").show() - will set the elements display property to "block".


Show the div
$("#div").toggle() - will toggle the elements display property.

This is some content


Toggle a div
$("#div").val() - will get or set the value of an HTML element.



Get Value
Set Value
$("#div").attr() - will get or set an attribute of an HTML element.

The data-test attribute is set to "foo" - data-test="foo"


Get Attribute Value
Set Attribute Value
$("#div").removeAttr() - will remove an attribute of an HTML element.

The data-test attribute is set to "foo" - data-test="foo"

Get Attribute Value
Remove Attribute Value
$("#div").remove() - will remove an element from the parent container.

This is content that will be removed from the DOM.

Remove the Element
$("#div").addClass() - adds a css class to the element.

This is some content


Add a Class
$("#div").removeClass() - removes a css class to the element.

This is some content

Remove the Class
$("#div").hassClass() - returns a boolean if an element has a class.

This is some content

Check if it has the class
$("#div").bind() - binds an event to an element.

Test Link to bind event to

Bind Event
$("#div").unbind() - unbinds an event from an element.

This is a test link

Bind Event
Unbind Event
$("#div").trigger() - triggers an event on an element.

Click to test me

Trigger Event
$("#div").append() - appends an element or content.

I'll append content after the <hr>


Append Content
$("#div").prepend() - prepends an element or content.

I'll prepend content before the <hr>


Prepend Content
$("#div").offset() - Gets the left and top offset of an element.

Get Offsett
$("#div").get(0) - Get's an individual element by index.

Get first panel
$.jsonP(url:"URL", success:function(){}, timeout:"1000", error:function(){} ) - makes a jsonP call for cross domain scripting

This will get updated with content from the jsonP call


Make jsonP call
$.ajax(url:"URL", success:function(){}, timeout:"1000", error:function(){} ) - makes an Ajax call

This will get updated with content from the ajax call


Make Ajax Call
$.get(url:"URL", success:function(){}, timeout:"1000", error:function(){} ) - makes an Ajax call

This will get updated with content from the ajax call


Make Get Call
$.post(url,data:{foo:"bar"}, success:function(){}, timeout:"1000",error: function(){} ) - makes an Ajax call

This will get updated with content from the ajax call


Make Post Call
$.getJSON(url,data,success); - Makes a XMLHpttRequest GET request and returns a JSON object.

Returned object

Make GetJson Call
$.param() - serializes an object into key/value pairs for a querystring.

var obj= {foo:"foo",bar:"bar"};

Serialized parameters will show here.


Make param Call
$.parseJSON() - parses a string and converts it into a JSON object. Uses the native JSON parser, but is added for backwards compatibility.

var obj='{"foo":"bar"}';
Parse JSON string
$.os - holds information about the OS of the device, and if it is a webkit browser

$.os.webkit =
$.os.android =
$.os.ipad =
$.os.iphone =
$.os.ios =
$.os.webos =
$.os.touchpad =
$.os.blackberry =
$.os.opera =
$.os.fennec =
$.isArray(param) - returns a boolean if the parameter is an array.

var notArrayTest="foo";
var isArrayTest=[];

test notArrayTest
test isArrayTest
$.isFunction(param) - returns a boolean if the parameter is a function.

var notFunctionTest="foo";
var isFunctionTest=function(){};

test notFunctionTest
test isFunctionTest
This returns the parent elements for the previously found elements in the container
$("#afparent").parent();
The parent id for this div is "content". Let's verify it.
Get Parent ID

App Framework UI

App Framework UI is the User Interface/User Experience library for mobile applications. It uses HTML5 and CSS3 for animations and transitions. We built the kitchen sink using App Framework UI. It is comprised of components from the Plugins library and additional features.
* Fixed navigation bar
* Auto scrolling content panels
* Optional footer to segment your application

Vector Icons

App Framework UI provides Vector icons to use throughout your app. Simply add the icon class, along with the image class name and additional sizes you want.
.mini - .7em high
.big - 1.5em hight
The default is 1em.

Deferred loading requires a web browser for Ajax to work. What we do is load the html after $.ui.ready is called, so you can speed up the initial loading time of your app.
Side Menu Navigation
If you are on a tablet, you'll already see the side menu. If you are on a phone, click the "Powered by AppFramework" button to expand it.

Side menu's are created using the <nav> tags. You can set the id and then refer to them on each panel by setting the data-menu='id' property. The side menu's will only show if you have <nav> defined.

You should notice that the footer is no longer the default. It is specific to App Framework UI, with options for Transitions, UI and API

You can create custom fotoers using the <footer> tag. You then set the id on each panel to change them using the data-footer='id' property.

You can specify the following types of grids

  • col2 - 50% (2x2)
  • col3 - 33.3% (3x3)
  • col1-3 - 33.3% (33.3% for 3 column)
  • col2-3 - 66% (66.6% for 3 column)
On phones, the grid system will always default to a single row. On tablets, it will display inline.

2 column

This is the left column
This is the right column

3 column


This is the left column
This is the middle column
This is the right column

1-3/2-3 column


This is the left column
This is the right column

2-3/1-3 column


This is the left column
This is the right column
Standard
Grouping
Labeled
Radios

Checkbox and Button

Toggle Switches

App Framework UI

af.ui transitions the following are transitions built in. You can easily add/extend with your own. Set the data-transition attribute on an anchor to change the transition.



Updates a badge with the given value or creates one.
Position can be
bl - bottom left
tl - top left
br - bottom right
tr - top right (default)
$.ui.updateBadge("#libadge","Badge Created","bl");
Create Badge
Removes a badge.
$.ui.removeBadge("#target");
Create Badge
Remove Badge
Execute a function when $.ui.launch has completed
$.ui.ready(function(){});
You can use this command to go back in history.
$.ui.goBack()
Go Back
You can use this command to launch your App Framework UI app if you set autoLaunch=false;
$.ui.autoLaunch=false;
$.ui.golaunch()
You can use this command to clear the history stack manually
$.ui.clearHistory()
Clear History Stack
You can use this command to add a new div programatically. This will setup scrolling, etc.
$.ui.addContentDiv(id, content,title, pullToRefresh, refreshFunc)
Add Content Div
This will set the page title of the current page programatically. It will not be retained.
$.ui.setTitle('Title Change');
Change Title
This will set the back button text. You can also override this at the start, which we have done.
$.ui.setBackButtonText('GO BACK');

$.ui.backButtonText="Back" //override
This will show the loading mask. You can trigger this manually for long operations.
$.ui.showMask();
Show Mask
This will hide the loading mask. You can trigger this manually for long operations.
$.ui.hideMask();
Show Mask| Hide Mask
This allows you to programatically trigger a page transition/navigation event.
$.ui.loadContent()
Load $.ui API page with a flip
This allows you to hide/show the header bar if you have one. When you do this, the content area will expand up for you.
$.ui.toggleHeaderMenu();
Toggle Header Menu
This lets you toggle the footer navigation menu if you have one. when you do this, the content area will expand down for you.
You can also do this by setting data-footer="none" on the panel
$.ui.toggleNavMenu();
Toggle Nav Menu
This lets you toggle the side navigation menu if you have one. On a tablet, this will be persistent by default.
$.ui.toggleSideNav();
Toggle Side Menu
This is a shortcut to the actionsheet plugin. This will wire it correctly to App Framework UI div
$.ui.actionsheet()


Show a custom sheet

This allows you to scroll to the top of a page. Scroll to the bottom for the link.
$.ui.scrollToTop(div_id)


Keep scrolling down.



Keep scrolling down.



Keep scrolling down.



Keep scrolling down.



Keep scrolling down.



Keep scrolling down.



Keep scrolling down.



Keep scrolling down.



Keep scrolling down.



Keep scrolling down.



Keep scrolling down.



Scroll to Top

This allows you to scroll to the top of a page. Scroll to the bottom for the link.
$.ui.scrollToTop(div_id)
Scroll to Bottom

Keep scrolling down.



Keep scrolling down.



Keep scrolling down.



Keep scrolling down.



Keep scrolling down.



Keep scrolling down.



Keep scrolling down.



Keep scrolling down.



Keep scrolling down.



Keep scrolling down.



Keep scrolling down.





App Framework Slide Transition
App Framework Slide Up Transition
App Framework Slide Down Transition
App Framework Pop Transition
App Framework Flip Transition
App Framework Fade Transition
I'm a modal window...woot woot


Check the input box out below.

Plugins

This is our plugin library of widgets to assist you with developing mobile applications. Some of these are used in App Framework UI.



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta, lorem sit amet feugiat lacinia, mi dui sodales eros, id lacinia mauris urna eu est. Proin pulvinar, augue sed convallis elementum, magna diam pharetra magna, id vestibulum est eros vitae ante. Ut auctor erat a tellus venenatis eu fermentum lorem scelerisque. Cras dignissim leo ornare massa sollicitudin sit amet pulvinar turpis hendrerit. Morbi hendrerit nunc eget turpis luctus id ultricies lorem consequat. Donec eu lacus sed mauris sollicitudin laoreet. Cras vitae sodales diam. Donec mollis, libero ut pellentesque dignissim, risus orci ornare nisi, sed eleifend enim purus malesuada neque. Nulla tellus sem, scelerisque sed sagittis id, eleifend venenatis ligula. Vivamus placerat neque sit amet metus ultricies facilisis. Nulla a odio magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed commodo quam eu enim lacinia vitae ultrices nulla mollis. Aenean eget lectus turpis, at ultrices leo. Nulla vehicula magna in risus ornare vestibulum. Integer gravida magna quam. Donec augue ante, fringilla non congue eu, aliquam lacinia nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas nisl ante, suscipit ut suscipit nec, dictum sit amet orci. Maecenas fermentum sapien turpis, sit amet eleifend justo. Aenean auctor interdum sem sed tincidunt. Aliquam ullamcorper malesuada fermentum. Nunc consectetur, ipsum et pulvinar ultrices, lorem nibh egestas sapien, at egestas lorem metus sit amet lacus. Maecenas non feugiat orci. Curabitur imperdiet tempus lacus, volutpat fermentum diam convallis a. In hac habitasse platea dictumst. Pellentesque nec ipsum diam, at consectetur elit. Duis feugiat ullamcorper libero tincidunt aliquet. Sed leo nisl, iaculis non pellentesque nec, scelerisque vel felis
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta, lorem sit amet feugiat lacinia, mi dui sodales eros, id lacinia mauris urna eu est. Proin pulvinar, augue sed convallis elementum, magna diam pharetra magna, id vestibulum est eros vitae ante. Ut auctor erat a tellus venenatis eu fermentum lorem scelerisque. Cras dignissim leo ornare massa sollicitudin sit amet pulvinar turpis hendrerit. Morbi hendrerit nunc eget turpis luctus id ultricies lorem consequat. Donec eu lacus sed mauris sollicitudin laoreet. Cras vitae sodales diam. Donec mollis, libero ut pellentesque dignissim, risus orci ornare nisi, sed eleifend enim purus malesuada neque. Nulla tellus sem, scelerisque sed sagittis id, eleifend venenatis ligula. Vivamus placerat neque sit amet metus ultricies facilisis. Nulla a odio magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed commodo quam eu enim lacinia vitae ultrices nulla mollis. Aenean eget lectus turpis, at ultrices leo. Nulla vehicula magna in risus ornare vestibulum. Integer gravida magna quam. Donec augue ante, fringilla non congue eu, aliquam lacinia nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas nisl ante, suscipit ut suscipit nec, dictum sit amet orci. Maecenas fermentum sapien turpis, sit amet eleifend justo. Aenean auctor interdum sem sed tincidunt. Aliquam ullamcorper malesuada fermentum. Nunc consectetur, ipsum et pulvinar ultrices, lorem nibh egestas sapien, at egestas lorem metus sit amet lacus. Maecenas non feugiat orci. Curabitur imperdiet tempus lacus, volutpat fermentum diam convallis a. In hac habitasse platea dictumst. Pellentesque nec ipsum diam, at consectetur elit. Duis feugiat ullamcorper libero tincidunt aliquet. Sed leo nisl, iaculis non pellentesque nec, scelerisque vel felis
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta, lorem sit amet feugiat lacinia, mi dui sodales eros, id lacinia mauris urna eu est. Proin pulvinar, augue sed convallis elementum, magna diam pharetra magna, id vestibulum est eros vitae ante. Ut auctor erat a tellus venenatis eu fermentum lorem scelerisque. Cras dignissim leo ornare massa sollicitudin sit amet pulvinar turpis hendrerit. Morbi hendrerit nunc eget turpis luctus id ultricies lorem consequat. Donec eu lacus sed mauris sollicitudin laoreet. Cras vitae sodales diam. Donec mollis, libero ut pellentesque dignissim, risus orci ornare nisi, sed eleifend enim purus malesuada neque. Nulla tellus sem, scelerisque sed sagittis id, eleifend venenatis ligula. Vivamus placerat neque sit amet metus ultricies facilisis. Nulla a odio magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed commodo quam eu enim lacinia vitae ultrices nulla mollis. Aenean eget lectus turpis, at ultrices leo. Nulla vehicula magna in risus ornare vestibulum. Integer gravida magna quam. Donec augue ante, fringilla non congue eu, aliquam lacinia nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas nisl ante, suscipit ut suscipit nec, dictum sit amet orci. Maecenas fermentum sapien turpis, sit amet eleifend justo. Aenean auctor interdum sem sed tincidunt. Aliquam ullamcorper malesuada fermentum. Nunc consectetur, ipsum et pulvinar ultrices, lorem nibh egestas sapien, at egestas lorem metus sit amet lacus. Maecenas non feugiat orci. Curabitur imperdiet tempus lacus, volutpat fermentum diam convallis a. In hac habitasse platea dictumst. Pellentesque nec ipsum diam, at consectetur elit. Duis feugiat ullamcorper libero tincidunt aliquet. Sed leo nisl, iaculis non pellentesque nec, scelerisque vel felis
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta, lorem sit amet feugiat lacinia, mi dui sodales eros, id lacinia mauris urna eu est. Proin pulvinar, augue sed convallis elementum, magna diam pharetra magna, id vestibulum est eros vitae ante. Ut auctor erat a tellus venenatis eu fermentum lorem scelerisque. Cras dignissim leo ornare massa sollicitudin sit amet pulvinar turpis hendrerit. Morbi hendrerit nunc eget turpis luctus id ultricies lorem consequat. Donec eu lacus sed mauris sollicitudin laoreet. Cras vitae sodales diam. Donec mollis, libero ut pellentesque dignissim, risus orci ornare nisi, sed eleifend enim purus malesuada neque. Nulla tellus sem, scelerisque sed sagittis id, eleifend venenatis ligula. Vivamus placerat neque sit amet metus ultricies facilisis. Nulla a odio magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed commodo quam eu enim lacinia vitae ultrices nulla mollis. Aenean eget lectus turpis, at ultrices leo. Nulla vehicula magna in risus ornare vestibulum. Integer gravida magna quam. Donec augue ante, fringilla non congue eu, aliquam lacinia nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas nisl ante, suscipit ut suscipit nec, dictum sit amet orci. Maecenas fermentum sapien turpis, sit amet eleifend justo. Aenean auctor interdum sem sed tincidunt. Aliquam ullamcorper malesuada fermentum. Nunc consectetur, ipsum et pulvinar ultrices, lorem nibh egestas sapien, at egestas lorem metus sit amet lacus. Maecenas non feugiat orci. Curabitur imperdiet tempus lacus, volutpat fermentum diam convallis a. In hac habitasse platea dictumst. Pellentesque nec ipsum diam, at consectetur elit. Duis feugiat ullamcorper libero tincidunt aliquet. Sed leo nisl, iaculis non pellentesque nec, scelerisque vel felis
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta, lorem sit amet feugiat lacinia, mi dui sodales eros, id lacinia mauris urna eu est. Proin pulvinar, augue sed convallis elementum, magna diam pharetra magna, id vestibulum est eros vitae ante. Ut auctor erat a tellus venenatis eu fermentum lorem scelerisque. Cras dignissim leo ornare massa sollicitudin sit amet pulvinar turpis hendrerit. Morbi hendrerit nunc eget turpis luctus id ultricies lorem consequat. Donec eu lacus sed mauris sollicitudin laoreet. Cras vitae sodales diam. Donec mollis, libero ut pellentesque dignissim, risus orci ornare nisi, sed eleifend enim purus malesuada neque. Nulla tellus sem, scelerisque sed sagittis id, eleifend venenatis ligula. Vivamus placerat neque sit amet metus ultricies facilisis. Nulla a odio magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed commodo quam eu enim lacinia vitae ultrices nulla mollis. Aenean eget lectus turpis, at ultrices leo. Nulla vehicula magna in risus ornare vestibulum. Integer gravida magna quam. Donec augue ante, fringilla non congue eu, aliquam lacinia nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas nisl ante, suscipit ut suscipit nec, dictum sit amet orci. Maecenas fermentum sapien turpis, sit amet eleifend justo. Aenean auctor interdum sem sed tincidunt. Aliquam ullamcorper malesuada fermentum. Nunc consectetur, ipsum et pulvinar ultrices, lorem nibh egestas sapien, at egestas lorem metus sit amet lacus. Maecenas non feugiat orci. Curabitur imperdiet tempus lacus, volutpat fermentum diam convallis a. In hac habitasse platea dictumst. Pellentesque nec ipsum diam, at consectetur elit. Duis feugiat ullamcorper libero tincidunt aliquet. Sed leo nisl, iaculis non pellentesque nec, scelerisque vel felis
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta, lorem sit amet feugiat lacinia, mi dui sodales eros, id lacinia mauris urna eu est. Proin pulvinar, augue sed convallis elementum, magna diam pharetra magna, id vestibulum est eros vitae ante. Ut auctor erat a tellus venenatis eu fermentum lorem scelerisque. Cras dignissim leo ornare massa sollicitudin sit amet pulvinar turpis hendrerit. Morbi hendrerit nunc eget turpis luctus id ultricies lorem consequat. Donec eu lacus sed mauris sollicitudin laoreet. Cras vitae sodales diam. Donec mollis, libero ut pellentesque dignissim, risus orci ornare nisi, sed eleifend enim purus malesuada neque. Nulla tellus sem, scelerisque sed sagittis id, eleifend venenatis ligula. Vivamus placerat neque sit amet metus ultricies facilisis. Nulla a odio magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed commodo quam eu enim lacinia vitae ultrices nulla mollis. Aenean eget lectus turpis, at ultrices leo. Nulla vehicula magna in risus ornare vestibulum. Integer gravida magna quam. Donec augue ante, fringilla non congue eu, aliquam lacinia nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas nisl ante, suscipit ut suscipit nec, dictum sit amet orci. Maecenas fermentum sapien turpis, sit amet eleifend justo. Aenean auctor interdum sem sed tincidunt. Aliquam ullamcorper malesuada fermentum. Nunc consectetur, ipsum et pulvinar ultrices, lorem nibh egestas sapien, at egestas lorem metus sit amet lacus. Maecenas non feugiat orci. Curabitur imperdiet tempus lacus, volutpat fermentum diam convallis a. In hac habitasse platea dictumst. Pellentesque nec ipsum diam, at consectetur elit. Duis feugiat ullamcorper libero tincidunt aliquet. Sed leo nisl, iaculis non pellentesque nec, scelerisque vel felis
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta, lorem sit amet feugiat lacinia, mi dui sodales eros, id lacinia mauris urna eu est. Proin pulvinar, augue sed convallis elementum, magna diam pharetra magna, id vestibulum est eros vitae ante. Ut auctor erat a tellus venenatis eu fermentum lorem scelerisque. Cras dignissim leo ornare massa sollicitudin sit amet pulvinar turpis hendrerit. Morbi hendrerit nunc eget turpis luctus id ultricies lorem consequat. Donec eu lacus sed mauris sollicitudin laoreet. Cras vitae sodales diam. Donec mollis, libero ut pellentesque dignissim, risus orci ornare nisi, sed eleifend enim purus malesuada neque. Nulla tellus sem, scelerisque sed sagittis id, eleifend venenatis ligula. Vivamus placerat neque sit amet metus ultricies facilisis. Nulla a odio magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed commodo quam eu enim lacinia vitae ultrices nulla mollis. Aenean eget lectus turpis, at ultrices leo. Nulla vehicula magna in risus ornare vestibulum. Integer gravida magna quam. Donec augue ante, fringilla non congue eu, aliquam lacinia nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas nisl ante, suscipit ut suscipit nec, dictum sit amet orci. Maecenas fermentum sapien turpis, sit amet eleifend justo. Aenean auctor interdum sem sed tincidunt. Aliquam ullamcorper malesuada fermentum. Nunc consectetur, ipsum et pulvinar ultrices, lorem nibh egestas sapien, at egestas lorem metus sit amet lacus. Maecenas non feugiat orci. Curabitur imperdiet tempus lacus, volutpat fermentum diam convallis a. In hac habitasse platea dictumst. Pellentesque nec ipsum diam, at consectetur elit. Duis feugiat ullamcorper libero tincidunt aliquet. Sed leo nisl, iaculis non pellentesque nec, scelerisque vel felis
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta, lorem sit amet feugiat lacinia, mi dui sodales eros, id lacinia mauris urna eu est. Proin pulvinar, augue sed convallis elementum, magna diam pharetra magna, id vestibulum est eros vitae ante. Ut auctor erat a tellus venenatis eu fermentum lorem scelerisque. Cras dignissim leo ornare massa sollicitudin sit amet pulvinar turpis hendrerit. Morbi hendrerit nunc eget turpis luctus id ultricies lorem consequat. Donec eu lacus sed mauris sollicitudin laoreet. Cras vitae sodales diam. Donec mollis, libero ut pellentesque dignissim, risus orci ornare nisi, sed eleifend enim purus malesuada neque. Nulla tellus sem, scelerisque sed sagittis id, eleifend venenatis ligula. Vivamus placerat neque sit amet metus ultricies facilisis. Nulla a odio magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed commodo quam eu enim lacinia vitae ultrices nulla mollis. Aenean eget lectus turpis, at ultrices leo. Nulla vehicula magna in risus ornare vestibulum. Integer gravida magna quam. Donec augue ante, fringilla non congue eu, aliquam lacinia nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas nisl ante, suscipit ut suscipit nec, dictum sit amet orci. Maecenas fermentum sapien turpis, sit amet eleifend justo. Aenean auctor interdum sem sed tincidunt. Aliquam ullamcorper malesuada fermentum. Nunc consectetur, ipsum et pulvinar ultrices, lorem nibh egestas sapien, at egestas lorem metus sit amet lacus. Maecenas non feugiat orci. Curabitur imperdiet tempus lacus, volutpat fermentum diam convallis a. In hac habitasse platea dictumst. Pellentesque nec ipsum diam, at consectetur elit. Duis feugiat ullamcorper libero tincidunt aliquet. Sed leo nisl, iaculis non pellentesque nec, scelerisque vel felis
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta, lorem sit amet feugiat lacinia, mi dui sodales eros, id lacinia mauris urna eu est. Proin pulvinar, augue sed convallis elementum, magna diam pharetra magna, id vestibulum est eros vitae ante. Ut auctor erat a tellus venenatis eu fermentum lorem scelerisque. Cras dignissim leo ornare massa sollicitudin sit amet pulvinar turpis hendrerit. Morbi hendrerit nunc eget turpis luctus id ultricies lorem consequat. Donec eu lacus sed mauris sollicitudin laoreet. Cras vitae sodales diam. Donec mollis, libero ut pellentesque dignissim, risus orci ornare nisi, sed eleifend enim purus malesuada neque. Nulla tellus sem, scelerisque sed sagittis id, eleifend venenatis ligula. Vivamus placerat neque sit amet metus ultricies facilisis. Nulla a odio magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed commodo quam eu enim lacinia vitae ultrices nulla mollis. Aenean eget lectus turpis, at ultrices leo. Nulla vehicula magna in risus ornare vestibulum. Integer gravida magna quam. Donec augue ante, fringilla non congue eu, aliquam lacinia nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas nisl ante, suscipit ut suscipit nec, dictum sit amet orci. Maecenas fermentum sapien turpis, sit amet eleifend justo. Aenean auctor interdum sem sed tincidunt. Aliquam ullamcorper malesuada fermentum. Nunc consectetur, ipsum et pulvinar ultrices, lorem nibh egestas sapien, at egestas lorem metus sit amet lacus. Maecenas non feugiat orci. Curabitur imperdiet tempus lacus, volutpat fermentum diam convallis a. In hac habitasse platea dictumst. Pellentesque nec ipsum diam, at consectetur elit. Duis feugiat ullamcorper libero tincidunt aliquet. Sed leo nisl, iaculis non pellentesque nec, scelerisque vel felis
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta, lorem sit amet feugiat lacinia, mi dui sodales eros, id lacinia mauris urna eu est. Proin pulvinar, augue sed convallis elementum, magna diam pharetra magna, id vestibulum est eros vitae ante. Ut auctor erat a tellus venenatis eu fermentum lorem scelerisque. Cras dignissim leo ornare massa sollicitudin sit amet pulvinar turpis hendrerit. Morbi hendrerit nunc eget turpis luctus id ultricies lorem consequat. Donec eu lacus sed mauris sollicitudin laoreet. Cras vitae sodales diam. Donec mollis, libero ut pellentesque dignissim, risus orci ornare nisi, sed eleifend enim purus malesuada neque. Nulla tellus sem, scelerisque sed sagittis id, eleifend venenatis ligula. Vivamus placerat neque sit amet metus ultricies facilisis. Nulla a odio magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed commodo quam eu enim lacinia vitae ultrices nulla mollis. Aenean eget lectus turpis, at ultrices leo. Nulla vehicula magna in risus ornare vestibulum. Integer gravida magna quam. Donec augue ante, fringilla non congue eu, aliquam lacinia nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas nisl ante, suscipit ut suscipit nec, dictum sit amet orci. Maecenas fermentum sapien turpis, sit amet eleifend justo. Aenean auctor interdum sem sed tincidunt. Aliquam ullamcorper malesuada fermentum. Nunc consectetur, ipsum et pulvinar ultrices, lorem nibh egestas sapien, at egestas lorem metus sit amet lacus. Maecenas non feugiat orci. Curabitur imperdiet tempus lacus, volutpat fermentum diam convallis a. In hac habitasse platea dictumst. Pellentesque nec ipsum diam, at consectetur elit. Duis feugiat ullamcorper libero tincidunt aliquet. Sed leo nisl, iaculis non pellentesque nec, scelerisque vel felis
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta, lorem sit amet feugiat lacinia, mi dui sodales eros, id lacinia mauris urna eu est. Proin pulvinar, augue sed convallis elementum, magna diam pharetra magna, id vestibulum est eros vitae ante. Ut auctor erat a tellus venenatis eu fermentum lorem scelerisque. Cras dignissim leo ornare massa sollicitudin sit amet pulvinar turpis hendrerit. Morbi hendrerit nunc eget turpis luctus id ultricies lorem consequat. Donec eu lacus sed mauris sollicitudin laoreet. Cras vitae sodales diam. Donec mollis, libero ut pellentesque dignissim, risus orci ornare nisi, sed eleifend enim purus malesuada neque. Nulla tellus sem, scelerisque sed sagittis id, eleifend venenatis ligula. Vivamus placerat neque sit amet metus ultricies facilisis. Nulla a odio magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed commodo quam eu enim lacinia vitae ultrices nulla mollis. Aenean eget lectus turpis, at ultrices leo. Nulla vehicula magna in risus ornare vestibulum. Integer gravida magna quam. Donec augue ante, fringilla non congue eu, aliquam lacinia nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas nisl ante, suscipit ut suscipit nec, dictum sit amet orci. Maecenas fermentum sapien turpis, sit amet eleifend justo. Aenean auctor interdum sem sed tincidunt. Aliquam ullamcorper malesuada fermentum. Nunc consectetur, ipsum et pulvinar ultrices, lorem nibh egestas sapien, at egestas lorem metus sit amet lacus. Maecenas non feugiat orci. Curabitur imperdiet tempus lacus, volutpat fermentum diam convallis a. In hac habitasse platea dictumst. Pellentesque nec ipsum diam, at consectetur elit. Duis feugiat ullamcorper libero tincidunt aliquet. Sed leo nisl, iaculis non pellentesque nec, scelerisque vel felis
On android devices, this will change select boxes to a custom control to fix a bug in Webkit with css3 transform3d.









This is disabled



This is a multi select box test


This is just some filler content

This is just some filler content

This is just some filler content

On android devices, this replaces password boxes with a custom control to fix the Webkit css3 transform3d bug. you can also show/hide passwords.


Move Once| Move Twice| Queue
This creates a slide in action sheet from the bottom.

Show Custom Html Sheet Show Custom Json Sheet
This creates a popup dialog to interact with users. You can pass in an HTML string, which acts (and replaces) an alert dialog. You can also pass in an object to get more interaction.

Alert style diaglog
Detailed ineraction
HTML markup

Touch Events

Go Back

Custom Header