ruby与web代码结合（一）

一.
页面元素固定在某一位置：
1)<div class="page">
<%= paginate @pat_records%>
</div>
2).page{
position: fixed;
right: 20px;
top: 93%;
}

二.加入表头筛选条件添加样式：
<script type="text/javascript">
/*添加列表JS*/
$('.add-up').click(function(){
$(this).toggleClass("active").next().stop().slideToggle();
});
$('.btn-set').click(function(){
$(this).parents('.add-content').slideUp();
$('.add-up').removeClass('active');
});
/*列表添加点击显示隐藏*/
$('.table-list .next-tr').click(function(){
$('.table-list.next-tr').next().find('.intion-cont').stop().slideUp();
$(this).next().find('.intion-cont').stop().slideToggle();
})
</script>

三.列表和图文显示的切换效果实现：
后台控制代码：
<div class="tab-box">
<div class="tab-con active"id="list_info">
<%=render:partial=>"/layouts/list_info", :local=>@condition%>
</div>
<div class="tab-con tab-back"id="picture">
<%= render:partial=>"/layouts/picture", :local=>@condition%>
</div>
</div>
js文件代码：
$("#list_info").html("<%= j(render :partial=>'/layouts/list_info', :local=>@condition)%>");
$("#picture").html("<%= j(render :partial=>'/layouts/picture', :local=>@condition)%>");
样式控制代码：
<script type="text/javascript">
/*tab*/
var aBtn = $('.tab-btn li')
var aDiv = $('.tab-con')
var now = 0;
aBtn.click(function(){
now=$(this).index();
tab();
});
function tab(){
aBtn.removeClass('active');
aDiv.removeClass('active');
aBtn.eq(now).addClass('active');
aDiv.eq(now).addClass('active');
}
</script>

四.分页局部刷新表格：
后台控制代码：
<div class="clear">
<%= paginate @pat_records,:remote=>true%> #：remote=>true自动封装ajax请求会刷新对应内容
</div>