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. HTML5学习（6）a元素

    a元素代表超链接 href属性 hyper reference:通常代表跳转地址 target属性:_self在本窗口中打开(默认),_blank在新窗口中打开. id属性:全局属性,表示元素在文档中 ...

  2. JS使用正则表达式获取小括号、中括号及花括号内容的方法示例

    本文实例讲述了JS使用正则表达式获取小括号.中括号及花括号内容的方法.分享给大家供大家参考,具体如下: JS 正则表达式 获取小括号 中括号 花括号内的内容 <!DOCTYPE html> ...

  3. swoole扩展怎么用

    Swoole 是 PHP 的一个扩展,可以通过 PHP 扩展的方式进行安装和启用. 本地安装 Laradock 在本地安装的话,以 Laradock 为例,需要在 laradock 目录下的 .env ...

  4. Java与Web前端发展前景及薪资对比

    Web前端和Java谁的薪资待遇高?关于这个问题,是很多网友都感兴趣的,在各大论坛贴吧上也看到了不少类似的问题. 现在的互联网行业飞速发展,因此有很多小伙伴想要进入IT行业分一杯羹,但是关于学习什么技 ...

  5. at org.apache.hadoop.hbase.tmpl.master.BackupMasterStatusTmplImpl.renderNoFlush(BackupMasterStatusTm

    at org.apache.hadoop.hbase.tmpl.master.BackupMasterStatusTmplImpl.renderNoFlush(BackupMasterStatusTm ...

  6. sqli-libs（23-28a关）

    Less_23 首先在php文件中加入echo $sql;echo "<br>"; 方法一: :%00 输入?id=1’,报错,说明存在注入漏洞: 输入?id=1' - ...

  7. Vue 高德地图 路径规划 画点

    CDN 方式 <!--引入高德地图JSAPI --> <script src="//webapi.amap.com/maps?v=1.4.13&key=您申请的ke ...

  8. python练习：编写一个程序，检查3个变量x,y,z，输出其中最大的奇数。如果其中没有奇数，就输出一个消息进行说明。

    python练习:编写一个程序,检查3个变量x,y,z,输出其中最大的奇数.如果其中没有奇数,就输出一个消息进行说明. 笔者是只使用条件语句实行的.(if-else) 重难点:先把三个数进行由小到大的 ...

  9. django view 视图控制之数据返回的视图函数

    八.视图 view 概述:views.py定义的python函数,它接受Web请求并且返回Web响应. 有几个页面就有几个视图view user出入url地址,发送request--->urls ...

  10. Appium-测试失败后获取屏幕截图的方法

    最近一直在研究appium,偶尔的机会发现断言后获取屏幕截图.觉得这个方法不错,分享给大家 这样以后在遇到断言,想截图错误屏幕的时候,能够用的上. 1.首先需要2个类,一个是测试类(TestDropL ...