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>