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!
Contributors
Peter Ehrlich @ehrlicp