Skip to content
No description or website provided.
Ruby
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
lib
test
.document
.gitignore
Gemfile
Gemfile.lock
LICENSE.txt
README.md
Rakefile
VERSION
jqm_helper.gemspec

README.md

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

  1. Fork
  2. Create a topic branch - git checkout -b my_branch
  3. Push to your branch - git push origin my_branch
  4. Create a Pull Request from your branch
  5. That's it!

Contributors

Peter Ehrlich @ehrlicp

Something went wrong with that request. Please try again.