jQuery Mobile (mobile_button_to) helper

luislavena · March 6, 2012, 3:28am

For those of you who use jQuery Mobile with Rails, I created a method
called mobile_button_to which allows you to customize and use any or all
options with a jQuery button.

The gist for the helper is located here, along with a brief example of
how to use it:

gist.github.com

https://gist.github.com/elricstorm/1982942

_dialog_action_page.mobile.erb

<style>
    span.title {
        display: block;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 20px;
    }
</style>

<div data-role="page" id="sitetips" data-title="Dialog Tips">

This file has been truncated. show original

mobile_helper.rb

module MobileHelper

  def mobile_button_to(name, url, options = {})
    return link_to "#{name}", "#{url}",
                   :'data-corners'      => options[:corners],             # default: true - if set false no rounded corners
                   :'data-role'         => options[:role] || 'button',    # Set the option to 'none' or keep a button
                   :'data-icon'         => options[:icon],                # Sets an icon attribute
                   :'data-iconpos'      => options[:iconpos],             # Set the icon position (right/top/bottom/notext)
                   :'data-iconshadow'   => options[:iconshadow],          # default: true - if set false, no shadow
                   :'data-mini'         => options[:mini],                # Sets whether data is compact (true)

This file has been truncated. show original

It acts as a normal link_to which accepts the name, and href (or #id),
followed by as many options as you’d like to use:

:role, :icon, :mini, :inline, :theme, :rel, etc.

The idea was to minimize code length, make it more readable, and
maintain a consistent rails presence when using buttons. If anyone has
similar helpers that you’ve created with jQuery Mobile, please feel free
to add them.

Thanks,

JD