#Javascript

编程 5 分钟 读完 (约 686 字)

随着现代浏览器性能的提升，前端工程师设计出的交互方式也多种多样。其中瀑布流方式滚动更新加载已经是一种常见的Web前端交互方式了。

然而在Rails中如何实现这样一种随着用户滚动页面就能自动追加内容到页面的方式呢？

有一些现成的Gem可以推荐，例如jquery-infinite-pages和will_paginate_infinite等。不过我觉得它们使用比较复杂，不如自己去实现一个。

本文既然提到最方便，自然是需要用一种最小化改动的方式来实现这样的功能。

具体如何实现，请往下看。

首先假设我们要实现瀑布流式动态更新的对象是Post(或者是Article、News或者其他)，第一步我们需要在Gemfile中加入以下两个Gem：

1
2
gem 'will_paginate'
gem 'bootstrap-will_paginate'

然后执行bundle，接着去修改posts_controller.rb，修改其中的index方法：

1
2
3
4
5
6
7
8
def index
  @posts = Post.all.paginate(:page => params[:page], :per_page => 10)

  respond_to do |format|
    format.html
    format.js
  end
end

这里由于我们增加了js的渲染格式，所以要去views/posts中添加一个index.js.erb模板文件，内容如下:

1
2
3
4
5
6
7
$('#posts_list').append('<%= j render @posts %>');
<% if @posts.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate @posts %>');
<% else %>
  $(window).off('scroll');
  $('.pagination').remove();
<% end %>

上面的代码通过js定位页面中的posts_list作为要追加元素的目标，所以我们稍微修改一下views/posts/index.html.erb，在其中加入posts_list元素：

1
2
3
4
5
6
7
8

<div id="posts_list">
  <%= render @posts %>
</div>

<div id="infinite-scrolling">
  <%= will_paginate %>
</div>

在这段代码中，我们将@posts集合交给其他模板去渲染了，而这里暂时还没有用来渲染@posts的模板，所以要在views/posts中创建一个_post.html.erb模板文件，内容如下：

1
2
3
4
5
<div>
<h3><%= post.title %></h3>
<p><%= post.content %></p>
<hr/>
</div>

就这么简单，用来输出标题和内容。

最后关键的一步，需要创建一个事件监听器来捕获页面的滚动变化，所以在assets/javascripts/posts.coffee中，加入以下代码：

1
2
3
4
5
6
7
8
9
10

$(document).on "turbolinks:load", ->
  $(window).on 'scroll', ->
    more_posts_url = $('.pagination .next_page a').attr('href')
    if more_posts_url && $(window).scrollTop() > $(document).height() - $(window).height() - 60
      $('.pagination').html('<img src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..." />')
      $.getScript more_posts_url
      return
    return

如此一来，就实现了通过ajax方式请求原来需要在下一页展现内容，并把内容追加到index.html的文章列表中，也就实现了瀑布流加载了。

一切修改好以后，重启Rails服务，在页面滚动一下试试吧。

本方法参考自https://www.sitepoint.com/infinite-scrolling-rails-basics/

编程 4 分钟 读完 (约 587 字)

一直想给安装一个缩略图点击弹出的插件，但是找了找几乎都是用的php来做的，插件的使用和安装极其繁琐，于是上网查了些demo，自己实现了一个纯js的图片弹出插件。

实现的思路是通过编写hook图片的onclick事件的函数，在函数中对body追加div元素，再将传入的图片对象放入元素中，同时再监听div的onclilck事件，当捕捉到点击，再关闭(其实是隐藏)弹出的div。
通过在函数初始化的时候收集页面所有的img元素，再为每个img元素增加onclick=”picHook(this)”这条属性，这样当图片在被点击时，这个函数就能自动创建div蒙板背景，并获取被点击图片的宽度和高度，同时生成一个新的和图片一样大小的div来显示图片。当蒙板再次被点击时，hook事件再次响应，并将蒙板和图片div的style置为none，弹出的图片就被关闭了。
说起来很简单，做起来就更简单了，简单到只需要一个函数即可实现。

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<script>
function picHook(pic){
/*图片对象*/
var imgs = document.getElementsByTagName("img");
/*前景div*/
var light   = document.getElementById('light')  || document.createElement("div");
/*背景div*/
var bg      = document.getElementById('bg')     || document.createElement("div");
/*图片放大*/
var s_pic   = document.getElementById('s_pic')  || document.createElement("img");
/*css对象*/
var css     = document.createElement("style");
/*css样式*/
var csstext = '\
.pic_bg{\
    position: absolute;\
    margin:0 auto; \
    top: 0%;\
    left: 0%;\
    right: 0%;\
    width: 100%;\
    padding-bottom: 1000%;\
    background-color: black;\
    z-index:1001;\
    opacity:.80;\
    filter: alpha(opacity=80);\
    overflow:scroll;\
}\

.pic_div {\
    margin-bottom: auto;\
    position: fixed;\
    left:30%;\
    top:20%;\
    width: 100%;\
    padding-top:25px;\
    margin-left:-250px;\
    margin-top:-100px;\
    z-index:1002;\
}';
/*收集页面所有图片对象*/
for(i=0; i<imgs.length;i++){
    imgs[i].setAttribute("onclick", "picHook(this)" );
}
css.type = "text/css";

/*关闭图像*/
if( !pic ){
    bg.style.display = light.style.display = "none";
}

/*ie兼容*/
if(css.styleSheet){
    css.styleSheet.cssText = csstext;
}else{
    css.appendChild(document.createTextNode(csstext));
}

s_pic.setAttribute("id", "s_pic");
s_pic.setAttribute("src", pic.src);
s_pic.setAttribute("width","70%");
s_pic.setAttribute("height","65%");
s_pic.setAttribute("margin","0 auto");
s_pic.style.display = 'block';
light.setAttribute("id", "light");
light.setAttribute("class", "pic_div");
light.style.display = 'block';
light.appendChild(s_pic);
light.setAttribute("onclick", "picHook()");
bg.setAttribute("id", "bg");
bg.setAttribute("class", "pic_bg");
bg.setAttribute("onclick", "picHook()");
bg.style.display = light.style.display;
document.getElementsByTagName("head")[0].appendChild(css); 
document.body.appendChild(bg);
document.body.appendChild(light);
}
</script>

将这段代码保存在页面的head中，再将body的onload事件绑定到picHook()函数，你的页面中就也可以实现图片点击弹出大图啦。
还存在一点小bug，主要是因为我不太熟悉css，导致div的样式做的有点难看。
css的样式我是直接声明在js里的，这样就不用再另外创建css文件了。
强迫症，没办法。
等有时间再琢磨琢磨css，优化下样式。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×