1. 目录结构(webStrom)

2. 代码

1.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS DIV 1</title>

    <script type="text/javascript" src="js/jquery-3.0.0.js"></script>

    <link href="css/1.css" rel="stylesheet" type="text/css"></link>

    <script type="text/javascript" src="js/sea.js"></script>

    <script type="text/javascript" src="js/app/1.js"></script>

</head>

<body>

<div id="main" class="main">

    <div id="left" class="left">

        <div id="leftTop" class="leftTop">

            <div id="navDescription" class="navDescription">left</div>

            <div id="navImg" class="navImg">

                <img src="img/toLeft.png">

            </div>

        </div>

        <div id="leftBottom" class="leftBottom">

            <div class="leftBottom1">

                <div id="leftBottom1" class="contentStyle">leftBottom1</div>

            </div>

            <div class="leftBottom2">

                <div id="leftBottom2" class="contentStyle">leftBottom2</div>

            </div>

            <div class="leftBottom3">

                <div id="leftBottom3" class="contentStyle">leftBottom3</div>

            </div>

        </div>

    </div>

    <div id="right" class="right">

        <div id="rightContent" class="rightContent">right</div>

    </div>

</div>

</body>

</html>

1.css

.main {

	width: 1280px;

	height: 300px;

	background-color: #7FFFD4;

	float: left;

}

.left {

	float: left;

	width: 20%;

	height: 80%;

	background-color: yellow;

}

.right {

	float: right;

	width: 80%;

	height: 84%;

	background-color: lightblue;

}

.rightContent{

	height: inherit;

	text-align: center;

	vertical-align: bottom;

}

.leftTop {

}

.leftBottom {

	margin-top: 60px;

}

.leftBottom1 {

	height: 60px;

	background-color: #00FF00;

	border-top: 3px solid #FF0000;

}

.leftBottom2 {

	height: 60px;

	background-color: #FF00FF;

	border-top: 3px solid #FF0000;

}

.leftBottom3 {

	height: 60px;

	background-color: #FFE4E1;

	border-top: 3px solid #FF0000;

	border-bottom: 3px solid #FF0000;

}

.navDescription {

	float: left;

	padding-top: 17px;

	padding-left: 95px;

}

.navImg {

	float: right;

	height: 100%;

	cursor: pointer;

}

.contentStyle{

	padding-top: 18px;

	padding-left: 70px;

	cursor: pointer;

}

1.js

/**

 *

 */

// 常量对象

var constent;

function toLeft() {

	$(".left").css({

		"width" : "2.5%"

	});

	$(".left .navDescription").css({

		"display" : "none"

	});

	$("img").attr({

		"src" : constent.rightNavImg

	});

	$(".right").css({

		"width" : "97.5%"

	});

	$("img").attr({

		"onclick" : "toRight();"

	});

}

function toRight() {

	$(".left").css({

		"width" : "20%"

	});

	$(".right").css({

		"width" : "80%"

	});

	$(".left .navDescription").css({

		"display" : "block"

	});

	$("img").attr({

		"src" : constent.leftNavImg

	});

	$("img").attr({

		"onclick" : "toLeft();"

	});

}

function showLeftContentToRight(content) {

	var text = $(content).text();

	$(".rightContent").text(text);

}

seajs.use("const/cont.js", function(cont) {

	// 初始化常量对象

	constent = cont.getConstant();

	console.log("seajs use 加载... ");

	$(document).ready(function() {

		console.log("ready 加载... ");

		if (constent.leftNavImg === $("img").attr("src")) {

			$("img").attr({

				"onclick" : "toLeft();"

			});

		}

		$("#leftBottom1").attr({

			"onclick" : "showLeftContentToRight('#leftBottom1');"

		});

		$("#leftBottom2").attr({

			"onclick" : "showLeftContentToRight('#leftBottom2');"

		});

		$("#leftBottom3").attr({

			"onclick" : "showLeftContentToRight('#leftBottom3');"

		});

	});

});　　

cont.js

/**

 * seajs 模块化管理静态资源(图片路径)

 */

define(function(require,exports,module){

	function getConstant(){

		return {

			"rightNavImg":"img/toRight.png",

			"leftNavImg":"img/toLeft.png"

		};

	}

	module.exports = {

		getConstant : getConstant

	};

});　　

sea.js                   官网: http://seajs.org/docs/#downloads

jquery-3.0.0.js      官网:http://www.jq22.com/jquery-info122

3. 运行效果-- jQuery结合CSS实现手风琴组件

jQuery结合CSS实现手风琴组件(2)----利用seajs实现静态资源模块化引入的更多相关文章

  1. jQuery结合CSS实现手风琴组件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...

  3. 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

  4. 如何利用 jQuery 修改 css 中带有 !important 的样式属性？

    使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...

  5. CSS实现常用组件特效（不依赖JS）

    我们已经习惯用 JavaScript 实现常见的 UI 功能组件,如手风琴.工具提示.文本截断等.但是随着 HTML 和 CSS 新特性的推出,不用再支持旧浏览器,我们可以越来越少用 JavaScri ...

  6. jquery的css详解（一）

    通过阅读源码可以发现css是jq的实例方法.而在内部调用jq的工具方法access来实现的,对该方法不了解的朋友请点击 -> jquery工具方法access详解 在access的回调中做了一个 ...

  7. jquery垂直展开折叠手风琴二级菜单

    摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...

  8. sencha touch 扩展篇之使用sass自定义主题样式 （下）通过css修改官方组件样式以及自定义图标

    上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包  在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sas ...

  9. 第二百二十六节，jQuery EasyUI，Tree(树)组件

    jQuery EasyUI,Tree(树)组件 本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件. 一．加 ...

随机推荐

  1. Python记通用列表操作之切片！

    ______________________________________除使用索引(indexing)来访问单个元素外,还可使用切片 (slicing) 来访问特定范围内的元素. 切片适用于提取序 ...

  2. Unity Coroutine详解（二）

    •        介绍•        Part 1. 同步等待•        Part 2. 异步协程•        Part 3. 同步协程•        Part 4. 并行协程 1.介绍 ...

  3. bugku 隐写2

    首先打开链接发现是一张图片 然后分析一下图片 发现这个图片实际是一个压缩包 然后更改一下后缀名 改成zip 然后解压之后会发现另一个压缩包和一张图片压缩包需要密码然后这个图片是一个提示 然后分析 (我 ...

  4. angular 页面中引入静态 PDF 文件

    在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件 常用的几种PDF预览代码片段如下: 方法一: <object type="application/pdf" ...

  5. QT写的一个小工具:阿里云MQTT连接参数生成器.

    一.工具介绍. 最近在研究MQTT协议联网的一些问题,现在主流的物联网平台都支持MQTT协议. 在做阿里云平台连接测试的时候,连接参数的生成没有好用的工具, 所以就自己写了一个. 这个工具主要用于阿里 ...

  6. maven版cxf集合spring开发服务端(二)

    一.新建一个maven项目 二.pom.xml引入依赖 <dependency> <groupId>org.apache.cxf</groupId> <art ...

  7. [PHP]新版的mongodb扩展安装和使用

    旧版的mongo扩展已经不推荐使用了,在php7以上一般是安装和使用新版的mongodb扩展 ubuntu下 apt-get install php-mongodb 例如下面的代码进行了查询和插入集合 ...

  8. 攻防世界 robots题

    来自攻防世界 robots [原理] robots.txt是搜索引擎中访问网站的时候要查看的第一个文件.当一个搜索蜘蛛访问一个站点时,它会首先检查该站点根目录下是否存在robots.txt,如果存在, ...

  9. PTA的Python练习题（十八）

    第4章-20 求矩阵各行元素之和 遇到一个麻烦的事情: 上面a,b输入,如果一起输入转int会报错,因为int只能一对一 但是明明我分开来int了,下面第十行还是报错说我的b是string字符,难不成 ...

  10. 201771010135 杨蓉庆《2018面向对象程序设计（java）课程学习进度条》

                                                                                                        ...