用require和artTemplate做的简单提示框

最新推荐文章于 2022-01-13 10:56:34 发布

恩雨降下

最新推荐文章于 2022-01-13 10:56:34 发布

阅读量3.5k

点赞数 1

分类专栏： web前端文章标签： require artTemplate

本文链接：https://blog.csdn.net/huruqing001/article/details/22082931

版权

web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

//require用来加载js文件,artTemplate则用来解析html模板

代码打包了,需要用ngix或其它搭建前端服务器才能正确运行.

//主页index.html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<form>
请输入名字:<input> <br>
请输入密码:<input> <br>
<input type="submit" value="提交">
</form>
<script id="dialog" type="text/html">
<div id="title"><%=title%></div>
<div id="content">
<button>取消</button>
<button>确定</button>
</div>
</script>
<script type="text/javascript" src="../../lib/require.js" data-main="main.js"></script>
</body>
</html>

//main.js代码

require.config({
baseUrl: "",
shim: {
jQuery: {
deps: ['text','template']
}
},
paths: {
'text': "../../lib/text" ,
'jQuery': "../../lib/jquery-1.9.1" ,
'template': "../../lib/template"
}
})
require(['DialogView'],function(DialogView){
var dialogV = new DialogView();
$("body").append(dialogV.el);
})

//dialog.js 对话框js代码

define(['jQuery','text!dialog.html'],function(a,b){
return function(){
var render = template.compile(b);
this.el = render({title:"测试"});
}
})

//dialogTpl.html 对话框模板代码

//style样式代码

body{
overflow: hidden;
}
#dialog{
padding: 5px;
border: 1px solid #000000;
/*background-color: #808080;*/
margin: 200px auto ;
width: 300px;
position: relative;
z-index: 100;
background-color: white;
-webkit-border-radius: 5px;
}
#title{
text-align: center;
line-height: 40px;
background-color: darkgray;
height: 40px;
-webkit-border-radius: 5px;
}
#content{
height:100px ;
margin-top: 30px;
/*background-color: greenyellow;*/
}
#content button:nth-child(1){
float: left;
margin-left:30px ;
}
#content button:nth-child(2){
float: right;
margin-right:30px ;
}
button{
font-size: 28px;
height:45px;
width: 90px;
}
.bg{
opacity: 0.4;
top: 0;
position: absolute;
width: 100%;
height: 100%;
background-color:black;
}