AUX_web is a project mainly written in ..., it's free.
aUX Web - helper functions for creating AppMobi and mobile web applications.
== aUX_web
aUX.web is a helper library for writing mobile web apps and AppMobi apps.
== 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. aUX.web.web.min.js contains a minified version of functions that can be used for mobile web development aUX.web.am.min.js contains the appmobi specific functions. aUX.web.all.min.js contains all the toolkit functions
The sources are in the web/ and appmobi/ folders. You can find demos in the demo/ folder.
== Mobile Web Libaries (aUX_web.min.js) These libraries can be used in AppMobi or general mobile web development. aUX.web.alphaTable
aUX.web.scroller
aUX.web.carousel
aUX.web.swipeListener
aUX.web.template
aUX.web.appMobiSelect
aUX.web.appMobiPassword
aUX.web.css3animate
== AppMobi Libraries These libraries require AppMobi to work
aUX.web.shakeListener
aUX.web.social (coming soon in 3.4.1)
== aUX.web.alphaTable
To use aUX.web.alphaTable, you must also include the aUX.web.scroller library. You must do the following
Create a aUX.web.scroller for your list. See the instructions below.
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>
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 = new aUX.web.alphaTable("contentDIV",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. Youc an position it, set the background color, etc.
}
== aUX.web.scroller
To use aUX.web.scroller you must do the following
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>
Create a div with the content inside you want scrollable.
<div id="my_div" >
<!-- content goes here -->
</div>
Call the javascript function
var scroller = new aUX.web.scroller("my_div");
There are additional configuration options that are passed in as an object parameter
var options={
verticalScroll:true, //vertical scrolling
horizontalScroll:false, //horizontal scrolling
scrollBars:true //display scrollbars
}
var scroller = new aUX.web.scroller("my_div",options);
You can also have it scroll to a specific position
scroller.scrollTo({x:-100,y:-200});
== aUX.web.carousel
To use aUX.web.scroller you must do the following
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>
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>
Call the javascript function to create the carousel
var carousel = new aUX.web.carousel("my_div");
There are additional configuration options that are passed in as an object parameter
var options={
totalPages:2, //number of pages to scroll through
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 = new aUX.web.carousel("my_div",options);
== aUX.web.swipeListener
To use aUX.web.swipeListener you must do the following
Create an html elemenet you want to detect the swipe on. This could also be the whole document.
Call the javascript function to listen for the swipe event
var swipe=new aUX.web.swipeListener(document); //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 has the swipe directions
}
var swipeListener = new aUX.web.swipeListener("myDiv",options);
var swipe = new aUX.web.swipeListener(document,{vthreshold:30,hthreshold:50,callBack:function(dir){console.log(dir)}});
== aUX.web.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 aUX.web.template you must do the following
Create your template. The easiest way is to create <script> tags with the content type of "text/html" and set an id
<script type='text/html' id='user_info'>
Name <%=userinfo.name%><br>
Company <%=userinfo.company%><br>
Cool <%=userinfo.awesome%>
</script>
To process the template you call a javascript function with the id of the template, and optional data to pass in
document.getElementById('output').innerHTML=aUX.web.template("template");
You can pass in an optional object parameter that provides data to be used within the template. Below is a sample that could display user information based on a user object
<script type='text/html' id='user_info'>
Name <%=userinfo.name%><br>
Company <%=userinfo.company%><br>
Cool <%=userinfo.awesome%>
</script>
<script type='text/javascript'>
var user={
name:"Joe Programmer",
company:"appMobi",
awesome:"of course"
}
document.getElementById("output").innerHTML=aUX.web.template("user_info",{userinfo:user});
</script>
== aUX.web.appMobiSelect
Currently, there exists a bug in mobile webkit with -webkit-transform:translate being applied to an element that has <select> elements in it. The second the translate position is changed, the active box for the select box changes. It could be above or below the actual select box, making the user experience a disaster. What this does is replaces all select boxes with a custom widget that is similar to the android picker. The old select is still there and backwards compatible with other libraries for getting/setting values.
To use aUX.web.appMobiSelect you must do the following
Make sure your current select boxes are wrapped in a span tag
<span><select id="myid"><option>1</option></select>
On the document.load or appMobi.device.ready listener, you must create an object, then call getOldSelects on the elements (div/spans/document) you want.
var selectFixer = new aUX.web.appMobiSelect();
selectFixer.getOldSelects("selectTest");
getOldSelects takes in the id of the element you want to search for select tags in. Ideally, you would call it on all the divs that have select boxes in it. There are issues with Google Maps, and other libraries, that inject their own select boxes into the DOM.
Currently, you can not theme this, but it will be added soon.
== aUX.web.appMobiPassword
Currently, there exists a bug in mobile webkit with -webkit-transform:translate being applied to an element that has <input type="password"> elements in it. The second the translate position is changed, the overlay for the password is in a different position, making it look like another input box appears. What this does is replaces the password box with an input box that updates the content as it goes with an asterik to simulate a password box
To use aUX.web.appMobiPassword you must do the following
Make sure your current password boxes are wrapped in a span tag
<span><input type="password" id="myid"></span>
On the document.load or appMobi.device.ready listener you must create an object and then call getOldPasswords on the elements (div/spans/document) you want.
var pwFixer = new aUX.web.appMobiPassword();
pwFixer.getOldPasswords("selectTest");//element you want to replace the password boxes in
getOldPasswords takes in the id of the element you want to search for password boxes in. This will replace them with the new tool.
Currently, you can not theme the input boxes, but that will be added soon.
== aUX.web.css3animate
This is a library to help with css3 animations
To use aUX.web.css3animate you must
Call the function
aUX.web.css3animate("element_id",options);
There are additional configuration options that are passed in as an object parameter
var options={
x:20, //x axis move. this can be a number (40), percent (50%), or pixels (40px) - if it's a number, px is added to it.
y:20, //y axis move
opacity:.5, //opacity to change to
width:"100px", //style.width to change to
height:"100px", //style.height to change to
origin:"50% 50%", //offset to start the animation from default is 0 0
rotateX:"50deg", //rotate along the x-axis
rotateY:"50deg", //rotate along the y-axis
skewX:"50deg", //skew along the x-axis
skewY:"50deg", //skew along the y-axis
time:"300ms", //time for transition
timingFunction:"linear", //timing function for animation
previous:false // move from previous position - not tested with animation by percentages
callback:function(){console.log("finished animation")}
}
aUX.web.css3animate("element_id",options);
You can chain animations by passing in a animation in the callback function
aUX.web.css3Animate("animate", {x : 20, y : 30, time : "300ms", callback : function() { aUX.web.css3Animate("animate", {x : 20, y : 30,time : "500ms", previous : true,callback : function() {reset(); }});}});
== aUX.web.social
To use aUX.web.social you must do the following
Register the oauth service in the Enterprise Control Panel
Create an object for each service
var serviceName="twitter";
var twitter= new aUX.web.social(serviceName);
Make the oAuth request for the service
twitter.makeRequest("https://api.twitter.com/1/statuses/user_timeline.json","get_timeline","GET",printTimeline);
makeRequest is the main function you will interact with. It takes in the following parameters
Below is a sample of posting a status update to twitter
twitter.makeRequest("https://api.twitter.com/1/statuses/update.json","set_update","POST",checkResult,"status=foobar"
== aUX.web.shakeListener
To use aUX.web.shakeListener you must do the following
Call the javascript function and pass in a callback function to be executed when a shake is detected
aUX.web.shakeListener(function(){console.log("Shake Detected");});
An optional second parameter is threshold for declaring accelerometer movement as a shake. The default is 5. Lowering it will trigger the callback more, raising it will trigger it less.
aUX.web.shakeListener(function(){console.log("Shake Detected");},10); //More shakes needed to trigger the callback