herbyme / aux_ui

aUX - UI toolkit for creating AppMobi Apps and mobile Apps

aUX.js¶ ↑

aUX.js is a UI library for building mobile apps

About¶ ↑

We’ve had a lot of requests for a UI framework. There are a bunch of frameworks, but cross platform mobile performance is not the best. Some work great on iOS, but lack performance on android. We wanted to create a lightweight framework that is simple for users. We do not want you to be writing crazy HTML, JavaScript, or CSS.

How to use aUX.js¶ ↑

To use aUX.js, you need to include the javascript files. We suggest using aUX.min.js which has all the necesary files, otherwise include the source for all of them, along with the CSS.

We have three special registered div blocks for your layout based off id’s. They are the navbar, content, and toolbar.

• navbar - this is the top navbar. You can add additional buttons, turn other events on/off on clicks if you need. We handle the back button and the title for you. If this is not present, we will create it.

• content - this is the content area. You do not need to add anything here. All page divs will be added here. If you put a div in there, it will be shown first.

  Each div inside will need the class "panel".  aUX.js will search for all elements with that classname and add them automatically.  These will scroll by default

• toolbar - this is the bottom toolbar. You can put your navigation buttons here. We reset the history queue when you switch the navigation buttons. This is optional. If you do not include it, it will not be shown.

• You can manipulate the height of the divs via the CSS class. If you do not want the navbar to be shown, you can set the display property to none.

• To add divs to the content, simply set the class to “panel”. This is a special css class that we search for at startup.

• aUX_web.scroller is added automatically, along with aUX.web.appMobiSelect, aUX.web.appMobiPassword, and aUX.web.css3animate.

• Linking to pages - You can link two ways. You can link to a file by setting the URL, which will load via AJAX. Or you can set the href property to “#div_id”

  <a href="#login">Login</a>

• Ajax - using AppMobi, you can do cross domain requests. We will crawl the pages and wire any links found. We added new features to add the content to the dom, force refresh and more.

Tips¶ ↑

• Ajax - you can add an ajax request into the DOM that will be accessible by the URL referenced by setting the data-persist attribute. You can force a refresh by setting data-refresh-ajax=“true”. You can also make the scroller “pull to refresh” by setting data-pull-scroller=“true”

  <a href="http://www.appmobi.com" data-persist="true">AppMobi</a>  //Div will be added to the dom
  <a href="http://www.appmobi.com" data-persist="true" data-refresh-ajax="true">AppMobi</a>  //Everytime the link is clicked, it will fetch the data
  <a href="http://www.appmobi.com" data-pull-scroller="true">AppMobi</a>  //When the scroller content is pulled down, it will refresh the page

• If you are using any of the aUX.web components (like aUX.web.carousel), you MUST declare them after the aUX.ui() function.

• To open links in a new window, set the target property

  <a href="http://www.appmobi.com" target="_blank">AppMobi</a>

• We handle history and transitions. You can select from six transitions by setting the data-transition property. The default is slide.

  <a href="#login" data-transition="slide">Login</a>  //slide left/right
  <a href="#login" data-transition="up">Login</a>  //slide up/down
  <a href="#login" data-transition="down">Login</a>  //slide down/up
  <a href="#login" data-transition="flip">Login</a>  //Flip the page
  <a href="#login" data-transition="fade">Login</a>  //Fade in/out
  <a href="#login" data-transition="pop">Login</a>  //Pop in/out

• To update the content of a div, you must call the function updateContentDiv(id,content);

  <script>AMUi.updateContentDiv("login","New Login HTML");

• To dynamically add a new div, you can call the function addContentDiv(id,content);

  <script>AMUi.addContentDiv("newdiv","This is some new html");

• To navigate to a a page transition via javascript, you can call the function loadContent(id,clearHistory,backbutton,transition)

  <scritp>AMUi.loadContent("my_id",false,false,"pop");</script>

• To prevent a div from scrolling, set the property “scrolling” to “no” on the div

  <div class="panel" scrolling="no">
  </div>

• To get the current active div/page

  <script>AMUi.activeDiv //reference to the div</script>
  <script>var activeId=AMUi.activeDiv.id</script>

• To make the back button text static

  <script>AMUi.backButtonText="Back...";</script>

• To change the back button text dynamically

  <script>AMUi.setBackButtonText("Go Back");</script>

• You can assign a javascript function to be executed and parameters by setting data properties. The function expects paramter 1 to be the div that is being displayed and the second parameter is an object.

  This is helpful if you want to use templates to generate layouts.
   <script>
   function getApps(targetDiv,obj)
   {
   targetDiv.innerHTML="The id called = "+obj.id+" and drawer="+obj.drawer;
   }
   </script>
   <a href="#games" data-function="getApps" data-params="id:1,drawer:2" > Games </a>

• Please see aUX.css for additional button colors and ways to change the theme

Known Issues¶ ↑

The default scroller will scroll all content. To disable scrolling on a div, set scrolling=“false”