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. softmax-Fork

    softmax和分类模型 内容包含: softmax回归的基本概念 如何获取Fashion-MNIST数据集和读取数据 softmax回归模型的从零开始实现,实现一个对Fashion-MNIST训练集 ...

  2. 搭建第一个scrapy项目的常见问题

    错误1:在执行 scrapy crawl spider名命令的时候 出现了ImportError:DLL load failed: %1不是有效的win32程序错误 这是因为pywin32的版本安装错 ...

  3. MFC单文档视图中嵌入GLFW窗口

    开始学习OpenGL由于有一段时间,但是glfw只有窗口区,虽然通过某种手段(移步这里)可以加入工具栏,但仍然无法作为一个标准的GUI,而直接在MFC或Qt里面使用OpenGL API感觉有诸多制肘, ...

  4. makecert 产出证书

    C:\Program Files (x86)\Microsoft SDKs\Windows\v7.1A\Bin>makecert -r -n // -e // -sv mymuse.pvk my ...

  5. css动画效果之transition（动画效果属性）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. python如何将自己写的代码打包供他人使用

    背景: 利用setuptools来实现,所以先安装setuptools,其实Python2.7.9及之后的版本都自带安装setuptools了,无需在另外安装 如果没有安装setuptools的直接下 ...

  7. hdu 4280 最大流 sap模板

    给你岛的坐标求最西边到最东边的最大流 /* 最大流模板 sap */ #include<stdio.h> #include<string.h> #include<algo ...

  8. Nexus坑人系列-license格式问题

    这种情况一般出现在RMA或者新设备使用的时候.这些时候一般需要安装license,在安装完license的时候,例如我们去配置一些三层特性,例如feature eigrp等,可能会出现设备拒绝了你的命 ...

  9. Codeforces Round #614 (Div. 2)E（思维，构造，DP）

    构造边权,从0开始给边赋值,初始选取一条边权为0,每次赋值的贡献为这一条链两侧的结点(包含链的端点)个数之积,下一次赋值以当前链其一端点续一条边,边权为上次赋的值+1.先DFS找到点的组合这条链两侧结 ...

  10. java中的main方法参数String[] args的说明

    参数String[] args 的作用是在运行main方法时,在控制台输入参数 class Test{ public static void main(String[] args){ for(Stri ...