jQuery结合CSS实现手风琴组件(2)----利用seajs实现静态资源模块化引入

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实现手风琴组件

posted @ 2016-11-27 19:04  lvlin241  阅读(211)  评论(0)  编辑  收藏  举报