在同时使用日期选择器和TabPanel的时候,日期选择老是跑到TabPanel的下面,这时才发现z-index的作用,可以调整层次顺序,把日期选择器调到最上面就好了,数值越大越在上。

原来在symfony下用的一个TabPanel的Helper,移植到ROR下面,同样好用,本来Symfony就是ROR的思想,所以原来的很多东西都可以用上。

tab_helper.rb

  1. module TabHelper
  2.     def tabMainJS (mid, id, page_id, title,main_class='tab-pane', page_class='tab-page')
  3.         s = ''
  4.         s+= "<div class='#{main_class}' id='#{id}'>\n"
  5.         s+="<script type='text/javascript'>\n"
  6.         s+="#{mid} = new WebFXTabPane( document.getElementById( '#{id}' ) );\n"
  7.         s+="</script>\n"
  8.         s+="<div class='#{page_class}' id='#{page_id}'>\n"
  9.         s+="<h2 class='tab'>#{title}</h2>\n"
  10.         s+="<script type='text/javascript'>#{mid}.addTabPage( document.getElementById( '#{page_id}' ) );</script>\n"
  11.     end
  12.    
  13.     def tabPageOpenClose(mid, page_id, title, page_class='tab-page')
  14.         s = ''
  15.         s+="</div>\n"
  16.         s+="<div class='#{page_class}' id='#{page_id}'>\n"
  17.         s+="<h2 class='tab'>#{title}</h2>\n"
  18.         s+="<script type='text/javascript'>#{mid}.addTabPage( document.getElementById( '#{page_id}' ) );</script>\n"
  19.     end
  20.    
  21.     def tabInit(mid='', n='')
  22.         s = ""
  23.         s+="</div>\n"
  24.         s+="<script type='text/javascript'>\n"
  25.         s+="setupAllTabs();\n"
  26.         unless n.blank?
  27.             s+="#{mid}.setSelectedIndex('#{n}');"
  28.         end
  29.         s+="</script>\n"
  30.         s+="</div>\n"
  31.     end
  32. end
© 2011 刘敏的Blog Suffusion theme by Sayontan Sinha