semantic-ui引用到rails

发表于 |

参考：
https://github.com/doabit/semantic-ui-sass
http://semantic-ui.com/

1.安装gem
gem ‘semantic-ui-sass’, github: ‘doabit/semantic-ui-sass’
bundle install

2.引用到项目中
app/assets/stylesheets/application.scss 中加入

"semantic-ui";```
1
2
3
app/assets/javascripts/application.js  中加入
```//= require semantic-ui

3.去官网找到一些demo，实现效果
http://semantic-ui.com/introduction/getting-started.html

比如找到dropdown,下面截图是多选下拉的效果(可以自己点开网页中的按钮试一试)

屏幕快照 2016-08-24 上午11.01.32.png

屏幕快照 2016-08-24 上午11.01.22.png

屏幕快照 2016-08-24 上午11.04.28.png

下面这个是启用js效果的示例

屏幕快照 2016-08-24 上午11.04.58.png

我是这样写的，在我的页面中加入，这样就把官网的示例引用成功了

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
<script type="text/javascript">
$(function(){
  $('.ui.dropdown')
  .dropdown({
    allowAdditions: true
  });
});
</script>
<div class="ui multiple dropdown">
  <input type="hidden" name="filters">
  <i class="filter icon"></i>
  <span class="text">Filter Posts</span>
  <div class="menu">
    <div class="ui icon search input">
      <i class="search icon"></i>
      <input type="text" placeholder="Search tags...">
    </div>
    <div class="divider"></div>
    <div class="header">
      <i class="tags icon"></i>
      Tag Label
    </div>
    <div class="scrolling menu">
      <div class="item" data-value="important">
        <div class="ui red empty circular label"></div>
        Important
      </div>
      <div class="item" data-value="announcement">
        <div class="ui blue empty circular label"></div>
        Announcement
      </div>
      <div class="item" data-value="cannotfix">
        <div class="ui black empty circular label"></div>
        Cannot Fix
      </div>
      <div class="item" data-value="news">
        <div class="ui purple empty circular label"></div>
        News
      </div>
      <div class="item" data-value="enhancement">
        <div class="ui orange empty circular label"></div>
        Enhancement
      </div>
      <div class="item" data-value="off-topic">
        <div class="ui yellow empty circular label"></div>
        Off Topic
      </div>
      <div class="item" data-value="interesting">
        <div class="ui pink empty circular label"></div>
        Interesting
      </div>
      <div class="item" data-value="discussion">
        <div class="ui green empty circular label"></div>
        Discussion
      </div>
    </div>
  </div>
</div>

4.把选择的值传入controller
注意到有这一行

1
<input type="hidden" name="filters">

通过网页右键检查，可以看出添加的value都会以

1
2
面。那么在controller里面就可以通过params[:filters]接收。
可以转换成数组

# 这个是字符串
filters = params[:filters]

＃这里是转化成数组
filters_array ＝ filters.split(“,”)

后面就可以做自己需要做的了

1
2
并且要注意这一行，


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
这里是用data-value里面的值作为选择后放入filters的元素。比如这里是data-value="interesting"，那么选中它之后
就会在filters中加入interesting。
5.编辑页面回显
用这种方式可以设置默认值或者是回显的值
  //$('.ui.dropdown').dropdown('set selected',['Role1','Role2']);
用这个会自动给生成 a 标签，这个和在filters中赋值回显回来的效果一样
这两种方法显示的内容我不知道如何让它像我新增时那样丰富
所以没有用这两种，用的下面的这个，当data-value一致时会把自动生成的给覆盖掉
```<% unless @invitated_users.nil? %>
    <% @invitated_users.each do |user| %>
     <a class="ui label transition visible" data-value="<%= user.id %>" style="display: inline-block !important;">
        <%= gravatar_tag user.email, :size => 50, :default => avatar_url %>
        <%= user.name %>
        回答数量：<%= user.answers.count %>
        <i class="delete icon"></i>
     </a>
    <% end %>
  <% end %>

这样就回显成功了。

当取消掉或新增，进入update方法时，需要比较一下，新增的有哪些，取消的有哪些，取消的要从数据库中删掉，新增的再插入数据库。

我用的是 并集 ＝ 新的集合 | 数据库中老的集合
需要新插入数据库的集合 ＝ 并集 - 数据库中老的集合
需要删除的集合 ＝ 并集 － 新的集合

然后分别对新增和删除的集合进行Model运算

暂时这样，应该可以说清楚了。