jQuery实现切换页面布局使用介绍


Posted in Javascript onOctober 09, 2011

查看实例:DEMO  演示打包下载

XHTML

<a href="#" id="switch">切换布局</a> 
<div id="demo" class="showlist"> 
<div class="list"> 
<h3><a href="#">文章标题</a></h3> 
<p>文章摘要</p> 
</div> 
... 
</div>

XHTML结构中,在#demo中放入了多个.list,用于显示文章标题和摘要。通过下面的CSS来控制外观。

CSS

#demo{width:680px; margin:20px auto; padding:4px; background:#f7f7f7; 
border:1px solid #d3d3d3} 
.list{margin:6px} 
.list h3{height:26px; line-height:26px; font-size:14px} 
.list p{line-height:20px} 
.showblock .list{float:left; width:325px; height:100px}

我们要设置最外层的#demo样式,使其具有统一外观,包括背景色和边框样式。注意,我们在最后要设置一个样式.showblock .list,控制#demo里的.list样式,使其向左浮动,并设置高度和宽度,设置.showblock其实就是设置#demo的样式,在接下来的jQuery代码中,你就会明白了。当然您可以根据需求自行设计CSS和XHTML,本文只是为了演示简单的构建了样式和HTML结构。

jQuery
实现切换布局的原理其实就是,用javascript来控制页面显示的样式,当用户点击切换时,引用不同的CSSy样式。请看下面的jQuery代码。

$(function(){ 
$("#switch").toggle(function(){ 
$("#demo").fadeOut("fast",function(){ 
$(this).fadeIn("fast").addClass("showblock"); 
}); 
},function(){ 
$("#demo").fadeOut("fast",function(){ 
$(this).fadeIn("fast").removeClass("showblock"); 
}); 
}); 
});

我们使用toggle事件,它用来交替的执行事件,使用fadeOut让切换有个过渡效果,不难看出,就是通过addClass()和removeClass()调用不同的样式来实现不同的布局效果。

问题:如何实现分页后,切换了布局方式,进入下一页和上一页的布局方式一样呢?

思路:可以采用cookie记录用户所选的布局方式,然后进入下一页时读取cookie值,分配布局方式等。关于cookie的使用,可以参照本站文章:使用jQuery操作Cookies

Javascript 相关文章推荐
学习js所必须要知道的一些
Mar 07 Javascript
javascript使用onclick事件改变选中行的颜色
Dec 30 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
详解JS函数防抖
Jun 05 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 #Javascript
关于jQuery的inArray 方法介绍
Oct 08 #Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 #Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 #Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 #Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 #Javascript
js弹出层之1:JQuery.Boxy (二)
Oct 06 #Javascript
You might like
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
python实现括号匹配的思路详解
2018/08/23 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
django实现模型字段动态choice的操作
2020/04/01 Python
Python如何实现的二分查找算法
2020/05/27 Python
巴西宠物商店:Cobasi
2019/04/19 全球购物
秋季运动会加油稿200字
2014/01/11 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
寄语是什么意思
2014/04/10 职场文书
企业法人代表证明书
2014/09/27 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
JavaScript 原型与原型链详情
2021/11/02 Javascript
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技