Friday, October 22, 2010

Rails rounded corner box helper

Here is the helper include in your rails app. You need to take care of images .
#usage:

 <%top = {"background-image"=>"url('/images/accept_box_top.png')",:height=>"6px",:width=>"328px"}%>


  <%mid = {"background-image"=>"url('/images/accept_box_mid.png')",:height=>"405px",:width=>"auto"}%>

 


  <%bottom = {"background-image"=>"url('/images/accept_box_bottom.png')",:height=>"9px",:width=>"auto"}%>

 


  <%content = {"padding"=>"15px 28px 22px 26px"}%>
  <%=round_box(top,mid,bottom,content){|f|  "nice box"} %>


Make sure that you pass right height and width. It automatically renders the box and content inside.
If you want you also add extra css attributes too!

#round_box_helper.rb

module RoundBoxHelper

  def round_box(top, mid,bottom,content,&b)

     css_elements( top,mid,bottom,content)+

     "<div class = 'accept_gift_box'>

      <div class='accept_gift_box_top'></div>

        <div class='accept_gift_box_mid'>

          <div
class='accept_gift_box_content'>

             
"+b.call+"

          </div>

        </div>

    <div class='accept_gift_box_bottom'> </div>

  </div>"

  end


  def css_elements top,mid,bottom,content

     "<style type='text/css'> " +

      ".accept_gift_box_top{"+

        parse_styles( top )+

      "}"+

       ".accept_gift_box_mid{"+

        parse_styles( mid )+

      "}"+

      ".accept_gift_box_bottom{"+

        parse_styles( bottom )+

      "}"+

      ".accept_gift_box_content{"+

        parse_styles( content )+

      "}"+

      ".accept_gift_box{"+

       "float:left;"+

      "}"+

     "</style>"

  end


  def parse_styles el

    str=""

    el.each_pair do |attr,value|

      str = str+attr.to_s+":"+value.to_s+";"

    end

    str

  end


end