Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master

This branch is 1328 commits behind 01org:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

..
Failed to load latest commit information.
README.md
jq.alphatable.js
jq.carousel.js
jq.css3animate.js
jq.drawer.js
jq.passwordBox.js
jq.scroller.js
jq.selectBox.js
jq.shake.js
jq.social.js
jq.swipe.js
jq.template.js
jq.web.min.js

README.md

jqPlugins

jqPlugins are plugins to use with jqMobi

About

At AppMobi, we use our own tools to build apps and these libraries came out of our internal needs. Two libraries require AppMobi to use, while the rest can be used for AppMobi and general mobile web development.

jq.web.min.js contains a minified version of functions that can be used for mobile web development.

The sources are in the src/ folder. For demos please see the kitchensink app.

Mobile Web Libaries (jq.min.js)

These libraries can be used in AppMobi or general mobile web development.

jq.alphaTable

  • A CSS3 Alphabetical/scrolling table. This creates a table that you can scroll, but have the alphabetical index for users to jump around with.

jq.scroller

  • A CSS3 scrolling library. This allows you to create a fixed height/width div and scroll veritical and/or horizontal.

jq.carousel

  • A CSS3 carousel library. You can create vertical or horizontal carousels.

jq.swipe

  • This detects swipe events on an element. You can set the threshold of pixels they must move for veritcal or horizontal.

  • Executes a callback function with an object as a parameter that indicates if the swipe was north, south, east, or west.

jq.template

  • A template parsing library, similar to popular scripting languages syntax. The parsing engine is John Resig's micro template engine.

jq.selectBox

  • A replacement for HTML select boxes on Android devices. There is a bug when -webkit-transform:translate3d is applied to elements, it causes an issue with painting the active area.

  • This will find all select boxes in an element and replace them with the new widget.

  • Old select box stays, so it is backwards compatibile with any code/interaction.

jq.passwordBox

  • A replacement for HTML password boxes on Android devices. There is a bug when -webkit-transform:translate3d is applied to elements, it causes an issue with painting the focused box on the page.

  • This will find all password boxes in an element and replace them with the new widget.

  • Old password boxes stays, so it is backwards compatibile with any code/interaction.

jq.css3animate

  • This is a helper function for doing css3 animations. It allows you to animate the x/y position, opacity and width/height (more properties coming soon).

jq.drawer

  • This is a pull widget like the notification bar on phones.

AppMobi Libraries

These libraries require AppMobi to work.

jq.shake

  • This taps into the accelerometer to trigger an event when the device has been shook. You can set a threshold to indicate movement required to trigger the shake.

  • Executes a callback function when it recieves a shake.

jq.social (coming soon in 3.4.1)

  • A wrapper utility for making oAuth calls using AppMobi.

How to use jQ.Web libraries

jq.alphaTable

To use jq.alphaTable, you must also include the jq.scroller library and do the following

  1. Create a jq.scroller for your list. See the instructions below.

  2. Create your list, broken up by divs/spans/anchors for each alphabet.

<div id="contacts_A">
<li>Joe Anderson</li>
</div>
<div id="contacts_B">
<li>Joe Bob</li>
</div>
  1. Call the javascript function to create the object. The first paramter is the ID for the scroller, the second is the scroller object. The third is optional config parameters.
var alphaTable = $("#contentDIV").alphaTable(scroller,{prefix:"contacts_",listCssClass:"cssClassName"});

There are two optional parameters

var options{
   prefix:"contacts_", //prefix for your divs
   listCssClass:"listTable" //CSS class name to style the alphabet list.  You can position it, set the background color, etc.
}

jq.scroller

To use jq.scroller you must do the following

  1. Create an outer container div that has the height and width of the area you want to see visible
<div id="my_div_container" style="width:100%;height:300px">
  <!-- div from below goes here -->
</div>
  1. Create a div with the content inside you want scrollable.
<div id="my_div_container" style="width:100%;height:300px">
   <div id="my_div" >
      <!-- content goes here -->
   </div>
</div>
  1. Call the javascript function on the ID of the area you want to scroll
var scroller = $("#my_div").scroller({});

There are configuration options that are passed in as an object parameter

var options={
   verticalScroll:true, //vertical scrolling
   horizontalScroll:false, //horizontal scrolling
   scrollBars:true  //display scrollbars
   vScrollCSS : "scrollBarV", //CSS class for veritcal scrollbar
   hScrollCSS : "scrollBarH", //CSS class for horizontal scrollbar
   refresh:true, //Adds 'Pull to refresh' at the top
   refreshFunction:updateMessage //callback function to execute on pull to refresh
}
var scroller = $("#my_div").scroller(options);

You can also have it scroll to a specific position

scroller.scrollTo({x:-100,y:-200});

If you want to make persistent scrollbars, override the opacity style for the class

.scrollBarV { opacity:.8 !important}

jq.carousel

To use jq.carousel you must do the following

  1. Create a div with the content inside you want to page between. You must set the height and width of this div, along with overflow:hidden
<div id="my_div" style="width:768px;height:400px;overflow:hidden">
   <div style="float:left;width:766px;height:400;border:1px solid white;background:yellow;"></div>
   <div style="float:left;width:766px;height:400;border:1px solid white;background:green;"></div>
</div>
  1. if you want the dots to show up for paging, create the div
<div id="carousel_dots" style="text-align: center; margin-left: auto; margin-right: auto; clear: both;position:relative;top:-40px;z-index:200"></div>
  1. Call the javascript function to create the carousel
var carousel = $("#my_div").carousel();

There are additional configuration options that are passed in as an object parameter

var options={
   vertical:false, // page up/down
   horizontal:true, // page left/right
   pagingDiv:null, // div to hold the dots for paging
   pagingCssName:"carousel_paging", //classname for the paging dots
   pagingCssNameSelected: "carousel_paging_selected" //classname for the selected page dots
}
var carousel = $("#my_div").carousel(options);

There are two functions for adding/removing items

carousel.addItem(element);
carousel.removeItem(); //remove all items
carousel.removeItem(index); //remove an item by index

jq.swipe

To use jq.swipe you must do the following

  1. Create an html elemenet you want to detect the swipe on. This could also be the whole document.

  2. Call the javascript function to listen for the swipe event

var swipe=$(document).swipe(); //string or element to listen on

There are additional configuration options that are passed in as an object parameter

var options={
   vthreshold:50, //vertical pixel threshold
   hthreshold:50, //horizontal pixel threshold
   callback:null //callback function to execute.  It takes one parameter that is an object of the swipe directions {up:true,down:false,left:true,right:false}
}

var swipeListener = $("#mydiv").swipe(options);
var swipeListener = $(document).swipe({vthreshold:30,hthreshold:50,callBack:function(dir){console.log(dir)}});

jq.template

The template parsing library is John Resig's micro templating, with some fixes and enhancements. http://ejohn.org/blog/javascript-micro-templating/

To use jq.template you must do the following

  1. Create your template. The easiest way is to create
Something went wrong with that request. Please try again.