jqm_helper

ALPHA

A quick and dirty, but functional, collection of tools for speeding up development with jquery mobile.

Enforces a number of sensible defaults, reducing irritable bugs.

Includes view helpers and will soon include some handy javascript tools (such as for handling json data).

Install

gem install jqm_helper

Usage

buttons

    jqm_button 'Open Refrigerator', open_fridge_path
    --> <a data-role="button" data-prefetch="true" href="/fridge/open">

    back_button
    --> <a data-role="button" data-prefetch="true" data-rel="back" >

    backwards_button('Close Refrigerator', close_fridge_path, {class: 'sears'})
    --> <a data-role="button" data-prefetch="true" href="/fridge/close" class="sears"
         data-icon="arrow-l" data-direction="reverse">

    forwards_button('Make Sandwich', sandwich_path, {data: {prefetch: false} })
    --> <a data-role="button" href="/sandwich/make"
             data-icon="arrow-r" data-iconpos="right">

    # and even:
    dialog_button 'rm -fr /', '/doom'
    --> <a data-role="button" data-prefetch="true" href="/doom"
                data-rel="dialog" data-transition="slidedown">

Every method has optional arguments. They can overwrite the sensible defaults.

A very cool syntax can be used:

    { data: { icon: 'star', prefetch: false } }
    # typing that beats the pants off these keyboard gymnastics:
     { :'data-icon' => 'star, :'data-prefetch' => false }

It's worth noting here that as of jquery mobile 1.0, passing false to data-prefetch has no effect, and that this gem works around that by removing the attribute.

slider tag

     def slider_tag(name, label)
       raw %Q{
      <div data-role="fieldcontain" style="border: 0; margin: 0; padding: 1em 0 0 0;">
                  <label style="" for="#{name}">#{label}</label>
                  <select name="#{name}" id="#{name}" data-role="slider">
                    <option value="no">Off</option>
                    <option value="yes">On</option>
                  </select>
                </div>
      }
     end

This could be made more flexible

page builder

    jqm_page 'discovery' do
    # it generates:
    --> <div class="discovery_page" data-role="page" data-title="Discovery" id="discovery_page">
        <meta content="authenticity_token" name="csrf-param">
        <meta content="Oegb/DVSrtDYKJNdXtjQo63eGCBUwtpW83Bysz8h/nQ=" name="csrf-token">

nav builder

Adds class to active page
Reverses animation direction as appropriate (very handy)

    nav_for :discover do |n| # discover will be the active button
      # any buttons before it will display the reverse animation, any after will be forwards
      n.button('discover',
                   {
                           :href => discover_path,
                           :data =>{
                                   :icon => :search,
                           }
                   })
    end

    --> <div data-role="controlgroup" data-type="horizontal" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
          <a class="ui-btn-active" data-icon="search" data-prefetch="true" data-role="button" href="/discover">
            Discover
          </a>
        </div>

Contributing

Once you've made your great commits

Fork
Create a topic branch - git checkout -b my_branch
Push to your branch - git push origin my_branch
Create a Pull Request from your branch
That's it!

pehrlich/jqm_helper