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. select id from BS_BU_RULETYPE t start with t.PARENT_ID = 175 connect by t.PARENT_ID = prior t.id

    select id from BS_BU_RULETYPE t start with t.PARENT_ID = 175 connect by t.PARENT_ID = prior t.id

  2. springboot @ComponentScan注解

    @ComponentScan 告诉Spring从哪里找到bean. 如果你的其他包都在@SpringBootApplication注解的启动类所在的包及其下级包,则你什么都不用做,SpringBoot ...

  3. m大子段和 hdu1024

    给出n个数,m个区间: 求选区m个区间的最大值: #include<cstdio> #include<algorithm> #include<math.h> #in ...

  4. 【音乐欣赏】《Forget》 - The Tech Thieves

    曲名:Forget 作者:The Tech Thieves [00:00.000] 作曲 : Mark Emmanuel/Alia May Plesa-Topham [00:01.000] 作词 : ...

  5. 【Python】字符串(String)

    python中单引号和双引号使用完全相同. 使用三引号('''或""")可以指定一个多行字符串. 转义符 '\' 反斜杠可以用来转义,使用r可以让反斜杠不发生转义.. 如 ...

  6. Java8 Lambda使用指南

    Java8 Lambda 的使用指南 原文地址:https://docs.oracle.com/javase/tutorial/java/javaOO/lambdaexpressions.html#s ...

  7. 基于JSP开发手机销售购物商城系统

    开发环境: Windows操作系统开发工具:Eclipse+Jdk+Tomcat+MySQL数据库 运行效果图: 源码及原文链接:https://javadao.xyz/forum.php?mod=v ...

  8. CSS - div中的文字不换行，超出宽度就用省略号表示

    问题 过多的文字会把盒子撑开,造成布局错乱. 解决 .card-title { white-space: nowrap; text-overflow: ellipsis; overflow: hidd ...

  9. cookie的封装

    今天逛论坛,看到一个看起来写得好的函数,特此贴出分享: 原文地址[http://www.html-js.com/article/2638 ] 这个地址[https://github.com/jaywc ...

  10. java web编写四则运算

    首先先画出一个表 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...