jQuery结合CSS实现手风琴组件----利用seajs实现静态资源模块化引入
Posted lvlin241
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery结合CSS实现手风琴组件----利用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实现手风琴组件
以上是关于jQuery结合CSS实现手风琴组件----利用seajs实现静态资源模块化引入的主要内容,如果未能解决你的问题,请参考以下文章