Starting app

Welcome

Welcome to the kitchen sink demo for jqMobi. Here you will find samples of how to use the jqMobi 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="jqm2")
Div 2 (class="jqm2")
Div 3 (class="jqm2")
Div 4 (class="jqm4")

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").hasClass() - 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() - 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 XMLHttpRequest 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 
	$("#jqmparent").parent();
The parent id for this div is "content". Let's verify it.
Get Parent ID

jqUi

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

SVG Icons

jqUi provides SVG icons to use throughout your app. Simply add the icon class, along with the image class name and additional sizes you want.
.mini - 20 pixels high
.big - 40 pixels high
The default is 28 pixels.

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 jqMobi" 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 jqUi, with options for Transitions, UI and API

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









Radios and checkboxes

Gender:


Stuff you like:


Disabled and pre-selected

Disabling and checking radio inputs:


Disabling and checking checkbox inputs:


Sliders

Gender:

Stuff you like:

HTML5 input














jqUi

jq.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 jqUi 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 jQUi 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.





I'm a modal window...woot woot


Check the input box out below.

jqPlugins

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



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
I'm a vertical carousel. I'm using the "glue" property, so you must move me atleast 5% before I start dragging
Swipe Below
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


a pulldown tool like the notifications bar

This is some content

This is some content

This is some content

This is some content

PULL DOWN
PULL UP


This is content that is pulled up. This could be a menu system.
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


Scroll an alphabetical list like contacts

A
  • These are all
    • sample entries that
    could be DIVs or
    B
    any sort of styled
    entries you might wish
    that way you don't have to
    deal with all the crazy
    CSS that is in iScroll.js
    C
  • nec tincidunt lacus suscipit a
  • Morbi mollis dui vel urna
  • facilisis ut condimentum
  • mi ullamcorper
    • D
  • Sed rhoncus mollis est
  • vitae vestibulum massa fringilla id
  • Vestibulum rhoncus lorem nec
  • Aenean volutpat nisi quis
    • E
  • Pellentesque porttitor ornare
  • Aliquam luctus dui
  • Cras facilisis arcu ac
  • Sed id leo quis massa
  • Duis vitae elit vel eros
    • F
  • Morbi sed purus enim
  • Nunc volutpat odio vulputate
  • Fusce id ligula erat
  • Vestibulum adipiscing
    • G
  • Cras eu augue nec est
  • Cras sit amet neque
  • Mauris bibendum condimentum

    • Touch Events

    Go Back

    Custom Header