Слияние кода завершено, страница обновится автоматически
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>ptemplatejs demo</title>
<script src="ptemplate.js"></script>
<script src="ptemplate.extend.tmplattrs.js"></script>
<script src="ptemplate.extend.tmplfilter.js"></script>
<script src="ptemplate.extend.tmpltags.js"></script>
<script src="ptemplate.extend.jsonp.js"></script>
<script src="ptemplate.extend.ajax.js"></script>
<script src="ptemplate.extend.touchs.js"></script>
<script src="ptemplate.extend.callbacks.js"></script>
<script src="ptemplate.extend.animate.js"></script>
<script src="ptemplate.extend.video.js"></script>
<style>
body {
background: #f4f5f7;
font-family: 微软雅黑;
}
body, ul, p {
list-style: none;
padding: 0;
margin: 0;
}
.pstyle{
font-size:1rem;
color:rgb(255,69,0);
}
.animate{
width:200px;
height:150px;
background-color:rgb(0,0,0);
}
videoplay {
font-size:12px;
background: rgba(0, 0, 0, .8);
display: block;
margin:10px 0;
position: relative;
}
videoplay.fullscreen {
background: rgba(0, 0, 0, .8);
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999999;
}
videoplay.fullscreen video {
height: 100%;
}
videoplay span.videostatus {
position: absolute;
top: 10px;
left: 10px;
padding: 0 5px;
color: rgba(255, 255, 255, .5);
}
videoplay span.videostatus.hide {
display: none;
}
videoplay span.netstate {
position: absolute;
top: 10px;
right: 10px;
padding: 0 5px;
color: rgba(255, 255, 255, .5);
}
</style>
</head>
<body>
<div p-template="valid_form">
<validform action="/" method="get" target="_target" submithandle="handleValidForm" errorhandle="handleValidFormError">
empty: <input type="text" name="usname" value="" datatype="empty" empty_msg="1" error_msg="2" />
max: <input type="text" name="usname" value="" datatype="max:{6-16}" empty_msg="1" error_msg="2" />
number max:<input type="text" name="usname" value="" datatype="number max:{6-16}" empty_msg="1" error_msg="2" />
cn max:<input type="text" name="usname" value="" datatype="cn max:{6-16}" empty_msg="1" error_msg="2" />
mobile max:<input type="text" name="usname" value="" datatype="mobile" empty_msg="1" error_msg="2" />
email max:<input type="text" name="usname" value="" datatype="email" empty_msg="1" error_msg="2" />
url max:<input type="text" name="usname" value="" datatype="url" empty_msg="1" error_msg="2" />
<button type="button" datatype="submit">send form</button>
</validform>
</div>
<script type="text/html" p-template="my-component">
<article>
<header>
<h1>{{title}}</h1>
<p>header desc...</p>
</header>
<my-component-1 title="click me!"></my-component-1>
</article>
</script>
<script type="text/html" p-template="html">
<article>
<header>
<h1>include html!</h1>
</header>
</article>
</script>
<script type="text/html" p-template="my-component-1">
<article>
<header>
<h1>header1 - <a p-custom:href="/bbb" p-handle:click.prevent="handleClickFnA">{{title}}</a></h1>
<p>header1 desc...</p>
</header>
</article>
</script>
<div p-template="test">
<videoplay src="{{videourl}}" controls="false"></videoplay>
<animate end="width:100px;height:50px" speed="1000" callback="handleAnimateEnd">
<div class="animate"></div>
</animate>
<button p-handle:click="buttonAnimateHandle">play</button>
<div class="ifgroup_demo">
{{a}}
<if-group>
<if express="{{a}} == 3">
<b>a</b>
</if>
<else-if express="{{a}} == 2">
<b>b</b>
</else-if>
<else>
<b>c</b>
</else>
</if-group>
<if express="{{a}} == 1">
<b>a</b>
</if>
<input type="text" value="{{a}}" p-handle:change="handleIfgroupChange" />
</div>
<h1 p-custom:title="('header_title_'+'{{title | lowercase}}').toUpperCase()" p-custom:data-custom="{{title | custom : 123}}">header_{{title | lowercase}}</h1>
<a p-router:href="/test" target="_blank" p-handle:click="handleClickFn" p-handle:watch="handleWatchFn : {{title}}">{{title | lowercase}}</a><br />
<input type="text" value="{{title | uppercase}}" p-handle:change="handleChangeFn" />
<input type="button" value="{{ resetButtonText | uppercase }}" p-handle:click.prevent="handleButtonAlert : hello world!" />
<span p-style:json="{display:'block',border:'1rem solid rgb(30,144,255)'}">
<b p-express:if="'{{title | lowercase}}' == 'test'" style="{{style | cssPrefix}}" p-style:text="display:inline-block;font-size:2rem;">1</b>
<b p-express:if="'{{title | lowercase}}' != 'test'" p-style:class="pstyle">2</b>
</span>
<p>
<span p-express:if="test">test demo1</span>
<span p-express:if="xxx">test demo2</span>
</p>
<button p-handle:tap="handleButtonTap">tap button</button>
<div title='{{open == false ? "-" : "+"}}' style="{{open == false ? 'display:block' : 'display:none'}}">{{open ? "-" : "+"}}</div>
<a p-router="/test" href="#" p-handle:click="handleNoTypeClick">no type</a>
<ul>
<li p-express:for="i in data" p-express:if="index % {{index}}">
<a p-custom:href="{{url}}" target="_blank" p-handle:click="handleForClick">{{newstitle}}</a>
</li>
</ul>
<my-component title="{{title}}"></my-component>
<!-- 模板的引用 -->
<div p-html="html"></div>
</div>
<div id="main" style="border:4px solid #000"></div>
<div id="mainA"></div>
<div id="mainB"></div>
<div id="mainC"></div>
<div id="mainD"></div>
<div id="mainE"></div>
<script type="text/html" p-template="forin">
<div>
<div p-express:for="item in data.list.items">
<span>{{title}}</span>
</div>
</div>
</script>
<div id="mainF"></div>
<script>
(function(win, $){
$.ready(function(){ //页面准备后的回调
$.extend($.__mod__.tmplThesaurus, { //对象的扩展
custom: function(val, filterCondition){
console.log(val, filterCondition)
return val;
}
});
//设置页面基础字体大小
$.setBaseFontSize(16);
//获取页面基础字体大小
var baseFontSize = window.baseFontSize || $.getBaseFontSize(),
//创建样式
styles = $.createStyle({
alink: {
fontWeight:400,
fontSize:(30/baseFontSize).toFixed(4)+"rem",
color:"rgb(255,255,255)",
width:(40/baseFontSize).toFixed(4)+"rem",
height:(40/baseFontSize).toFixed(4)+"rem",
textAlign:"center",
borderRadius:(30/baseFontSize).toFixed(4)+"rem",
display:"inline-block",
backgroundColor:"rgb(100,149,237)"
},
alinkbutton:{
fontWeight:400,
fontSize:(80/baseFontSize).toFixed(4)+"rem"
}
});
var mixins = {
watch:{
title: function(val){
return val.toUpperCase() + "_" + Math.random(10).toFixed(2)
}
}
}, mixinsA = {
watch:{
title: function(val){
return val.toUpperCase() + "_" + (new Date().getTime())
}
}
};
$.render("valid_form", {
handle:{
handleValidForm: function(e){
console.log("ajax")
},
handleValidFormError: function(e, errorElem, errorType){
console.log("error", errorElem, errorType)
}
}
});
$.render("forin", {
data:{
list:{
items:[{
title:"forin title"
},{
title:"forin title"
},{
title:"forin title"
},{
title:"forin title"
},{
title:"forin title"
}]
}
}
}, $.query("#mainF"));
//创建模板
$.createTemplate("html").createTemplate("my-component", {
title: "header"
}).createTemplate("my-component-1", {
title: "header1",
handle:{
handleClickFnA:function(e){
console.log(e)
}
}
}).router({ //路由设置
"/test":{
path: "/",
params: {
a:1
}
},
"/test":{
path:"/no type/",
params: {
b:2
}
}
}).render("test", { //渲染DOM
title: "test",
index:2,
style: styles.alink,
buttonText: "alert window",
open: false,
a: 1,
videourl:"video.mp4",
data:[{
newstitle: "1 news item title ...",
url: "/ccc"
},{
newstitle: "2 news item title ...",
url: "/ccc"
},{
newstitle: "3 news item title ...",
url: "/ccc"
},{
newstitle: "4 news item title ...",
url: "/ccc"
},{
newstitle: "5 news item title ...",
url: "/ccc"
}],
computed: {
resetButtonText:function(){
return this.buttonText.split('').reverse().join('');
}
},
handle: {
handleIfgroupChange: function(e){
this._set("test", {
a: this._val()
});
},
buttonAnimateHandle: function(e){
this._parents()[0]._query(".animate")[0]._trigger("animate");
},
handleAnimateEnd: function(e){
console.log("animate end")
},
handleButtonTap: function(e, type){
console.log(e, type)
},
handleNoTypeClick(e, msg){
alert(msg)
},
handleButtonAlert(e, msg){
this._set("test", {
buttonText: msg
});
alert(msg)
},
handleForClick(e){
e.preventDefault();
console.log("forClick")
},
handleWatchFn(e, msg){
console.log(e.type, msg)
},
handleClickFn(e) {
e.preventDefault();
console.log(e.type,1);
},
handleChangeFn(e){
console.log(e.type);
this._set("test", {
title: this.value
})
}
}
}, function(elem) {
console.log(elem);
}).clone("test", "test1").render("test1", function(next){
next($.extend({data: [{
newstitle: "1 news item title ...",
url: "/ccc"
},{
newstitle: "2 news item title ...",
url: "/ccc"
},{
newstitle: "3 news item title ...",
url: "/ccc"
},{
newstitle: "4 news item title ...",
url: "/ccc"
},{
newstitle: "5 news item title ...",
url: "/ccc"
}]},{ //clone克隆模板
title: "test1",
index: 3,
style: styles.alink,
handle: {
handleWatchFn(e){
console.log(e.type)
},
handleClickFn(e) {
e.preventDefault();
console.log(e.type,2);
},
handleChangeFn(e){
console.log(e.type);
this._set("test1", {
title: this.value
})
}
}
}));
}, $.query("#main"), function(elem) { //query选择器
console.log("->", elem)
}).clone("test1", "test2").render("test2", {
title: "test2",
index: 0,
style: styles.alink,
handle: {
handleWatchFn(e){
console.log(e.type)
},
handleClickFn(e) {
e.preventDefault();
console.log(e.type,3);
this.parentNode._append($.createDom("span", { //_append追加标签
title: "kkk",
css: {
display: "block"
}
}, $.createDom("a", { //创建标签
href: "/bbb",
text: "baba",
style: $.getStyle("alinkbutton") || styles.alinkbutton, //获取样式类值
handle: {
click: function(e){
e.preventDefault();
console.log(e)
}
}
}, $.createDom("i", {
class: "bi bf"
}))))
},
handleChangeFn(e){
console.log(e.type);
this._set("test2", { //设置模板的数据
title: this.value
})
}
}
}, $.query("#mainA"), function(elem) { //渲染后的回调
console.log(elem)
$.update("test1", {
title:"test_up",
open: false,
a: 2,
data: [{
newstitle: "6 news item title ...",
url: "/ccc"
}, {
newstitle: "7 news item title ...",
url: "/ccc"
}, {
newstitle: "8 news item title ...",
url: "/ccc"
}, {
newstitle: "9 news item title ...",
url: "/ccc"
}, {
newstitle: "10 news item title ...",
url: "/ccc"
}]
})
}).render(function(success, error){
var elem = $.createDom("script", {
"p-template": "test201706161637",
type: "text/html"
}, $.createDom("h1", {
html: "header_{{title | express : parseInt(this) % 3 + title}}"
}), $.createDom("input", {
value: "{{title}}",
"p-handle:change": "handleChangeFn"
}));
elem._prependTo($.mixElement(document.body));
success(elem);
}, {
title: "3",
handle:{
handleChangeFn(e){
this._set("test201706161637", { //设置模板的数据
title: this.value
})
}
}
}, $.query("#mainB"), function(elem){
console.log(elem)
}).render($.createDom("script", {
"p-template": "test201706161640",
type: "text/html"
}, $.createDom("h1", {
html: "header_{{title}}"
}), $.createDom("input", {
value: "{{title}}",
"p-handle:change": "handleChangeFn"
}))._prependTo($.mixElement(document.body)), {
title: "test4",
handle:{
handleChangeFn(e){
this._set("test201706161640", { //设置模板的数据
title: this.value
})
}
}
}, $.query("#mainC"), function(elem){
console.log(elem)
}).render(
'<div p-template="test201706200915"><article><header><h1>header_{{title}}</h1></header></article></div>',
{
title:"test5"
},
$.query("#mainD"),
function(elem){
console.log(elem)
}
).render({
render: function(createDom){
return createDom("script", {
"p-template": "test201707051053",
type:"text/html"
}, createDom("input",{
value: '{{title}}',
"p-handle:change": "handleinputChange"
}), createDom("h1", {
html: "{{title}}"
}));
}
}, {
title: "test6",
mixins: [mixins, mixinsA],
handle:{
handleinputChange: function(e){
this._set("test201707051053", {
title: this._val()
});
}
},
watch:{
title: function(val){
return val.toUpperCase();
}
},
created: function(elem){
console.log("created", elem);
}
},
$.query("#mainE"));
});
console.log($.__mod__.templates)
})(this, pTemplate);
</script>
</body>
</html>
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )