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的密码强度验证代码
Mar 01 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
p5.js入门教程和基本形状绘制
Mar 15 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
angular 服务随记小结
May 06 Javascript
JS如何在不同平台实现多语言方式
Jul 16 Javascript
Vue Router中应用中间件的方法
Aug 06 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
PHP教程 基本语法
2009/10/23 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
JS打印组合功能
2016/08/04 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
python转换摩斯密码示例
2014/02/16 Python
十个Python程序员易犯的错误
2015/12/15 Python
python微信公众号开发简单流程
2018/03/23 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
大学自荐信
2013/12/12 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书