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 相关文章推荐
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
JS实现canvas简单小画板功能
Jun 23 Javascript
Vue scoped及deep使用方法解析
Aug 01 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
php懒人函数 自动添加数据
2011/06/28 PHP
php操作xml
2013/10/27 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
2011/08/23 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
python主要用于哪些方向
2020/07/05 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
农业大学毕业生的个人自我评价
2013/10/11 职场文书
市场营销专业求职信
2014/06/17 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
大学学生会竞选稿
2015/11/19 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
Django显示可视化图表的实践
2021/05/10 Python
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏