Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

2068 lines (1866 sloc) 95.083 kb
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>jqMobi Kitchen Sink</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<link rel="stylesheet" type="text/css" href="kitchensink/icons.css" />
<link rel="stylesheet" type="text/css" href="kitchensink/jq.ui.css" title="default"/>
<link rel="stylesheet" type="text/css" href="kitchensink/jq.ui.carbon.css" title="carbon" disabled='true'/>
<link rel="stylesheet" type="text/css" href="kitchensink/jq.ui.eco.css" title="eco" disabled='true' />
<link rel="stylesheet" type="text/css" href="kitchensink/jq.ui.frosty.css" title="frosty" disabled='true'/>
<link rel="stylesheet" type="text/css" href="kitchensink/jq.ui.slate.css" title="slate" disabled='true'/>
<link rel="stylesheet" type="text/css" href="kitchensink/jq.ui.volcano.css" title="volcano" disabled='true' />
<style>
.scrollBar{background:white;}
h3 {text-align:center; font-size:35px;}
ul.iconLinks li {font-size:12px; font-weight:normal;}
.listbutton {
display:block;
border:1px solid black;
color:black;
background:orange;
border-radius:5px;
width:80%;
text-decoration:none;
text-align:center;
margin:auto;
margin-bottom:10px;
height:30px;
line-height:30px;
}
.class16 {
background:green;
color:red;
}
.jqmscrollBar {background:white !important;}
</style>
<!-- uncomment for AppMobi apps
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script>
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/xhr.js"></script>
-->
<script type="text/javascript" charset="utf-8" src="./jq.mobi.js"></script>
<!-- include touch.js on desktop browsers only -->
<script>
function loadedPanel(what){
//We are going to set the badge as the number of li elements inside the target
$.ui.updateBadge("#jqmlink",$("#jqm").find("li").length);
}
function unloadedPanel(what){
console.log("unloaded "+what.id);
}
if(!((window.DocumentTouch&&document instanceof DocumentTouch)||'ontouchstart' in window)){
var script=document.createElement("script");
script.src="touch.js";
var tag=$("head").append(script);
$.os.android=true; //let's make it run like an android device
$.os.desktop=true;
}
var oldElem="default";
function setActiveStyleSheet(title) {
var a = document.getElementsByTagName("link");
var currElem;
if(title==oldElem.getAttribute("title")||oldElem=="default")
return;
for(i=0; i<a.length; i++) {
if(a[i].getAttribute("title")==title){
currElem=a[i];
}
else if(!a[i].getAttribute("disabled")&&a[i].getAttribute("title"))
oldElem=a[i];
}
currElem.removeAttribute("disabled");
jq.ui.showMask();
window.setTimeout(function(){
jq.ui.hideMask();
oldElem.setAttribute("disabled","true");
},500);
}
$(document).ready(function(){
oldElem=document.getElementsByTagName("link")[0];
});
</script>
<script type="text/javascript" charset="utf-8" src="./plugins/jq.swipe.js"></script>
<script type="text/javascript" charset="utf-8" src="./plugins/jq.template.js"></script>
<script type="text/javascript" charset="utf-8" src="./plugins/jq.carousel.js"></script>
<script type="text/javascript" charset="utf-8" src="./plugins/jq.drawer.js"></script>
<script type="text/javascript" charset="utf-8" src="./plugins/jq.shake.js"></script>
<script type="text/javascript" charset="utf-8" src="./plugins/jq.alphatable.js"></script>
<script type="text/javascript" charset="utf-8" src="./plugins/jq.spinner.js"></script>
<script type="text/javascript" charset="utf-8" src="./ui/jq.ui.js"></script>
<script type="text/javascript">
/* This function runs once the page is loaded, but appMobi is not yet active */
var webRoot="./kitchensink/";
$.ui.autoLaunch=false;
$.ui.openLinksNewTab=false;
var init = function(){
$.ui.backButtonText="Back";
window.setTimeout(function(){$.ui.launch();},1500);
//$.ui.removeFooterMenu(); This would remove the bottom nav menu
};
document.addEventListener("DOMContentLoaded",init,false);
$.ui.ready(function(){console.log('ready');});
/* This code prevents users from dragging the page */
var preventDefaultScroll = function(event) {
event.preventDefault();
window.scroll(0,0);
return false;
};
document.addEventListener('touchmove', preventDefaultScroll, false);
/* This code is used to run as soon as appMobi activates */
var onDeviceReady=function(){
AppMobi.device.setRotateOrientation("portrait");
AppMobi.device.setAutoRotate(false);
webRoot=AppMobi.webRoot+"kitchensink/";
//hide splash screen
AppMobi.device.hideSplashScreen();
};
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
function showHide(obj,objToHide){
var el=$("#"+objToHide)[0];
if(obj.className=="expanded"){
obj.className="collapsed";
}
else{
obj.className="expanded";
}
$(el).toggle();
}
</script>
</head>
<body>
<div id="jQUi">
<!-- this is the splashscreen you see. -->
<div id="splashscreen" class='ui-loader'>
<img src="kitchensink/images/splash.png">
<br><br>
<span class='ui-icon ui-icon-loading spin'></span><h1 >Starting app</h1>
</div>
<div id="header">
<img id='badgephone' onclick='jq.ui.toggleSideMenu()' align="right" src='kitchensink/images/badge.png' style='padding-top:10px'>
<img id='badgetablet' align="right" src='kitchensink/images/badge.png' style='padding-top:10px'>
</div>
<div id="content">
<div title='Welcome' id="main" class="panel" selected="true" data-load="loadedPanel" data-unload="unloadedPanel" data-tab="navbar_home" >
<h2 class='expanded' onclick='showHide(this,"main_info");'>Welcome</h2>
<p id='main_info'>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.</p>
<ul>
<li class='icon home big'><a href="#jqm" id='jqmlink'>jqMobi</a></li>
<li><a href="#jqmui" >jqUi</a></li>
<li><a href="#jqmweb" >jqPlugins</a></li>
</ul>
</div>
<!-- ------------------------------------------ -->
<div title="jqMobi" id="jqm" class="panel" data-nav="menu_jqmobi" data-header="testheader">
<header><span>This is an inline header in a panel. Below is an inline footer</span></header>
<h2 class='expanded' onclick='showHide(this,"jqmobi_info");'>jqMobi</h2>
<p id='jqmobi_info'>jqMobi is a blazingly fast query selector tool that is optmimized for HTML5 browsers.</p>
<ul>
<li><a href="#jqm1" >$ Selector</a></li>
<li><a href="#jqm2" >$().length()</a></li>
<li><a href="#jqm3" >$().find()</a></li>
<li><a href="#jqm4" >$().html()</a></li>
<li><a href="#jqm5" >$().text()</a></li>
<li><a href="#jqm6" >$().css()</a></li>
<li><a href="#jqm7" >$().empty()</a></li>
<li><a href="#jqm8" >$().hide()</a></li>
<li><a href="#jqm9" >$().show()</a></li>
<li><a href="#jqm10" >$().toggle()</a></li>
<li><a href="#jqm11" >$().val()</a></li>
<li><a href="#jqm12" >$().attr()</a></li>
<li><a href="#jqm13" >$().removeAttr()</a></li>
<li><a href="#jqm14" >$().remove()</a></li>
<li><a href="#jqm15" >$().addClass()</a></li>
<li><a href="#jqm16" >$().removeClass()</a></li>
<li><a href="#jqm17" >$().hasClass()</a></li>
<li><a href="#jqm18" >$().bind()</a></li>
<li><a href="#jqm19" >$().unbind()</a></li>
<li><a href="#jqm20" >$().trigger()</a></li>
<li><a href="#jqm21" >$().append()</a></li>
<li><a href="#jqm22" >$().prepend()</a></li>
<li><a href="#jqm32" >$().get()</a></li>
<li><a href="#jqm31" >$().offset()</a></li>
<li><a href="#jqmparent" >$().parent()</a></li>
<li><a href="#jqmserialize" >$().serialize()</a></li>
<li><a href="#jqm33" >$.isArray()</a></li>
<li><a href="#jqm34" >$.isFunction()</a></li>
<li><a href="#jqm23" >$.jsonP()</a></li>
<li><a href="#jqm24" >$.ajax()</a></li>
<li><a href="#jqm25" >$.get()</a></li>
<li><a href="#jqm26" >$.post()</a></li>
<li><a href="#jqm27" >$.getJSON()</a></li>
<li><a href="#jqm28" >$.param()</a></li>
<li><a href="#jqm29" >$.parseJSON()</a></li>
<li><a href="#jqm30" >$.os</a></li>
<li><a href="javascript:;" onClick="$.ui.scrollToTop('jqm')" >Go To Top</a></li>
</ul>
<br/><br/>
<footer >
<a href="#main" id='navbar_home' class='icon home' >Home <span class='jq-badge lr'>12</span></a>
</footer>
</div>
<div id="jqmserialize" class="panel" title="$().serialize" data-nav="menu_jqmobi" >
<script>
function serializeForm(){
alert($("#form").serialize());
}
</script>
$("#form").serialize() - will return a key/value pair string of the form elements<br><Br>
<form id="form" onsubmit="return false">
Name: <input type='text' class='jq-ui-forms' name='name' value='John Smith'><br>
<input type='checkbox' class='jq-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>
</div>
<!-- jqm > jqm Selector -->
<div id="jqm1" class="panel" title="$()" data-nav="menu_jqmobi">
<span id="jqmtest2">This is some html</span><br /><br />
<a class="button" href="javascript:;" onclick="alert($('#jqmtest2')[0])">Click to get Object</a><br /><br />
<a class="button" href="javascript:;" onclick="alert($('#jqmtest2').html())">Click to get Content</a>
</div>
<!-- jqm > jqm length() -->
<div id="jqm2" class="panel" title=".length()" data-nav="menu_jqmobi">
<div class='jqm2'>Div 1 (class="jqm2")</div>
<div class='jqm2'>Div 2 (class="jqm2")</div>
<div class='jqm2'>Div 3 (class="jqm2")</div>
<div class='jqm4'>Div 4 (class="jqm4")</div>
<br />
<a class="button"href="javascript:;" onclick="alert($('.jqm2').length)">Click to get the Length by classname</a>
</div>
<!-- jqm > jqm find() -->
<div id="jqm3" class="panel" title=".find()" data-nav="menu_jqmobi">
$("#div").find("li") find all element(s) inside a container<br /><br />
<ul>
<li id='find1'>Item 1</li>
<li>Item 2</li>
</ul>
<a class="button"href="javascript:;" onclick="alert($('#jqm3').find('li').length)">Click to get the count of li's in the div</a><br /><br />
</div>
<!-- jqm > jqm html() -->
<div id="jqm4" class="panel" title=".html()" data-nav="menu_jqmobi">
$("#div").html() allows you to get or set a contents HTML.<br /><br />
<div id="jqm4_content" style='border:1px solid black'>This is some content</div><br /><br />
<a class="button" href='javascript:;' onclick='alert($("#jqm4_content").html())'>Get Content</a> | <a href='javascript:;' class="button" onclick='$("#jqm4_content").html("New Content")'>Set Content</a>
</div>
<!-- jqm > jqm text() -->
<div id="jqm5" class="panel" title=".text()" data-nav="menu_jqmobi">
$("#div").text() allows you to get or set a contents text.<br /><br />
<div id="jqm5_content" style='border:1px solid black'><span>This is some text</span> other text</div><br /><br />
<a class="button" href='javascript:;' onclick='alert($("#jqm5_content").text())'>Get Text</a> | <a class="button" href='javascript:;' onclick='$("#jqm5_content").text("New Text")'>Set Text</a>
</div>
<!-- jqm > jqm css() -->
<div id="jqm6" class="panel" title=".css()" data-nav="menu_jqmobi">
$("#div").css() - allows you to get or set a CSS property.<br /><br />
<div style="background:red;color:white;border:1px solid black" id="jqm6_content">This is some content</div><br /><br />
<a class="button" href='javascript:;' onclick='alert($("#jqm6_content").css("background"))'>Get background color</a><br />
<a class="button" href='javascript:;' onclick='$("#jqm6_content").css("background","green")'>Set background color</a>
</div>
<!-- jqm > jqm empty() -->
<div id="jqm7" class="panel" title=".empty()" data-nav="menu_jqmobi">
$("#div").empty() - will empty out the contents of the element.<br /><br />
<div id="jqm7_content" style="border:1px solid black">This is some content</div><br/><br/>
<a class="button" href='javascript:;' onclick='$("#jqm7_content").empty()'>$().empty()</a>
</div>
<!-- jqm > jqm hide() -->
<div id="jqm8" class="panel" title=".hide()" data-nav="menu_jqmobi">
$("#div").hide() - will set the elements display property to "none".<br /><br />
<div id="jqm8_content" style="border:1px solid black">This is some content</div><br/>
<a class="button" href='javascript:;' onclick='$("#jqm8_content").hide()'>Hide the div</a>
</div>
<!-- jqm > jqm show() -->
<div id="jqm9" class="panel" title=".show()" data-nav="menu_jqmobi">
$("#div").show() - will set the elements display property to "block".<br /><br />
<div id="jqm9_content" style="border:1px solid black;display:none;">This is some content</div><br/>
<a class="button" href='javascript:;' onclick='$("#jqm9_content").show()'>Show the div</a>
</div>
<!-- jqm > jqm toggle() -->
<div id="jqm10" class="panel" title=".toggle()" data-nav="menu_jqmobi">
$("#div").toggle() - will toggle the elements display property.<br /><br />
<div id="jqm10_content" style="border:1px solid black;display:block;">This is some content</div><br/><br />
<a class="button" href='javascript:;' onclick='$("#jqm10_content").toggle()'>Toggle a div</a>
</div>
<!-- jqm > jqm val() -->
<div id="jqm11" class="panel" title=".val()" data-nav="menu_jqmobi">
$("#div").val() - will get or set the value of an HTML element.<br /><br />
<input type="text" id="jqm11_input" size=15><br /><br />
<a class="button" href='javascript:;' onclick='alert($("#jqm11_input").val())'>Get Value</a><br />
<a class="button" href='javascript:;' onclick='($("#jqm11_input").val("set value"))'>Set Value</a>
</div>
<!-- jqm > jqm attr() -->
<div id="jqm12" class="panel" title=".attr()" data-nav="menu_jqmobi">
$("#div").attr() - will get or set an attribute of an HTML element.<br /><br />
<div id="jqm12_content" data-test="foo">The data-test attribute is set to "foo" - data-test="foo"</div><br /><br />
<a class="button" href='javascript:;' onclick='alert($("#jqm12_content").attr("data-test"))'>Get Attribute Value</a><br />
<a class="button" href='javascript:;' onclick='($("#jqm12_content").attr("data-test","bar"))'>Set Attribute Value</a>
</div>
<!-- jqm > jqm removeAttr() -->
<div id="jqm13" class="panel" title=".removeAttr()" data-nav="menu_jqmobi">
$("#div").removeAttr() - will remove an attribute of an HTML element.<br /><br />
<div id="jqm13_content" data-test="foo">The data-test attribute is set to "foo" - data-test="foo"</div><br />
<a class="button" href='javascript:;' onclick='alert($("#jqm13_content").attr("data-test"))'>Get Attribute Value</a><br />
<a class="button" href='javascript:;' onclick='($("#jqm13_content").removeAttr("data-test"))'>Remove Attribute Value</a>
</div>
<!-- jqm > jqm remove() -->
<div id="jqm14" class="panel" title=".remove()" data-nav="menu_jqmobi">
$("#div").remove() - will remove an element from the parent container.<br /><br />
<div id="jqm14_content" style="border:1px solid black">This is content that will be removed from the DOM.</div><br />
<a class="button" href='javascript:;' onclick='$("#jqm14_content").remove()'>Remove the Element</a>
</div>
<!-- jqm > jqm addClass() -->
<div id="jqm15" class="panel" title=".addClass()"data-nav="menu_jqmobi">
$("#div").addClass() - adds a css class to the element.<br /><br />
<div style='border:1px solid black' id="jqm15_content">This is some content</div><br /><br />
<a class="button" href='javascript:;' onclick='($("#jqm15_content").addClass("class16"))'>Add a Class</a>
</div>
<!-- jqm > jqm removeClass() -->
<div id="jqm16" class="panel" title=".removeClass()" data-nav="menu_jqmobi">
$("#div").removeClass() - removes a css class to the element.<br /><br />
<div style='border:1px solid black' id="jqm16_content" class="class16">This is some content</div><br />
<a class="button" href='javascript:;' onclick='($("#jqm16_content").removeClass("class16"))'>Remove the Class</a>
</div>
<!-- jqm > jqm hassClass() -->
<div id="jqm17" class="panel" title=".hasClass()" data-nav="menu_jqmobi">
$("#div").hassClass() - returns a boolean if an element has a class.<br /><br />
<div style='border:1px solid black' id="jqm17_content" class="class16">This is some content</div><br />
<a class="button" href='javascript:;' onclick='alert($("#jqm17_content").hasClass("class16"))'>Check if it has the class</a>
</div>
<!-- jqm > jqm bind() -->
<div id="jqm18" class="panel" title=".bind()" data-nav="menu_jqmobi">
$("#div").bind() - binds an event to an element.<br /><br />
<a class="button" href="javascript:;" id="jqm18_content">Test Link to bind event to</a><br /><br />
<a class="button" href='javascript:;' onclick='$("#jqm18_content").bind("click",function(evt){alert("I was clicked");});alert("click event is bound");'>Bind Event</a><br />
</div>
<!-- jqm > jqm unbind() -->
<div id="jqm19" class="panel" title=".unbind()" data-nav="menu_jqmobi">
$("#div").unbind() - unbinds an event from an element.<br /><br />
<a class="button" href="javascript:;" id="jqm19_content">This is a test link</a><br /><br />
<a class="button" href='javascript:;' onclick='$("#jqm19_content").bind("click",function(){alert("I was clicked");});alert("click event is bound");'>Bind Event</a><br />
<a class="button" href="javascript:;" onclick='$("#jqm19_content").unbind("click")'>Unbind Event</a>
</div>
<!-- jqm > jqm trigger() -->
<div id="jqm20" class="panel" title=".trigger()" data-nav="menu_jqmobi">
$("#div").trigger() - triggers an event on an element.<br /><br />
<a id="jqm20_content" href="javascript:;" onclick="alert('I was clicked')">Click to test me</a><br /><br />
<a class="button" href="javascript:;" onclick='$("#jqm20_content").trigger("click")'>Trigger Event</a>
</div>
<!-- jqm > jqm append() -->
<div id="jqm21" class="panel" title=".append()" data-nav="menu_jqmobi">
$("#div").append() - appends an element or content.<br /><br />
<div id="jqm21_content">I'll append content after the &lt;hr> <hr>
</div><br /><br />
<a class="button" href="javascript:;" onclick='$("#jqm21_content").append("<span>Some more content<br /></span>");'>Append Content</a>
</div>
<!-- jqm > jqm prepend() -->
<div id="jqm22" class="panel" title=".prepend()" data-nav="menu_jqmobi">
$("#div").prepend() - prepends an element or content.<br /><br />
<div id="jqm22_content"><hr>I'll prepend content before the &lt;hr>
</div><br /><br />
<a class="button" href="javascript:;" onclick='$("#jqm22_content").prepend("<span>Some more content<br /></span>");'>Prepend Content</a>
</div>
<!-- jqm > jqm offset() -->
<div id="jqm31" class="panel" title=".offset()" data-nav="menu_jqmobi">
<script>
function getElementOffset(){
var data=$("#jqm31").offset();
alert("Top: "+data.top+" - Left: "+data.left);
}
</script>
$("#div").offset() - Gets the left and top offset of an element.<br /><br />
<a class="button" href="javascript:;" onclick='getElementOffset()'>Get Offsett</a>
</div>
<!-- jqm > jqm get() -->
<div id="jqm32" class="panel" title=".get()" data-nav="menu_jqmobi">
$("#div").get() - Get's an individual element by index.<br /><br />
<script>
function getElementByIndex(){
var obj=$(".panel").get(0);
alert("This is the first panel = "+obj.id);
}
</script>
<a class="button" href="javascript:;" onclick='getElementByIndex();'>Get first panel</a>
</div>
<!-- jqm > jqm jsonP() -->
<div id="jqm23" class="panel" title=".jsonP()" data-nav="menu_jqmobi">
$.jsonP(url:"URL",
success:function(){},
timeout:"1000",
error:function(){}
) - makes a jsonP call for cross domain scripting<br /><br />
<div id="jqm23_content" style="border:1px solid black;">This will get updated with content from the jsonP call</div><br /><br />
<a class="button" href="javascript:;" onclick="$.jsonP({url:'http://jsfiddle.net/echo/jsonp/?test=some+html+content&callback=?',success:function(data){$('#jqm23_content').html(data.test)}});">
Make jsonP call</a>
</div>
<!-- jqm > jqm ajax() -->
<div id="jqm24" class="panel" title=".ajax()" data-nav="menu_jqmobi">
$.ajax(url:"URL",
success:function(){},
timeout:"1000",
error:function(){}
) - makes an Ajax call<br /><br />
<script type="text/javascript">
function doAjax(){
$.ajax({url:webRoot+'ajax.html',success:function(data){$('#jqm24_content').html(data)}});
}
</script>
<div id="jqm24_content" style="border:1px solid black;">This will get updated with content from the ajax call</div><br /><br />
<a class="button" href="javascript:;" onclick="doAjax()">
Make Ajax Call</a>
</div>
<!-- jqm > jqm get() -->
<div id="jqm25" class="panel" title=".get()" data-nav="menu_jqmobi">
$.get(url:"URL",
success:function(){},
timeout:"1000",
error:function(){}
) - makes an Ajax call<br /><br />
<script type="text/javascript">
function doGet(){
$.get(webRoot+'ajax.html',function(data){$('#jqm25_content').html(data)});
}
</script>
<div id="jqm25_content" style="border:1px solid black;">This will get updated with content from the ajax call</div><br /><br />
<a class="button" href="javascript:;" onclick="doGet()">
Make Get Call</a>
</div>
<!-- jqm > jqm post() -->
<div id="jqm26" class="panel" title=".post()" data-nav="menu_jqmobi">
$.post(url,data:{foo:"bar"},
success:function(){},
timeout:"1000",error:
function(){}
) - makes an Ajax call<br /><br />
<script type="text/javascript">
function doPost(){
$.post(webRoot+'ajax.html',{foo:"bar"},function(data){$('#jqm26_content').html(data)});
}
</script>
<div id="jqm26_content" style="border:1px solid black;">This will get updated with content from the ajax call</div><br /><br />
<a class="button" href="javascript:;" onclick="doPost()">
Make Post Call</a>
</div>
<!-- jqm > jqm getJSON() -->
<div id="jqm27" class="panel" title=".getJSON()" data-nav="menu_jqmobi">
$.getJSON(url,data,success); - Makes a XMLHpttRequest GET request and returns a JSON object.<br /><br />
<script>
function doJSON(){
$.getJSON(webRoot+'json.html',function(data){$('#jqm27_content').html(JSON.stringify(data))});
}
</script>
<div style="border:1px solid black" id="jqm27_content">Returned object</div><br />
<a class="button" href="javascript:;" onclick="doJSON()">Make GetJson Call</a>
</div>
<!-- jqm > jqm serialize() -->
<div id="jqm28" class="panel" title=".param()">
$.param() - serializes an object into key/value pairs for a querystring.<br /><br />
<code>
var obj= {foo:"foo",bar:"bar"};
</code><br /><br />
<script>
function doSerialize(){
var obj= {foo:"foo",bar:"bar"};
$("#jqm28_content").html($.param(obj));
}
</script>
<div id="jqm28_content" style="border:1px solid black">Serialized parameters will show here.</div><br /><br />
<a class="button" href='javascript:;' onclick="doSerialize()">Make param Call</a>
</div>
<!-- jqm > jqm parseJSON() -->
<div id="jqm29" class="panel" title=".parseJSON()" data-nav="menu_jqmobi">
$.parseJSON() - parses a string and converts it into a JSON object. Uses the native JSON parser, but is added for backwards compatibility.<br><br>
<code>
var obj='{"foo":"bar"}';
</code>
<script>
function doParseJson(){
var obj='{"foo":"bar"}';
alert($.parseJSON(obj));
}
</script>
<br>
<a class="button" href='javascript:;' onclick="doParseJson()">Parse JSON string</a>
</div>
<!-- jqm > os -->
<div id="jqm30" class="panel" title=".os" data-nav="menu_jqmobi">
$.os - holds information about the OS of the device, and if it is a webkit browser<br><br>
<pre style="padding-left:15px">
$.os.webkit = <script>document.write($.os.webkit);</script>
$.os.android = <script>document.write($.os.android);</script>
$.os.ipad = <script>document.write($.os.ipad);</script>
$.os.iphone = <script>document.write($.os.iphone);</script>
$.os.ios = <script>document.write($.os.ios);</script>
$.os.webos = <script>document.write($.os.webos);</script>
$.os.touchpad = <script>document.write($.os.touchpad);</script>
$.os.blackberry = <script>document.write($.os.blackberry);</script>
$.os.opera = <script>document.write($.os.opera);</script>
$.os.fennec = <script>document.write($.os.fennec);</script>
</pre>
</div>
<!-- jqm > isArray -->
<div id="jqm33" class="panel" title=".isArray()" data-nav="menu_jqmobi">
$.isArray(param) - returns a boolean if the parameter is an array.<br><br>
<pre>
var notArrayTest="foo";
var isArrayTest=[];
</pre>
<script>
var notArrayTest="foo";
var isArrayTest=[];
function isNotAnArray(){
alert($.isArray(notArrayTest));
}
function isAnArray(){
alert($.isArray(isArrayTest));
}
</script>
<br>
<a class="button" href="javascript:;" onclick="isNotAnArray()">test notArrayTest</a><br>
<a class="button" href="javascript:;" onclick="isAnArray()">test isArrayTest</a><br>
</div>
<!-- jqm > isFunction -->
<div id="jqm34" class="panel" title=".isFunction()" data-nav="menu_jqmobi">
$.isFunction(param) - returns a boolean if the parameter is a function.<br><br>
<pre>
var notFunctionTest="foo";
var isFunctionTest=function(){};
</pre>
<script>
var notFunctionTest="foo";
var isFunctionTest=[];
function notAFunction(){
alert($.isArray(notFunctionTest));
}
function isAFunction(){
alert($.isArray(isFunctionTest));
}
</script>
<br>
<a class="button" href="javascript:;" onclick="notAFunction()">test notFunctionTest</a><br>
<a class="button" href="javascript:;" onclick="isAFunction()">test isFunctionTest</a><br>
</div>
<div id="jqmparent" class="panel" title=".parent()" data-nav="menu_jqmobi">
This returns the parent elements for the previously found elements in the container
<pre>
$("#jqmparent").parent();
</pre>
The parent id for this div is "content". Let's verify it.<br>
<a href="javascript:;" onclick="alert($('#jqmparent').parent().get().id);" class="button">Get Parent ID</a>
</div>
<!-- ------------------------------------------ -->
<!-- ------------------------------------------ -->
<!-- jqUi -->
<div title="jqUi" id="jqmui" class="panel" data-footer='footerui' data-tab="navbar_ui">
<h2 class='expanded' onclick='showHide(this,"jqui_info");'>jqUi</h2><p id='jqui_info'>jqUi is AppMobi's User Interface/User Experience library for mobile applications. It uses HTML5 and CSS3 for animations and transitions.<br />
We built the kitchen sink using jqUi. It is comprised of components from the jqPlugins library and additional features.
<br>
* Fixed navigation bar<br>
* Auto scrolling content panels<br>
* Optional footer to segment your application<br>
</p>
<ul>
<li><a href="#jqmtransitions" >Transitions</a></li>
<li><a href="#jqmforms" >Form Styles</a></li>
<li><a href="#uiapi" >$.ui API</a></li>
<li><a href="#uifooter">Custom Footers</a></li>
<li><a href="#uiside">Side Navigation Menu</a></li>
<li><a href="#uiicons">SVG Icons</a></li>
<li><a href="kitchensink/external.html" data-persist-ajax="true" data-refresh-ajax="true" data-pull-scroller="true">Load External Content</a></li>
<li><a href="http://www.jqmobi.com" >Open a new page</a></li>
<li><a href="#uidefer">Defer loading</a></li>
</ul>
</div>
<div id="uiicons" title="SVG Icons" class="panel">
<h2 class='expanded' onclick='showHide(this,"icons_info");'>SVG Icons</h2><p id='icons_info'>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.
<br>
.mini - 20 pixels high<br>
.big - 40 pixels hight<br>
The default is 28 pixels.<br>
</p>
<ul>
<li class="icon home big"><a href="#">Home Big</a></li>
<li class="icon home"><a href="#">Home Default</a></li>
<li class="icon home mini"><a href="#">Home Mini</a></li>
<li class="icon pencil big"><a href="#">Pencil</a></li>
<li class="icon picture big"><a href="#">Picture</a></li>
<li class="icon camera big"><a href="#">Camera</a></li>
<li class="icon headset big"><a href="#">Headset</a></li>
<li class="icon paper big"><a href="#">Paper</a></li>
<li class="icon stack big"><a href="#">Stack</a></li>
<li class="icon folder big"><a href="#">Folder</a></li>
<li class="icon tag big"><a href="#">Tag</a></li>
<li class="icon basket big"><a href="#">Basket</a></li>
<li class="icon phone big"><a href="#">Phone</a></li>
<li class="icon mail big"><a href="#">Mail</a></li>
<li class="icon location big"><a href="#">Location</a></li>
<li class="icon clock big"><a href="#">Clock</a></li>
<li class="icon calendar big"><a href="#">Calendar</a></li>
<li class="icon message big"><a href="#">Message</a></li>
<li class="icon chat big"><a href="#">Chat</a></li>
<li class="icon user big"><a href="#">User</a></li>
<li class="icon loading big"><a href="#">Loading</a></li>
<li class="icon refresh big"><a href="#">Refresh</a></li>
<li class="icon magnifier big"><a href="#">Magnifier</a></li>
<li class="icon key big"><a href="#">Key</a></li>
<li class="icon settings big"><a href="#">Settings</a></li>
<li class="icon graph big"><a href="#">Graph</a></li>
<li class="icon trash big"><a href="#">Trash</a></li>
<li class="icon pin big"><a href="#">Pin</a></li>
<li class="icon target big"><a href="#">Target</a></li>
<li class="icon download big"><a href="#">Download</a></li>
<li class="icon upload big"><a href="#">Upload</a></li>
<li class="icon star big"><a href="#">Star</a></li>
<li class="icon heart big"><a href="#">Heart</a></li>
<li class="icon warning big"><a href="#">Warning</a></li>
<li class="icon add big"><a href="#">Add</a></li>
<li class="icon remove big"><a href="#">Remove</a></li>
<li class="icon question big"><a href="#">Question</a></li>
<li class="icon info big"><a href="#">Info</a></li>
<li class="icon error big"><a href="#">Error</a></li>
<li class="icon check big"><a href="#">Check</a></li>
<li class="icon minimize big"><a href="#">Minimize</a></li>
<li class="icon close big"><a href="#">Close</a></li>
<li class="icon up big"><a href="#">Up</a></li>
<li class="icon down big"><a href="#">Down</a></li>
<li class="icon left big"><a href="#">Left</a></li>
<li class="icon right big"><a href="#">Right</a></li>
<li class="icon tools big"><a href="#">Tools</a></li>
<li class="icon html5 big"><a href="#">HTML5</a></li>
<li class="icon css big"><a href="#">CSS</a></li>
<li class="icon js big"><a href="#">JS</a></li>
<li class="icon cloud big"><a href="#">Cloud</a></li>
<li class="icon tv big"><a href="#">TV</a></li>
<li class="icon wifi big"><a href="#">Wifi</a></li>
<li class="icon new big"><a href="#">New</a></li>
<li class="icon mic big"><a href="#">Mic</a></li>
<li class="icon database big"><a href="#">Database</a></li>
<li class="icon busy big"><a href="#">Busy</a></li>
<li class="icon bug big"><a href="#">Bug</a></li>
<li class="icon lamp big"><a href="#">Lamp</a></li>
</ul>
</div>
<div id="uidefer" title="Defer Loading" class="panel" data-defer="defer/index.html">
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.
</div>
<div id="uiside" title="Side Menu Navigation" class="panel" data-footer="footerui">
<b>Side Menu Navigation</b><br>
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.<br><Br>
Side menu's are created using the &lt;nav&gt; 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 &lt;nav&gt; defined.
</div>
<div id="uifooter" title="Custom Footers" class="panel" data-footer='footerui'>
<p>You should notice that the footer is no longer the default. It is specific to jqUi, with options for Transitions, UI and API</p>
You can create custom fotoers using the &lt;footer&gt; tag. You then set the id on each panel to change them using the data-footer='id' property.
</div>
<div id="jqmforms" title="Form Styles" class="panel" data-footer='footerui'>
<form>
<fieldset>
<legend>Field elements</legend>
<label for="name">Full Name</label><br/>
<input type="text" id="name" class='jq-ui-forms'/><br/>
<label for="email">E-mail</label><br/>
<input type="text" id="email" class='jq-ui-forms' /><br/>
<label for="password">Password</label><br/>
<span><input type="password" id="password" class='jq-ui-forms' /></span><br/> <!-- span is needed for android password fix -->
<label for="country">Country</label><br/>
<span><!-- span is needed for android select box fix -->
<select id="country" class='jq-ui-forms'>
<option value='1'>USA 1</option>
<option value='2'>USA 2</option>
<option value='3'>USA 3</option>
<option value='4'>USA 4</option>
<option value='5'>USA 5</option>
<option value='6'>USA 6</option>
<option value='7'>USA 7</option>
<option value='8'>USA 8</option>
<option value='9'>USA 9</option>
<option value='10'>USA 10</option>
</select>
</span> <br/>
<br/>
<label for="web">Comments</label>
<textarea name="web" class='jq-ui-forms'></textarea><br/>
</fieldset>
<fieldset>
<legend>Radios and checkboxes</legend>
<h4>Gender:</h4>
<br>
<p><input type="radio" value="male" id="male" name="gender" class="jq-ui-forms"/> <label for="male">Male</label></p>
<p><input type="radio" value="Female" id="female" name="gender" class="jq-ui-forms" /> <label for="female">Female</label></p>
<h4>Stuff you like:</h4>
<br>
<p><input type="checkbox" value="CSS3" id="css3" class="jq-ui-forms" /> <label for="css3">CSS3</label></p>
<p><input type="checkbox" value="HTML5" id="html5" class="jq-ui-forms" /> <label for="html5">HTML5</label></p>
<p><input type="checkbox" value="JavaScript" id="javascript" class="jq-ui-forms" /> <label for="javascript">JavaScript</label></p>
<p><input type="checkbox" value="Other" id="other" class="jq-ui-forms" /> <label for="other">Other</label></p>
</fieldset>
<fieldset>
<legend>Disabled and pre-selected</legend>
<h4>Disabling and checking radio inputs:</h4>
<br>
<p><input type="radio" value="disabled" id="disabled" name="disabled" disabled class="jq-ui-forms"/> <label for="disabled">This is disabled</label></p>
<p><input type="radio" value="check" id="check" name="check" checked class="jq-ui-forms" /> <label for="check">This is checked</label></p>
<h4>Disabling and checking checkbox inputs:</h4>
<br>
<p><input type="checkbox" value="disabled" id="disabled2" disabled class="jq-ui-forms"/> <label for="disabled2">This is disabled</label></p>
<p><input type="checkbox" value="check" id="check2" checked class="jq-ui-forms" /> <label for="check2">This is checked</label></p>
<p><input type="checkbox" value="Stop" id="disablecheck" disabled checked class="jq-ui-forms"/> <label for="disablecheck">This is checked and disabled</label></p>
<p><input type="checkbox" value="Other" id="other2" class="jq-ui-forms"/> <label for="other2">Other</label></p>
</fieldset>
<fieldset>
<legend>Sliders</legend>
<h4>Gender:</h4>
<p><input type="radio" value="maleslider" id="slidermale" name="gender" class="jq-ui-slider"/> <label for="slidermale">Male</label></p>
<p><input type="radio" value="femaleslider" id="sliderfemale" name="gender" class="jq-ui-slider" /> <label for="sliderfemale">Female</label></p>
<h4>Stuff you like:</h4>
<p><input type="checkbox" value="CSS3" id="css3slider" class="jq-ui-slider" /> <label for="css3slider">CSS3</label></p>
<p><input type="checkbox" value="HTML5" id="html5slider" class="jq-ui-slider"/> <label for="html5slider">HTML5</label></p>
<p><input type="checkbox" value="JavaScript" id="javascriptslider" class="jq-ui-slider"/> <label for="javascriptslider">JavaScript</label></p>
<p><input type="checkbox" value="Other" id="otherslider" class="jq-ui-slider"/> <label for="otherslider">Other</label></p>
<p><input type="checkbox" value="Other" id="otherd" class="jq-ui-slider" disabled /> <label for="otherd">Disabled</label></p>
<p><input type="checkbox" value="Other" id="otherdc" class="jq-ui-slider" disabled checked /> <label for="otherdc">Disabled</label></p>
</fieldset>
<fieldset>
<legend>HTML5 input</legend>
<label for="date">Date</label><br/>
<input type="date" id="date" class='jq-ui-forms'/><br/>
<label for="month">Month</label><br/>
<input type="month" id="month" class='jq-ui-forms'/><br/>
<label for="datetime">Date/Time</label><br/>
<input type="datetime" id="datetime" class='jq-ui-forms'/><br/>
<label for="datetime-local">Date/Time Local</label><br/>
<input type="datetime-local" id="datetime-local" class='jq-ui-forms'/><br/>
<label for="time">Time</label><br/>
<input type="time" id="time" class='jq-ui-forms'/><br/>
<label for="range">Range</label><br/>
<input type="range" id="range" class='jq-ui-forms'/><br/>
</form>
<br><br><br>
</div>
<div title="Transitions" id="jqmtransitions" class="panel" data-footer='footerui'>
<h2 class='expanded' onclick='showHide(this,"jqui_transitions");'>jqUi</h2><p id='jqui_transitions'>
<strong>jq.ui transitions</strong> 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.</p>
<ul>
<li><a href="#transition1" data-transition="slide">Slide</a></li>
<li><a href="#transition2" data-transition="up">Slide Up</a></li>
<li><a href="#transition3" data-transition="down">Slide Down</a></li>
<li><a href="#transition4" data-transition="pop">Pop</a></li>
<li><a href="#transition5" data-transition="flip">Flip</a></li>
<li><a href="#transition6" data-transition="fade">Fade</a></li>
<li><a href="#transition7" >Modal</a></li>
</ul>
<br/><br/>
</div>
<div id="uiapi" title="jqUi API" class="panel" data-pull-scroller='true' data-footer='footerui'>
<ul>
<li><a href="#uigoback">.goBack()</a></li>
<li><a href="#uiclearhistory">.clearHistory()</a></li>
<li><a href="#uiaddcontentdiv">.addContentDiv ()</a></li>
<li><a href="#uisettitle">.setTitle(text) </a></li>
<li><a href="#uisetbackbutton">.setBackButtonText() </a></li>
<li><a href="#uishowmask">.showMask() </a></li>
<li><a href="#uihidemask">.hideMask() </a></li>
<li><a href="#uiloadcontent">.loadContent(); </a></li>
<li><a href="#uilaunch">.launch(); </a></li>
<li><a href="#uiready">.ready(); </a></li>
<li><a href="#uibadge">.updateBadge(); </a></li>
<li><a href="#uiremovebadge">.removeBadge(); </a></li>
<li><a href="#uitoggleheader">.toggleHeaderMenu(); </a></li>
<li><a href="#uitoggleside">.toggleSideMenu(); </a></li>
<li><a href="#uitogglenav">.toggleNavMenu(); </a></li>
<li><a href="#uiactionsheet">.actionsheet() </a></li>
<li><a href="#uispinner">.spinner() </a></li>
<li><a href="#uiscrolltotop">.scrollToTop() </a></li>
</ul>
</div>
<div id="uibadge" title="updateBadge" class="panel" data-footer='footerui'>
Updates a badge with the given value or creates one.<br>
Position can be
<pre>
bl - bottom left
tl - top left
br - bottom right
tr - top right (default)
</pre>
<ul>
<li id='libadge'><a href="javascript:;">Badge</a></li>
</ul>
<pre>
$.ui.updateBadge("#libadge","Badge Created","bl");
</pre>
<a href="javascript:;" onclick="$.ui.updateBadge('#libadge','Badge Created','tl');" class="button">Create Badge</a>
<br>
</div>
<div id="uiremovebadge" title="removeBadge" class="panel" data-footer='footerui'>
Removes a badge.
<ul>
<li id='libadge2'><a href="javascript:;">Badge</a></li>
</ul>
<pre>
$.ui.removeBadge("#target");
</pre>
<a href="javascript:;" onclick="$.ui.updateBadge('#libadge2','2','tl');" class="button">Create Badge</a>
<br>
<a href="javascript:;" onclick="$.ui.removeBadge('#libadge2');" class="button">Remove Badge</a>
</div>
<div id="uiready" title="Ready" class="panel" data-footer='footerui'>
Execute a function when $.ui.launch has completed
<pre>
$.ui.ready(function(){});
</pre>
</div>
<div id="uigoback" title="Go Back" class="panel" data-footer='footerui'>
You can use this command to go back in history.
<pre>
$.ui.goBack()
</pre>
<a href="javascript:;" onclick="$.ui.goBack()" class="button">Go Back</a>
</div>
<div id="uilaunch" title="Launch" class="panel" data-footer='footerui'>
You can use this command to launch your jqUi app if you set autoLaunch=false;
<pre>
$.ui.autoLaunch=false;
$.ui.golaunch()
</pre>
</div>
<div id="uiclearhistory" title="Clear History" class="panel" data-footer='footerui' >
You can use this command to clear the history stack manually
<pre>
$.ui.clearHistory()
</pre>
<a href="javascript:;" onclick="$.ui.clearHistory()" class="button">Clear History Stack</a>
</div>
<div id="uiaddcontentdiv" title="Add Content Div" class="panel" data-footer='footerui'>
You can use this command to add a new div programatically. This will setup scrolling, etc.
<pre>
$.ui.addContentDiv(id, content,title
, pullToRefresh, refreshFunc)
</pre>
<script>
function addDiv(){
$.ui.addContentDiv("myAddedDiv","I was added dynamically","Added Div");
$("#addContent").show();
$("#addContentButton").hide();
}
</script>
<span id="addContent" style='display:none'>
<a href="#myAddedDiv" class="button">View new div</a>
<br/>
</span>
<a id='addContentButton' href="javascript:;" onclick="addDiv();" class="button">Add Content Div</a>
</div>
<div id="uisettitle" title="Set Title" class="panel" data-footer='footerui'>
This will set the page title of the current page programatically. It will not be retained.
<pre>
$.ui.setTitle('Title Change');
</pre>
<a href='javascript:;' onclick="$.ui.setTitle('Title Change');" class="button">Change Title</a>
</div>
<div id="uisetbackbutton" title="Change Back Button Text" class="panel" data-footer='footerui'>
This will set the back button text. You can also override this at the start, which we have done.
<pre>
$.ui.setBackButtonText('GO BACK');
$.ui.backButtonText="Back" //override
</pre>
</div>
<div id="uishowmask" title="Show Mask" class="panel" data-footer='footerui'>
This will show the loading mask. You can trigger this manually for long operations.
<pre>
$.ui.showMask();
</pre>
<script>
function showMask(text){
$.ui.showMask(text);
window.setTimeout(function(){$.ui.hideMask();},2000);
}
</script>
<a href="javascript:;" onclick="showMask('Mask will hide in 2 seconds')" class="button">Show Mask</a>
</div>
<div id="uihidemask" title="Hide Mask" class="panel" data-footer='footerui'>
This will hide the loading mask. You can trigger this manually for long operations.
<pre>
$.ui.hideMask();
</pre>
<a href="javascript:;" onclick="$.ui.showMask()" class="button">Show Mask</a> | <a href="javascript:;" onclick="$.ui.hideMask()" class="button">Hide Mask</a>
</div>
<div id="uiloadcontent" title="Load Div" class="panel" data-footer='footerui'>
This allows you to programatically trigger a page transition/navigation event.
<pre>
$.ui.loadContent()
</pre>
<a href="javascript:;" onclick="$.ui.loadContent('uiapi',false,false,'flip')" class="button">Load $.ui API page with a flip</a>
</div>
<div id="uitoggleheader" title="Toggle Header" class="panel" data-footer="footerui">
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.
<pre>
$.ui.toggleHeaderMenu();
</pre>
<a href="javascript:;" onclick="$.ui.toggleHeaderMenu()" class="button">Toggle Header Menu</a>
</div>
<div id="uitogglenav" title="Toggle Footer Nav" class="panel" data-footer="footerui">
This lets you toggle the footer navigation menu if you have one. when you do this, the content area will expand down for you.
<br>
You can also do this by setting data-footer="none" on the panel
<pre>
$.ui.toggleNavMenu();
</pre>
<a href="javascript:;" onclick="$.ui.toggleNavMenu()" class="button">Toggle Nav Menu</a>
</div>
<div id="uitoggleside" title="Toggle Side Nav" class="panel" data-footer="footerui">
This lets you toggle the side navigation menu if you have one. On a tablet, this will be persistent by default.
<pre>
$.ui.toggleSideNav();
</pre>
<a href="javascript:;" onclick="$.ui.toggleSideMenu();" class="button">Toggle Side Menu</a>
</div>
<div id="uiactionsheet" title="Actionsheet" class="panel" data-footer='footerui'>
This is a shortcut to the actionsheet plugin. This will wire it correctly to jQUi div
<pre>
$.ui.actionsheet()
</pre>
<br><br>
<a href="javascript:;" onclick="$.ui.actionsheet('<a href=\'javascript:;\' class=\'button\'>Test</a>')" class="button">Show a custom sheet</a>
<br/><br/>
</div>
<div id="uispinner" title="Spinner" class="panel" data-footer='footerui'>
This is a shortcut to the spinner plugin. This will wire it correctly to jQUi div
<pre>
$.ui.spinner()
</pre>
<br><br>
<a href="javascript:;" onclick="$.spinner('<a href=\'javascript:;\' class=\'button\'>Test</a>')" class="button">Show a custom sheet</a>
<br/><br/>
</div>
<div id="uiscrolltotop" title="Scroll to Top" class="panel" data-footer='footerui'>
This allows you to scroll to the top of a page. Scroll to the bottom for the link.
<pre>
$.ui.scrollToTop(div_id)
</pre>
<br><br>
Keep scrolling down.<br><br><br><br>Keep scrolling down.<br><br><br><br>Keep scrolling down.<br><br><br><br>Keep scrolling down.<br><br><br><br>Keep scrolling down.<br><br><br><br>Keep scrolling down.<br><br><br><br>Keep scrolling down.<br><br><br><br>Keep scrolling down.<br><br><br><br>Keep scrolling down.<br><br><br><br>Keep scrolling down.<br><br><br><br>Keep scrolling down.<br><br><br><br>
<a href="javascript:;" onclick="$.ui.scrollToTop('uiscrolltotop')" class="button">Scroll to Top</a>
<br/><br/>
</div>
<!-- jqUi > API -->
<!-- jqUi > Transitions -->
<div title="Slide" id="transition1" class="panel splashscreen" data-footer='footerui' style="padding-left:0px"><img src="kitchensink/images/splash.png"></div>
<div title="Slide Up" id="transition2" class="panel splashscreen" data-footer='footerui' style="padding-left:0px"><img src="kitchensink/images/splash.png"></div>
<div title="Slide Down" id="transition3" class="panel splashscreen" data-footer='footerui' style="padding-left:0px"><img src="kitchensink/images/splash.png"></div>
<div title="Pop" id="transition4" class="panel splashscreen" data-footer='footerui' style="padding-left:0px"><img src="kitchensink/images/splash.png"></div>
<div title="Flip" id="transition5" class="panel splashscreen" data-footer='footerui' style="padding-left:0px"><img src="kitchensink/images/splash.png"></div>
<div title="Fade" id="transition6" class="panel splashscreen" data-footer='footerui' style="padding-left:0px"><img src="kitchensink/images/splash.png"></div>
<div title="Modal" id="transition7" class="panel splashscreen" data-modal="true" data-footer='footerui' >I'm a modal window...woot woot
<br><br><br>
Check the input box out below. <br>
<input type="text" class="jq-ui-forms">
</div>
<!-- ------------------------------------------ -->
<!-- ------------------------------------------ -->
<!-- jqPlugins -->
<div title="jqPlugins" id="jqmweb" class="panel" data-header="testheader">
<h2 class='expanded' onclick='showHide(this,"jqweb_info");'>jqPlugins</h2><p id='jqweb_info'>
This is our plugin library of widgets to assist you with developing mobile applications. Some of these are used in jqUi.</p>
<ul>
<li><a href="#webslider" >jq.scroller</a></li>
<li><a href="#webcarousel" >jq.carousel</a></li>
<li><a href="#webswipe" >jq.swipeListener</a></li>
<li><a href="#webtemplate" >jq.template</a></li>
<li><a href="#webselect" >jq.selectBox</a></li>
<li><a href="#webpassword" >jq.passwordBox</a></li>
<li><a href="#webanimate" >jq.css3animate</a></li>
<li><a href="#webdrawer" >jq.drawer</a></li>
<li><a href="#webalphatable" >jq.alphatable</a></li>
<li><a href="#webactionsheet" >jq.actionsheet</a></li>
<li><a href="#webspinner" >jq.spinner</a></li>
<li><a href="#webpopup" >jq.popup</a></li>
</ul>
<br/><br/>
</div>
<!-- jqPlugins > jQ.scroller -->
<div title="Scroller" class="panel" id="webslider" scrolling="no">
<script>
var init_scroller = function () {
$("#scroller").scroller({
scrollBars: true,
verticalScroll: true,
horizontalScroll: false,
vScrollCSS: "jqmScrollbar",
hScrollCSS: "jqmScrollbar"
});
};
window.addEventListener("load", init_scroller, false);
</script>
<div id="outercontent"
style="height: 95%; width:95%; overflow: hidden; position: relative">
<div id="scroller"><div>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</div>
<div>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</div>
<div>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</div>
<div>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</div>
<div>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</div>
<div>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</div>
<div>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</div>
<div>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</div>
<div>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</div>
<div>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</div>
<div>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</div></div>
</div>
</div>
<!-- jqPlugins > jQ.carousel -->
<div title="Carousel" class="panel" id="webcarousel" scrolling="no">
<style>
.carousel_paging2 {
border-radius: 10px;
background: #ccc;
width: 10px;
height: 10px;
float: left;
}
.carousel_paging2_selected {
border-radius: 10px;
background: #000;
width: 10px;
height: 10px;
float: left;
}
.spacer {
width: 10px;
float: left;
}
.carousel_content {
-webkit-transform: translate3d(0, 0, 0);
}
</style>
<script>
var carousel;
function init_carousel() {
carousel=$("#carousel").carousel({
pagingDiv: "carousel_dots",
pagingCssName: "carousel_paging2",
pagingCssNameSelected: "carousel_paging2_selected",
preventDefaults:false
});
carousel=$("#carousel2").carousel({
pagingDiv: "carousel_dots2",
pagingCssName: "carousel_paging2",
pagingCssNameSelected: "carousel_paging2_selected",
vertical:true,
horizontal:false
});
}
window.addEventListener("load", init_carousel, false);
</script>
<div id="carousel_dots" style="text-align: center; margin:auto; clear: both; position: relative; top: 40%; z-index: 200">
</div>
<div id="carousel" style="display:block;height:50%;width:100%;">
<div style="background: yellow;">
<a href="javascript:alert('test');">
I'm a horizontal carousel
</a>
</div>
<div style="background: green;"></div>
<div style="background: blue;"></div>
<div style="background: pink;"></div>
</div>
<div id="carousel2" style="display:block;height:50%;width:100%;">
<div style="background: yellow;">
<span style='color:black'>I'm a vertical carousel</span>
</div>
<div style="background: green;"></div>
<div style="background: blue;"></div>
<div style="background: pink;"></div>
</div>
<div id="carousel_dots2" style="text-align: center; clear: both; position: relative; top: -30%; left: 98%; z-index: 200; width: 20px;"></div>
</div>
<!-- jqPlugins > jQ.swipeListener -->
<div title="Swipe" class="panel" id="webswipe" scrolling="no">
<style>
.result {position:absolute;left:100px;}
</style>
<script>
/* This function runs once the page is loaded, but appMobi is not yet active */
var init_swipe = function () {
$("#swiper").swipeListener({
vthreshold: 30,
hthreshold: 50,
callBack: function (dir) {
debugMsg(dir)
}
});
};
window.addEventListener("load", init_swipe, false);
function debugMsg(direction) {
document.getElementById("debug").innerHTML =
"Up: <span class='result'>" + direction.up + "</span><br />" +
"Down: <span class='result'>" + direction.down + "</span><br />" +
"Left: <span class='result'>" + direction.left + "</span><br />" +
"Right: <span class='result'>" + direction.right + "</span><br />";
}
</script>
Swipe Below
<div id="swiper"
style="height: 200px; width: 95%; background:#ccc"></div>
<div id="debug"></div>
</div>
<!-- jqPlugins > jQ.template -->
<div title="Template" class="panel" id="webtemplate">
<div id="template_content"></div>
<script type="text/html" id="my_template">
<% for (i=0;i<5;i++) %>
This is item <%=i%><br />
</script>
<script type="text/javascript">
var init_template = function () {
$("#template_content").html($.template("my_template"));
};
window.addEventListener("load", init_template, false);
</script>
</div>
<!-- jqPlugins > jQ.appMobiSelect -->
<div title="Select" class="panel" id="webselect" scrolling="yes">
<script>
var init_select = function () {
$.selectBox.getOldSelects("selectTest");
$.selectBox.getOldSelects("selectTest2");
};
window.addEventListener("load", init_select, false);
</script>
On android devices, this will change select boxes to a custom control to fix a bug in Webkit with css3 transform3d.<br /><br />
<div id="selectTest" style="-webkit-transform: translate3d(0, 0, 0)">
<!-- content goes here-->
<br>
<span>
<select id="test">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</span><br /><br />
<br /><br />
</div>
<div id="selectTest2" style="position:relative;top:10;">
<span>
<select id="test2">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="11">1One</option>
<option value="22">2Two</option>
<option value="33">3Three</option>
<option value="43">4Three</option>
<option value="53">5Three</option>
<option value="63">6Three</option>
<option value="73">7Three</option>
</select>
</span>
<br><br><br>
This is disabled<br>
<span>
<select id="test3" disabled>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="11">1One</option>
<option value="22">2Two</option>
<option value="33">3Three</option>
<option value="43">4Three</option>
<option value="53">5Three</option>
<option value="63">6Three</option>
<option value="73">7Three</option>
</select>
</span>
</div>
<br/>
<br/>
This is just some filler content<br><br>
This is just some filler content<br><br>This is just some filler content<br><br>
</div>
<!-- jqPlugins > jQ.appMobiPassword -->
<div title="Password" class="panel" id="webpassword" >
<script>
var pwFixer = new $.passwordBox();
var init_password = function () {
var succ=pwFixer.getOldPasswords("selectPassword");
$("#showPassword").show();
};
window.addEventListener("load", init_password, false);
var pwState = false;
function ShowHidePW() {
if (!pwState) {
pwFixer.changePasswordVisiblity(1, "one");
pwState = true;
}
else {
pwFixer.changePasswordVisiblity(0, "one");
pwState = false;
}
}
</script>
On android devices, this replaces password boxes with a custom control to fix the Webkit css3 transform3d bug. you can also show/hide passwords.<br /><br />
<div id="selectPassword" style=" -webkit-transform: translate3d(0, 0, 0)">
<span><input type="password" id="one" name="one" placeholder="Password" style="width:200px;color:black;"></span>
<br />
<span id="showPassword" style="display:none">Show password:<input type="checkbox" onClick="ShowHidePW()"></span>
</div>
</div>
<!-- jqPlugins > jQ.css3animate -->
<div title="Animate" class="panel" id="webanimate" scrolling="no">
<script>
function moveOnce() {
$("#animate").css3Animate({
width: "100px",
height: "100px",
x: "20%",
y: "30%",
time: "1000ms",
opacity: .5,
callback: function () {
reset()
}
});
}
function reset() {
$("#animate").css3Animate({
y: 0,
x: 0,
opacity: 1,
width: "50px",
height: "50px",
time: "0ms"
});
}
function moveTwice() {
$("#animate").css3Animate({
x: 20,
y: 30,
time: "300ms",
callback: function () {
window.setTimeout(function(){
$("#animate").css3Animate({
x: 20,
y: 30,
time: "500ms",
previous: true,
callback: function () {
reset();
}
});},300);
}
});
}
function animQueue(){
var tmp = new $.css3AnimateQueue();
tmp.push({id:"animate",x:20,y:30,time:"300ms"});
tmp.push({id:"animate",x:20,y:30,time:"500ms",previous:true});
tmp.push({id:"animate",x:0,y:0,time:"0ms"});
tmp.push({id:"animate",x:20,y:30,time:"300ms"});
tmp.push({id:"animate",x:20,y:30,time:"500ms",previous:true});
tmp.push(function(){reset()});
tmp.run();
}
</script>
<a class="button" href="javascript:;" onClick="moveOnce()">Move Once</a> |
<a class="button" href="javascript:;" onClick="moveTwice()">Move Twice</a> |
<a class="button" href="javascript:;" onClick="animQueue()">Queue</a>
<br />
<div id="animate"
style="width: 50px; height: 50px; border: 1px solid black; background: red"></div>
</div>
<!-- ------------------------------------------ -->
<!-- jqPlugins > jQ.drawer -->
<div title="Drawer" class="panel" id="webdrawer" scrolling="no">
<br><br>
<p>a pulldown tool like the notifications bar</p>
<div id="drawer" style="position:relative;top:-270px;height:220px;background:black;width:100%;z-index:100">
This is some content<br><br>
This is some content<br><br>
This is some content<br><br>
This is some content<br><br>
<div class="drawer_handle" style="z-index:;height:30px;width:100%;background:orange;position:absolute;bottom:0px;text-align:center;line-height:30px;font-size:14px;color:black;background:white">PULL DOWN</div>
</div>
<div style="position:absolute;bottom:15px;width:100%;z-index:101">
<div id="drawer_2" style="z-index:1;position:relative;top:105px;height:120px;width:100%;">
<div class="drawer_handle" style="height:30px;width:100%;background:orange;position:absolute;top:0px;line-height:30px;text-align:center;font-size:14px;color:black;">PULL UP</div>
<br><br>
This is content that is pulled up. This could be a menu system.
</div>
</div>
<script>
window.addEventListener("load",function(){
$("#drawer").drawer({});
$("#drawer_2").drawer({direction:"up"});},false);
</script>
</div>
<!-- jqPlugins > jqActionSheet -->
<div title="Action Sheet" class="panel" id="webactionsheet">
<script>
function showCustomHtmlSheet(){
$("#jQUi").actionsheet('<a href="javascript:;" >Back</a><a href="javascript:;" onclick="alert(\'hi\');" >Show Alert 3</a><a href="javascript:;" onclick="alert(\'goodbye\');">Show Alert 4</a>');
}
function showCustomJsonSheet(){
$("#jQUi").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"); }
}]
);
}
</script>
This creates a slide in action sheet from the bottom.<br /><br />
<a class="button" href="javascript:;" onClick="showCustomHtmlSheet()">Show Custom Html Action sheet</a>
<a class="button" href="javascript:;" onClick="showCustomJsonSheet()">Show Custom Json Action sheet</a>
</div>
<!-- jqPlugins > jqSpinner -->
<div title="Spinner" class="panel" id="webspinner">
<script>
function cancelHandler() {
alert('cancel');
}
function doneHandler() {
alert('done');
}
function showCustomJsonSpinner() {
$("#spinner").spinner(
{
wheels: [{
wheel: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
cssClasses: 'red',
handler: function () {}
}, {
wheel: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90],
cssClasses: 'blue',
handler: function () {}
}, {
wheel: ['Jan', 'Feb', 'Mar', 'Apr', 'May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
cssClasses: 'blue',
handler: function () { }
}],
cancel: cancelHandler,
done: doneHandler
}
);
}
</script>
This creates a slide in spinner from the bottom.<br /><br />
<a class="button" href="javascript:;" onClick="showCustomJsonSpinner()">Show Custom Json Sheet</a>
</div>
<div id="spinner"></div>
<div title="Popup" class="panel" id="webpopup">
<script>
function showPopup1(){
$("#jQUi").popup("I'm replacing an alert box");
}
function showPopup2(){
$("#jQUi").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}
);
}
function showPopup3(){
$("#jQUi").popup({ title:"Login",
message:"Username: <input type='text' class='jq-ui-forms'><br>Password: <input type='text' class='jq-ui-forms' style='webkit-text-security:disc'>",
cancelText:"Cancel",
cancelCallback: function(){},
doneText:"Login",
doneCallback: function(){alert("Logging in")},
cancelOnly:false
}
);
}
</script>
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.<br><br>
<a class="button" href="javascript:;" onClick="showPopup1()">Alert style diaglog</a><br>
<a class="button" href="javascript:;" onClick="showPopup2()">Detailed ineraction</a><br>
<a class="button" href="javascript:;" onClick="showPopup3()">HTML markup</a><br>
</div>
<!-- jqPlugins -> jqAlphaTable-->
<div title="Alpha Table" class="panel" id="webalphatable" scrolling="no">
<style>
#contentDIV .alphaItem {padding:5px;}
#contentDIV .alphaItem:nth-child(even) {background: #CCC}
#contentDIV .alphaItem:nth-child(odd) {background: #FFF}
.tableHeader {
background:blue;font-weight:bold;text-align:center;height:24px;
color:white;font-size:20px;line-height:24px;
}
</style>
<br><br>
<p>Scroll an alphabetical list like contacts</p>
<div id="listControl" style="margin-left:auto;margin-right:auto;position:absolute;top:20px;bottom:0px;left:0px;overflow:hidden;width:100%;padding-bottom:10px;">
<div id="contentDIV_container" style="width:100%;height:100%; background-color:white;overflow:hidden;">
<div id="contentDIV" style='color:black'>
<div class="tableHeader" id="itm_anchor_A">A</div>
<li class='alphaItem' id="item1">These are all</li>
<div class='alphaItem' id="item2">sample entries that</div>
<div class='alphaItem' id="item3">could be DIVs or</div>
<div class="tableHeader" id="itm_anchor_B">B</div>
<div class='alphaItem' id="item4">any sort of styled</div>
<div class='alphaItem' id="item5">entries you might wish</div>
<div class='alphaItem' id="item6">that way you don't have to</div>
<div class='alphaItem' id="item7">deal with all the crazy</div>
<div class='alphaItem' id="item8">CSS that is in iScroll.js</div>
<div class="tableHeader" id="itm_anchor_C">C</div>
<li class='alphaItem' id="testItem1">nec tincidunt lacus suscipit a</li>
<li class='alphaItem' id="testItem2">Morbi mollis dui vel urna </li>
<li class='alphaItem' id="testItem3">facilisis ut condimentum </li>
<li class='alphaItem' id="testItem4">mi ullamcorper</li>
<div class="tableHeader" id="itm_anchor_D">D</div>
<li class='alphaItem' id="testItem5">Sed rhoncus mollis est</li>
<li class='alphaItem' id="testItem6">vitae vestibulum massa fringilla id</li>
<li class='alphaItem' id="testItem7">Vestibulum rhoncus lorem nec </li>
<li class='alphaItem' id="testItem8">Aenean volutpat nisi quis </li>
<div class="tableHeader" id="itm_anchor_E">E</div>
<li class='alphaItem' id="testItem9">Pellentesque porttitor ornare</li>
<li class='alphaItem' id="testItem10">Aliquam luctus dui</li>
<li class='alphaItem' id="testItem11">Cras facilisis arcu ac </li>
<li class='alphaItem' id="testItem12">Sed id leo quis massa </li>
<li class='alphaItem' id="testItem13">Duis vitae elit vel eros </li>
<div class="tableHeader" id="itm_anchor_F">F</div>
<li class='alphaItem' id="testItem14">Morbi sed purus enim</li>
<li class='alphaItem' id="testItem15">Nunc volutpat odio vulputate </li>
<li class='alphaItem' id="testItem16">Fusce id ligula erat</li>
<li class='alphaItem' id="testItem17">Vestibulum adipiscing </li>
<div class="tableHeader" id="itm_anchor_G">G</div>
<li class='alphaItem' id="testItem18">Cras eu augue nec est </li>
<li class='alphaItem' id="testItem19">Cras sit amet neque </li>
<li class='alphaItem' id="testItem20">Mauris bibendum condimentum </li>
</div>
</div>
</div>
<script>
window.addEventListener("load",function(){
$("#contentDIV").scroller({});
$("#contentDIV").alphatable($("#contentDIV").scroller(),{listCssClass:"tableListContainer",prefix:"itm_anchor_"});
},false);
</script>
<style>
.tableListContainer {
position:absolute;top:10px;right:0px;width:20px;font-size:8pt;font-weight:bold;color:#000;opacity:.5;border-radius:5px;text-align:center;z-index:9999;border:1px solid black;background:#666;padding-top:5px;padding-bottom:5px;
}
</style>
</div>
</div>
<!-- ------------------------------------------ -->
<!-- navbar -->
<!-- navbar -->
<div id="navbar" style='margin: 0;float:left;'>
<a href="#main" id='navbar_home' class='icon home' >home <span class='jq-badge lr'>3</span></a>
<a href="#jqm" id='navbar_js' class="icon target" >selectors</a>
<a href="#jqmui" id='navbar_ui' class="icon picture" >ui</a>
<a href="#jqmweb" id='navbar_plugins' class="icon key" >plugins</a>
</div>
<footer id='footerui'>
<a href="#main" id='navbar_home' class='icon home' >Home <span class='jq-badge lr'>6</span></a>
<a href="#jqmtransitions" id='navbar_js' class="icon stack" >Trans</a>
<a href="#jqmui" id='navbar_ui' class="icon picture" >ui</a>
<a href="#uiapi" id='navbar_plugins' class="icon info" >api</a>
</footer>
<footer id='footerui2'>
<a href="#main" id='navbar_home' class='icon home' >Home <span class='jq-badge lr'>6</span></a>
<a href="#jqmtransitions" id='navbar_js' class="icon stack" >Trans</a>
<a href="#jqmui" id='navbar_ui' class="icon picture" >ui</a>
<a href="#uiapi" id='navbar_plugins' class="icon info" >api</a>
</footer>
<header id="testheader">
<a id="backButton" onclick="$.ui.goBack()" class='button' style='left:0px;left:auto;overflow:hidden'>Go Back</a>
<h1>Custom Header</h1>
</header>
<!-- ------------------------------------------ -->
<nav>
<div class='title'>Home</div>
<ul>
<li class="icon home mini"><a href="#jqm">Selectors</a></li>
</ul>
<div class='title'>UI</div>
<ul>
<li><a href="#jqmtransitions" >Trans</a></li>
<li><a href="#jqmui" >ui</a></li>
<li><a href="#uiapi" >api</a></li>
</ul>
<div class='title'>Plugins</div>
<ul>
<li> <a href="#webslider" >Scroller</a></li>
<li><a href="#webcarousel" >Carousel</a></li>
<li><a href="#webswipe" >Swipe</a></li>
</ul>
<div class='title'>Menus</div>
<ul>
<li> <a href="javascript:;" onclick="$.ui.toggleHeaderMenu();" >Toggle Header</a></li>
<li> <a href="javascript:;" onclick="$.ui.toggleSideMenu()" >Toggle Side</a></li>
<li> <a href="javascript:;" onclick="$.ui.toggleNavMenu()" >Toggle Footer</a></li>
</ul>
<div class="title">Themes</div>
<ul>
<li><a href="javascript:;" onclick="setActiveStyleSheet('default')">Default</a></li>
<li><a href="javascript:;" onclick="setActiveStyleSheet('carbon')">Carbon</a></li>
<li><a href="javascript:;" onclick="setActiveStyleSheet('eco')">Eco</a></li>
<li><a href="javascript:;" onclick="setActiveStyleSheet('frosty')">Frosty</a></li>
<li><a href="javascript:;" onclick="setActiveStyleSheet('slate')">Slate</a></li>
<li><a href="javascript:;" onclick="setActiveStyleSheet('volcano')">Volcano</a></li>
</ul>
</nav>
<nav id="menu_jqmobi">
<div class='title'>Selectors</div>
<ul>
<li><a href="#jqm1" >$ Selector</a></li>
<li><a href="#jqm2" >$().length()</a></li>
<li><a href="#jqm3" >$().find()</a></li>
<li><a href="#jqm4" >$().html()</a></li>
<li><a href="#jqm5" >$().text()</a></li>
<li><a href="#jqm6" >$().css()</a></li>
<li><a href="#jqm7" >$().empty()</a></li>
<li><a href="#jqm8" >$().hide()</a></li>
<li><a href="#jqm9" >$().show()</a></li>
<li><a href="#jqm10" >$().toggle()</a></li>
<li><a href="#jqm11" >$().val()</a></li>
<li><a href="#jqm12" >$().attr()</a></li>
<li><a href="#jqm13" >$().removeAttr()</a></li>
<li><a href="#jqm14" >$().remove()</a></li>
<li><a href="#jqm15" >$().addClass()</a></li>
<li><a href="#jqm16" >$().removeClass()</a></li>
<li><a href="#jqm17" >$().hasClass()</a></li>
<li><a href="#jqm18" >$().bind()</a></li>
<li><a href="#jqm19" >$().unbind()</a></li>
<li><a href="#jqm20" >$().trigger()</a></li>
<li><a href="#jqm21" >$().append()</a></li>
<li><a href="#jqm22" >$().prepend()</a></li>
<li><a href="#jqm32" >$().get()</a></li>
<li><a href="#jqm31" >$().offset()</a></li>
<li><a href="#jqmparent" >$().parent()</a></li>
<li><a href="#jqm33" >$().isArray()</a></li>
<li><a href="#jqm34" >$().isFunction()</a></li>
<li><a href="#jqm23" >$.jsonP()</a></li>
<li><a href="#jqm24" >$.ajax()</a></li>
<li><a href="#jqm25" >$.get()</a></li>
<li><a href="#jqm26" >$.post()</a></li>
<li><a href="#jqm27" >$.getJSON()</a></li>
<li><a href="#jqm28" >$.param()</a></li>
<li><a href="#jqm29" >$.parseJSON()</a></li>
<li><a href="#jqm30" >$.os</a></li>
</ul>
</nav>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.