public
Description: a generator plugin that will copy image assets and view helpers into your app for some sexy button action
Homepage: http://particletree.com/features/rediscovering-the-button-element/
Clone URL: git://github.com/CodeOfficer/silky-buttons-for-rails.git
100644 62 lines (43 sloc) 2.686 kb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
SilkButtons
===========
 
  TO INSTALL:
 
  1. script/plugin install git://github.com/CodeOfficer/silky-buttons-for-rails.git
  2. script/generate silky_buttons
  3. put <%= stylesheet_link_tag 'silky_buttons.css' %> in your layouts
 
 
  Some SilkyButton Helper methods were installed into your app/helpers folder.
 
  Browse them at your leisure, or try these examples in your view:
 
    <%= silk_image('pencil.png') %> outputs ...
      <img alt="Pencil" src="/images/silk/icons/pencil.png?1227089564" />
 
 
    <% form_tag(root_path, {:method => :get, :class => "form"}) do %>
      <%= submit_button('ordinary') %> outputs ....
      <button class="button " type="submit">
        <img alt="Tick" src="/images/silk/icons/tick.png?1227089564" /> ordinary
      </button>
 
      <%= submit_button('creative', :class => 'positive') %> outputs ....
      <button class="button positive" type="submit">
        <img alt="Tick" src="/images/silk/icons/tick.png?1227089564" /> creative
      </button>
 
      <%= submit_button('harmful', :class => 'negative') %> outputs ....
      <button class="button negative" type="submit">
        <img alt="Tick" src="/images/silk/icons/tick.png?1227089564" /> harmful
      </button>
    <% end %>
 
 
    <%= show_button(Post.first) %> outputs ....
    <a href="/posts/1" class="button ">
      <img alt="Eye" src="/images/silk/icons/eye.png?1227089564" /> Show Post
    </a>
 
    <%= new_button(Post.new) %> outputs ....
    <a href="/posts/new" class="button positive ">
      <img alt="Add" src="/images/silk/icons/add.png?1227089564" /> New Post
    </a>
 
    <%= edit_button(Post.first) %> outputs ....
    <a href="/posts/1/edit" class="button ">
      <img alt="Pencil" src="/images/silk/icons/pencil.png?1227089564" /> Edit Post
    </a>
 
    <%= destroy_button(Post.first) %> outputs ....
    <a href="/posts/4" class="button negative " onclick="if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', '88f86d3f9ef9d62c7f74ccca942577aa277bc781'); f.appendChild(s);f.submit(); };return false;">
      <img alt="Delete" src="/images/silk/icons/delete.png?1227089564" /> Delete Post
    </a>
 
  You'll need to include the buttons styles into your layout first.
 
    <%= stylesheet_link_tag 'silky_buttons.css' %>
 
  Enjoy ...