乐者为王

Do one thing, and do it well.

使用tabnav插件实现Tab导航

tabnav是rails-widgets中的一个组件。不过我们不需要使用其它的组件,所以我们只要使用omenking创建的tabnav就可以,他已经帮我们把tabnav从rails-widgets中分离出来了。

下载插件:

1
script/plugin install git://github.com/omenking/tabnav.git

生成views/shared/_tabnav.html.erb文件:

1
script/generate tabnav tabnav

添加一个标签页到_tabnav.html.erb中,并且把里面显示每个controller的代码注释掉:

1
2
3
4
add_tab do |t|
  t.named 'Home'
  t.links_to :controller => 'home', :action => 'index'
end

再添加以下代码到tabs.css文件做些许修饰:

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
.tabnav {
  background-color: #fff;
  padding: 5px;
  height: 2em;
  font-size: 10pt;
}

.tabnav ul {
  height: 2em;
  margin: 0;
  padding: 0;
}

.tabnav li {
  display: inline;
  line-height: 1.167em;
  padding: 0;
}

.tabnav li a {
  background: #5ec998;
  color: #ebebeb;
  text-decoration: none;
  border: 0.083em solid #fff;
  border-bottom: 0.083em solid #5ec998;
  padding: 0.5em 0.667em 0.417em 0.5em;
  float: left;
}

.tabnav li a.active {
  color: #ebebeb;
  font-weight: bold;
  background: #004000;
  border: 0.083em solid #fff;
  border-bottom: 0.083em solid #004000;
}

.tabnav li a:hover {
  color: #004000;
}

.tabnav li a.active:hover {
  color: #ebebeb;
}

Comments