ruby-on-rails - rails 3 : looking for simple solution to adding 3 tabs to a report view (need css to draw tabs)

标签 ruby-on-rails css tabs

我见过为 Rails 3 应用程序添加选项卡式导航的各种解决方案,但我需要的更简单(理论上)...

关于我的一个观点,我有三个简短的报告:“概述”部分、“细节 1”和“细节 2”

现在我的 View (HAML) 按顺序显示它们:

%h1 Sales Summary
(haml to display about 15 lines of summary data)

%h1 Sales by Region
(haml to display 15-20 lines about widget sales sorted one way)

%h1 Sales by Product
(haml to display 15-20 lines sorted a different way)

我希望将三个标题放在 3 个相当吸引人的水平选项卡中,并根据他们点击的选项卡简单地隐藏/显示适当的数据。

我更喜欢非 js 方法(适用于禁用 javascript 的浏览器),这意味着我可以根据 url 参数(例如“view=tab1”)重新绘制页面

我可以看到如何将它作为一个表格来实现,但我无法让它看起来非常“像标签”。

最佳答案

这可能会派上用场:http://unraveled.com/publications/css_tabs/

仍然没有 js 约束似乎不合时宜,所以我鼓励您检查 jQuery 的选项卡:http://jqueryui.com/demos/tabs/

它可以直接包含在您的代码中并与几乎所有浏览器兼容。

关于ruby-on-rails - rails 3 : looking for simple solution to adding 3 tabs to a report view (need css to draw tabs),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6430384/

相关文章:

css - 如何将转换后的元素保持在另一个元素后面?

css - 如何对高于其包含元素的元素进行 z-index

python - 使用制表符分隔而不是空格打印

javascript - PanResponder 中的 ScrollView

javascript - Rails - Javascript - 触发数据行为 onchange

ruby-on-rails - rails : How do I define an association extension in a module that gets included in my AR model?

javascript - execCommand() 没有 "unbold"文本

java - 无法在分配了 ToolTipText 的选项卡之间切换 (JTabbedPane)

ruby-on-rails - Rails 4 生产 Assets 在 AWS ELB 和 nginx 上返回 502

ruby-on-rails - 设备升级后无法登录