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 相关文章推荐
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
angular实现form验证实例代码
Jan 17 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
Vue精简版风格概述
Jan 30 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 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
基于文本的搜索
2006/10/09 PHP
用PHP+java实现自动新闻滚动窗口
2006/10/09 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
javascript实现yield的方法
2013/11/06 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
python正则表达式实例代码
2020/03/03 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
python redis存入字典序列化存储教程
2020/07/16 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
python sleep和wait对比总结
2021/02/03 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
医药专业应届毕业生求职信范文
2014/01/01 职场文书
反对邪教标语
2014/06/30 职场文书
单位消防安全责任书
2014/07/23 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
交通事故被告代理词
2015/05/23 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers