682 lines
21 KiB
Plaintext
682 lines
21 KiB
Plaintext
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>秒绘设计模板库</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||
|
||
<link rel="stylesheet" href="/zinc/mobileWorks/css/mui.min.css">
|
||
<link href="/zinc/mobileWorks/css/mui.poppicker.css" rel="stylesheet" />
|
||
<link href="/zinc/mobileWorks/css/mui.picker.css" rel="stylesheet" />
|
||
<script src="/zinc/mobileWorks/js/mui.min.js"></script>
|
||
<script src="/zinc/mobileWorks/js/mui.poppicker.js"></script>
|
||
<script src="/zinc/mobileWorks/js/mui.picker.js"></script>
|
||
<script src="/zinc/mobileWorks/js/mui.pullToRefresh.js"></script>
|
||
<script src="/zinc/mobileWorks/js/mui.pullToRefresh.material.js"></script>
|
||
<script src="/zinc/mobileWorks/js/mui.view.js"></script>
|
||
<style>
|
||
* { touch-action: none; }
|
||
html,
|
||
body {
|
||
background-color: #efeff4;
|
||
}
|
||
.mui-bar~.mui-content .mui-fullscreen {
|
||
top: 44px;
|
||
height: auto;
|
||
}
|
||
.mui-pull-top-tips {
|
||
position: absolute;
|
||
top: -20px;
|
||
left: 50%;
|
||
margin-left: -25px;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 100%;
|
||
z-index: 1;
|
||
}
|
||
.mui-bar~.mui-pull-top-tips {
|
||
top: 24px;
|
||
}
|
||
.mui-pull-top-wrapper {
|
||
width: 42px;
|
||
height: 42px;
|
||
display: block;
|
||
text-align: center;
|
||
background-color: #efeff4;
|
||
border: 1px solid #ddd;
|
||
border-radius: 25px;
|
||
background-clip: padding-box;
|
||
box-shadow: 0 4px 10px #bbb;
|
||
overflow: hidden;
|
||
}
|
||
.mui-pull-top-tips.mui-transitioning {
|
||
-webkit-transition-duration: 200ms;
|
||
transition-duration: 200ms;
|
||
}
|
||
.mui-pull-top-tips .mui-pull-loading {
|
||
/*-webkit-backface-visibility: hidden;
|
||
-webkit-transition-duration: 400ms;
|
||
transition-duration: 400ms;*/
|
||
|
||
margin: 0;
|
||
}
|
||
.mui-pull-top-wrapper .mui-icon,
|
||
.mui-pull-top-wrapper .mui-spinner {
|
||
margin-top: 7px;
|
||
}
|
||
.mui-pull-top-wrapper .mui-icon.mui-reverse {
|
||
/*-webkit-transform: rotate(180deg) translateZ(0);*/
|
||
}
|
||
.mui-pull-bottom-tips {
|
||
text-align: center;
|
||
background-color: #efeff4;
|
||
font-size: 15px;
|
||
line-height: 70px;
|
||
color: #777;
|
||
}
|
||
.mui-pull-top-canvas {
|
||
overflow: hidden;
|
||
background-color: #fafafa;
|
||
border-radius: 40px;
|
||
box-shadow: 0 4px 10px #bbb;
|
||
width: 40px;
|
||
height: 40px;
|
||
margin: 0 auto;
|
||
}
|
||
.mui-pull-top-canvas canvas {
|
||
width: 40px;
|
||
}
|
||
.mui-slider-indicator.mui-segmented-control {
|
||
background-color: #efeff4;
|
||
}
|
||
.mui-content>.mui-table-view:first-child {
|
||
margin-top: -1px;
|
||
}
|
||
|
||
.heard input {
|
||
background-color: white;
|
||
}
|
||
|
||
.mui-search {
|
||
left: 100px;
|
||
right: 80px;
|
||
width: auto;
|
||
display: inline-block;
|
||
position: absolute;
|
||
}
|
||
|
||
.mui-card {
|
||
width: 46%;
|
||
display: inline-block;
|
||
margin: 5px 2% 0 2%;
|
||
}
|
||
|
||
.mui-card-footer {
|
||
display: block;
|
||
}
|
||
|
||
#slider {
|
||
margin-top: 50px;
|
||
}
|
||
|
||
.mui-fullscreen {
|
||
position: fixed;
|
||
z-index: 20;
|
||
}
|
||
.mui-ios .mui-navbar .mui-bar .mui-title {
|
||
position: static;
|
||
}
|
||
html,
|
||
body {
|
||
background-color: #efeff4;
|
||
}
|
||
.mui-views,
|
||
.mui-view,
|
||
.mui-pages,
|
||
.mui-page,
|
||
.mui-page-content {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #efeff4;
|
||
}
|
||
.mui-scroll-wrapper,
|
||
.mui-scroll {
|
||
background-color: #efeff4;
|
||
}
|
||
.mui-page.mui-transitioning {
|
||
-webkit-transition: -webkit-transform 300ms ease;
|
||
transition: transform 300ms ease;
|
||
}
|
||
.mui-page-left {
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
.mui-ios .mui-page-left {
|
||
-webkit-transform: translate3d(-20%, 0, 0);
|
||
transform: translate3d(-20%, 0, 0);
|
||
}
|
||
.mui-navbar {
|
||
position: fixed;
|
||
right: 0;
|
||
left: 0;
|
||
z-index: 10;
|
||
height: 44px;
|
||
background-color: #f7f7f8;
|
||
}
|
||
.mui-navbar .mui-bar {
|
||
position: absolute;
|
||
text-align: center;
|
||
}
|
||
.mui-android .mui-navbar-inner.mui-navbar-left {
|
||
opacity: 0;
|
||
}
|
||
.mui-ios .mui-navbar-left .mui-left,
|
||
.mui-ios .mui-navbar-left .mui-center,
|
||
.mui-ios .mui-navbar-left .mui-right {
|
||
opacity: 0;
|
||
}
|
||
.mui-navbar .mui-btn-nav {
|
||
-webkit-transition: none;
|
||
transition: none;
|
||
-webkit-transition-duration: .0s;
|
||
transition-duration: .0s;
|
||
}
|
||
.mui-navbar .mui-bar .mui-title {
|
||
display: inline-block;
|
||
width: auto;
|
||
}
|
||
.mui-page-shadow {
|
||
position: absolute;
|
||
right: 100%;
|
||
top: 0;
|
||
width: 16px;
|
||
height: 100%;
|
||
z-index: -1;
|
||
content: '';
|
||
}
|
||
.mui-page-shadow {
|
||
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
|
||
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
|
||
}
|
||
.mui-navbar-inner.mui-transitioning,
|
||
.mui-navbar-inner .mui-transitioning {
|
||
-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
|
||
transition: opacity 300ms ease, transform 300ms ease;
|
||
}
|
||
.mui-page {
|
||
display: none;
|
||
}
|
||
.mui-pages .mui-page {
|
||
display: block;
|
||
}
|
||
.mui-page .mui-table-view:first-child {
|
||
margin-top: 15px;
|
||
}
|
||
.mui-page .mui-table-view:last-child {
|
||
margin-bottom: 30px;
|
||
}
|
||
.mui-table-view {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.mui-table-view span.mui-pull-right {
|
||
color: #999;
|
||
}
|
||
.mui-table-view-divider {
|
||
background-color: #efeff4;
|
||
font-size: 14px;
|
||
}
|
||
.mui-table-view-divider:before,
|
||
.mui-table-view-divider:after {
|
||
height: 0;
|
||
}
|
||
#imageShow {
|
||
padding: 10px 10px 0 10px;
|
||
margin-top: 50px;
|
||
}
|
||
#imageShow img {
|
||
padding: 10px;
|
||
}
|
||
.mui-slider-indicator {
|
||
margin-bottom: 20px;
|
||
}
|
||
.mui-content-padded {
|
||
margin: 0 20px;
|
||
}
|
||
.mui-content-padded button {
|
||
height: 25px;
|
||
line-height: 0px;
|
||
font-size: 15px;
|
||
}
|
||
|
||
#one img {
|
||
width: 100%;
|
||
}
|
||
|
||
.mui-bar-tab {
|
||
top: 90px;
|
||
height: 30px;
|
||
}
|
||
|
||
.mui-top{
|
||
top: 120px;
|
||
}
|
||
|
||
.mui-bar-tab a {
|
||
height: 30px !important;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
|
||
<body class="mui-fullscreen">
|
||
<!--页面主结构开始-->
|
||
<div id="app" class="mui-views">
|
||
<div class="mui-view">
|
||
<div class="mui-navbar">
|
||
</div>
|
||
<div class="mui-pages">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<input id="copyMediaId" readonly>
|
||
<!--页面主结构结束-->
|
||
<!--单页面开始-->
|
||
<div id="page" class="mui-page">
|
||
<!--页面标题栏开始-->
|
||
<div class="mui-navbar-inner mui-bar mui-bar-nav">
|
||
<header class="mui-bar mui-bar-nav heard">
|
||
<button id="industryType" type="button" class="mui-btn mui-btn-blue mui-btn-link mui-pull-left">选择行业<img src="/zinc/images/dropDown.png" style="width: 16px;height: 16px;margin-bottom: -2px;"></button>
|
||
<div class="mui-input-row mui-search" style="">
|
||
<input id="searchInput" type="search" class="mui-input-clear" placeholder="">
|
||
</div>
|
||
<button id="seachButton" style="margin-top: -2px;" type="submit" class="mui-btn mui-btn-primary mui-pull-right" onclick="return false;">搜索</button>
|
||
</header>
|
||
</div>
|
||
<!--下拉刷新容器-->
|
||
<div class="mui-content">
|
||
<div id="slider" class="mui-slider mui-fullscreen">
|
||
<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
|
||
<div id="typeScroll" class="mui-scroll">
|
||
<#for item : DesignTypeDao.list()>
|
||
<#if item.getTypeName() == "画册" || item.getTypeName() == "名片" || item.getTypeName() == "彩页" || item.getTypeName() == "优惠券" || item.getTypeName() == "透明PVC名片" || item.getTypeName() == "电子传单">
|
||
<a class="mui-control-item <#if item_index == 0>mui-active</#if>" value="${item.getTypeId()}" href="#item1mobile">
|
||
${item.getTypeName()}
|
||
</a>
|
||
</#if>
|
||
</#for>
|
||
</div>
|
||
</div>
|
||
<div class="mui-slider-group">
|
||
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
|
||
<div class="mui-scroll-wrapper">
|
||
<div class="mui-scroll" id="showScroll" style="margin-top: 35px;">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<nav class="mui-bar mui-bar-tab" style="background-color: #efeff4;z-index:9999;font-size: 15px;">
|
||
<a class="mui-tab-item mui-active" href="#Popover_1" value="3">最热</a>
|
||
<a class="mui-tab-item" href="#Popover_2" value="1">最新</a>
|
||
</nav>
|
||
<div id="#oddEven">
|
||
<nav id="mTemplateHomeNav" class="mui-bar mui-bar-tab mui-top" style="background-color: #efeff4;z-index:9999;font-size: 15px;display: none">
|
||
<a class="mui-tab-item mui-active" href="#oddEven_-1" value="-1">全部</a>
|
||
<a class="mui-tab-item" href="#oddEven_0" value="0">横版</a>
|
||
<a class="mui-tab-item" href="#oddEven_1" value="1">竖版</a>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
<!--单页面结束-->
|
||
<div id="mediaInfo" class="mui-page">
|
||
<div class="mui-navbar-inner mui-bar mui-bar-nav">
|
||
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
|
||
<span class="mui-icon mui-icon-left-nav"></span>返回
|
||
</button>
|
||
<h1 class="mui-center mui-title">模板详情</h1>
|
||
</div>
|
||
<div class="mui-page-content">
|
||
<div class="mui-scroll-wrapper">
|
||
<div class="mui-scroll">
|
||
<div id="imageShow" class="mui-slider" >
|
||
<div class="mui-slider-group mui-slider-loop">
|
||
</div>
|
||
<div class="mui-slider-indicator">
|
||
</div>
|
||
<div id="one" style="display:none;">
|
||
</div>
|
||
</div>
|
||
<div id="mediaResult" class="mui-content-padded" style="display: none;font-size:13px;line-height: 26px;">
|
||
<div id="mediaName" style="float:left"></div></br>
|
||
<div id="mediaPageValue" style="float:left"></div></br>
|
||
<div id="mediaOddEven" style="float:left"></div></br>
|
||
</div>
|
||
<div class="mui-content-padded" style="font-size:13px;line-height: 26px;">
|
||
<div id="mediaIdArea" style="float:left"></div>
|
||
<div style="float:right;color:#7f7f7f;">复制后发送设计师</div>
|
||
</div>
|
||
<div class="mui-content-padded">
|
||
<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="color: #FFF;background-color: #28a3ef;">复制模板ID</button>
|
||
<button type="button" class="mui-btn mui-btn-block mui-btn-outlined mui-action-back">返回上一页</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
<script>
|
||
mui.init({
|
||
swipeBack:false
|
||
});
|
||
//初始化单页view
|
||
var viewApi = mui('#app').view({
|
||
defaultPage: '#page'
|
||
});
|
||
var view = viewApi.view;
|
||
var page = 1;
|
||
var hasNext = true;
|
||
var industryId = -1;
|
||
var self;
|
||
var typeId = 1;
|
||
var sort = 3;
|
||
var oddEven = -1;
|
||
//阻尼系数
|
||
var deceleration = mui.os.ios?0.003:0.0009;
|
||
(function($,doc) {
|
||
//处理view的后退与webview后退
|
||
var oldBack = $.back;
|
||
$.back = function() {
|
||
if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
|
||
viewApi.back();
|
||
} else { //执行webview后退
|
||
oldBack();
|
||
}
|
||
};
|
||
//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
|
||
//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
|
||
/*view.addEventListener('pageBeforeShow', function(e) {
|
||
});
|
||
view.addEventListener('pageShow', function(e) {
|
||
});
|
||
view.addEventListener('pageBeforeBack', function(e) {
|
||
});
|
||
view.addEventListener('pageBack', function(e) {
|
||
});*/
|
||
|
||
|
||
$('.mui-scroll-wrapper').scroll({
|
||
bounce: false,
|
||
indicators: true, //是否显示滚动条
|
||
deceleration:deceleration
|
||
});
|
||
$.ready(function() {
|
||
// 选择框
|
||
var userPicker = new $.PopPicker();
|
||
userPicker.setData([
|
||
{
|
||
value: '-1',
|
||
text: '全部行业'
|
||
},
|
||
<#for item : indList>
|
||
{
|
||
value: '${item.getIndustryId()}',
|
||
text: '${item.getIndustryName()}'
|
||
},
|
||
</#for>
|
||
]);
|
||
mui("#typeScroll").on('tap','a',function(){
|
||
typeId = this.getAttribute('value');
|
||
if(typeId == 3){
|
||
var nav = document.getElementById("mTemplateHomeNav");
|
||
nav.style.display = "table-row";
|
||
}
|
||
reload();
|
||
});
|
||
mui(".mui-top").on('tap','a',function(){
|
||
oddEven = this.getAttribute('value');
|
||
reload();
|
||
});
|
||
mui(".heard").on('tap','#seachButton',function(){
|
||
reload();
|
||
});
|
||
mui(".mui-bar-tab").on('tap','a',function(){
|
||
sort = this.getAttribute('value');
|
||
reload();
|
||
});
|
||
mui(".mui-content-padded").on('tap','.mui-btn.mui-btn-primary.mui-btn-block.mui-btn-outlined',function(){
|
||
var copyMediaId=document.getElementById("copyMediaId");
|
||
copyMediaId.select();
|
||
document.execCommand("Copy");
|
||
mui.toast('复制成功');
|
||
});
|
||
var industryTypeButton = doc.getElementById('industryType');
|
||
industryTypeButton.addEventListener('tap', function(event) {
|
||
userPicker.show(function(items) {
|
||
industryId = items[0].value;
|
||
reload();
|
||
//返回 false 可以阻止选择框的关闭
|
||
//return false;
|
||
});
|
||
}, false);
|
||
|
||
var reload = function () {
|
||
document.activeElement.blur();
|
||
$.each(document.querySelectorAll('.mui-card'),function(){
|
||
this.remove();
|
||
});
|
||
page = 1;
|
||
hasNext = true;
|
||
self.refresh(true);
|
||
queryAllTemplate();
|
||
scrollToTop();
|
||
}
|
||
|
||
var scrollToTop = function () {
|
||
//mui('#showScroll').setTranslate(0,0,500);
|
||
}
|
||
|
||
var queryAllTemplate = function(){
|
||
mui.ajax('/service/ajax?path=/mobileTemplateHome.htm&time=' + new Date().getTime(),{
|
||
data:{
|
||
page: page,
|
||
industryId: industryId,
|
||
keyword: document.getElementById('searchInput').value,
|
||
typeId: typeId,
|
||
sort: sort,
|
||
oddEven: oddEven,
|
||
},
|
||
dataType:'json',
|
||
type:'post',
|
||
timeout:10000,
|
||
async:false,
|
||
headers:{
|
||
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
|
||
'X-Requested-With': 'XMLHttpRequest',
|
||
'X-RMI-Class': 'MobileTemplatePresenter',
|
||
'X-RMI-Method': 'doTemplateSearch',
|
||
},
|
||
success:function(data){
|
||
hasNext = data.hasNext;
|
||
page++;
|
||
var list = data.pageResultList;
|
||
if(list && list.length > 0){
|
||
var showScroll = document.getElementById('showScroll');
|
||
var fragment = document.createDocumentFragment()
|
||
for(var i=0;i<list.length;i++){
|
||
var card = document.createElement('div');
|
||
card.className = "mui-card";
|
||
|
||
var htmls = `
|
||
<div class="mui-card-content">
|
||
<a value="`+ list[i].mediaId +`">
|
||
`;
|
||
|
||
if (list[i].mediaUrl){
|
||
var imgPathArr = list[i].mediaUrl.split(",");
|
||
for (var j = 0; j < imgPathArr.length; j++) {
|
||
if (j == 0){
|
||
htmls += `<img src="` + imgPathArr[j] + `" onerror="javascript:this.src='/zinc/images/nopic.png';">`;
|
||
}
|
||
}
|
||
} else{
|
||
htmls += `<img src="/zinc/images/nopic.png">`;
|
||
}
|
||
|
||
htmls += `</a><div class="mui-card-footer">`;
|
||
htmls += `ID:` + list[i].mediaId;
|
||
htmls += `<br><div style="display:inline-block;color:red;"><img src="/zinc/images/fire.png" style="width: 16px;height: 16px;margin-bottom: -2px;">热度:` + list[i].score +`</div>`;
|
||
htmls += `<div class="copyId" value="`+ list[i].mediaId +`" style="display: inline;float: right;"><img src="/zinc/images/copy.png" style="width: 16px;height: 16px;margin-bottom: -3px;">复制ID</div>`;
|
||
htmls += `</div>`;
|
||
|
||
card.innerHTML = htmls;
|
||
fragment.appendChild(card);
|
||
}
|
||
showScroll.insertBefore(fragment,document.querySelector('.mui-pull-bottom-tips'));
|
||
}
|
||
self.endPullUpToRefresh(!hasNext);
|
||
// 添加点击查看详情事件
|
||
mui(".mui-card-content").on('tap','a',function(){
|
||
var mediaId = this.getAttribute('value');
|
||
queryMediaInfo(mediaId);
|
||
});
|
||
// 添加点击复制ID事件
|
||
mui(".mui-card-content").on('tap','.copyId',function(){
|
||
var id = this.getAttribute("value");
|
||
var inputEle = document.createElement("input");
|
||
document.designMode = "on";
|
||
inputEle.value = id;
|
||
document.body.appendChild(inputEle);
|
||
inputEle.select();
|
||
document.execCommand('copy');
|
||
inputEle.blur();
|
||
inputEle.style.display = 'none';
|
||
document.body.removeChild(inputEle);
|
||
document.designMode = "off";
|
||
mui.toast('复制成功',{ duration:500, type:'div' })
|
||
});
|
||
},
|
||
error:function(xhr,type,errorThrown){
|
||
self.endPullUpToRefresh(true);
|
||
}
|
||
});
|
||
}
|
||
|
||
var queryMediaInfo = function(mediaId){
|
||
mui.ajax('/mobileTemplateDetail.htm',{
|
||
data:{
|
||
mediaId: mediaId,
|
||
},
|
||
dataType:'json',
|
||
type:'post',
|
||
timeout:10000,
|
||
async:false,
|
||
success:function(data){
|
||
if(data){
|
||
document.getElementById('copyMediaId').value = data.mediaId;
|
||
document.getElementById('mediaIdArea').innerHTML = 'ID：'+ data.mediaId;
|
||
if(data.typeId == 3){
|
||
document.getElementById('mediaResult').style.display = "block";
|
||
document.getElementById('mediaName').innerHTML = "名称："+data.mediaName;
|
||
document.getElementById('mediaPageValue').innerHTML = "P 数："+data.pageValue+"P";
|
||
if(data.oddEven == 0){
|
||
document.getElementById('mediaOddEven').innerHTML = "版式："+"横版" + data.widthMm + "*" + data.heightMm +"mm";
|
||
}else if(data.oddEven == 1){
|
||
document.getElementById('mediaOddEven').innerHTML = "版式："+ "横版" + data.widthMm + "*" + data.heightMm +"mm";
|
||
}
|
||
}
|
||
var parentDiv = document.querySelector("#imageShow .mui-slider-group");
|
||
var one = document.querySelector("#one");
|
||
var indicatorDiv = document.querySelector("#imageShow .mui-slider-indicator");
|
||
indicatorDiv.innerHTML = "";
|
||
one.style.display = 'none';
|
||
if(data.mediaUrl){
|
||
var array = data.mediaUrl.split(',');
|
||
if(array.length == 1){
|
||
one.style.display = 'block';
|
||
one.innerHTML = "";
|
||
one.appendChild(creatImgShowDiv(array[0]));
|
||
parentDiv.innerHTML = "";
|
||
mui('.mui-slider').slider().stopped = true;
|
||
} else {
|
||
var firstImg = array[0];
|
||
var lastImg = array[array.length-1];
|
||
var length = array.length;
|
||
if (!lastImg){
|
||
lastImg = array[array.length-2];
|
||
length = array.length - 1;
|
||
}
|
||
parentDiv.innerHTML = "";
|
||
parentDiv.appendChild(creatImgShowDiv(firstImg),"mui-slider-item-duplicate");
|
||
parentDiv.appendChild(creatImgShowDiv(lastImg),"mui-slider-item-duplicate");
|
||
for(var i =0 ;i<length;i++){
|
||
parentDiv.insertBefore(creatImgShowDiv(array[i]),parentDiv.children[0]);
|
||
var indicator;
|
||
if(i==0){
|
||
indicator = creatIndicator("mui-active");
|
||
} else {
|
||
indicator = creatIndicator();
|
||
}
|
||
indicatorDiv.appendChild(indicator);
|
||
}
|
||
mui('.mui-slider').slider().stopped = false;
|
||
}
|
||
}
|
||
document.activeElement.blur();
|
||
viewApi.go("#mediaInfo");
|
||
} else {
|
||
mui.toast('未查询到模板数据');
|
||
}
|
||
},
|
||
error:function(xhr,type,errorThrown){
|
||
mui.toast('未查询到模板数据');
|
||
}
|
||
});
|
||
}
|
||
|
||
function creatImgShowDiv(mediaUrl,className){
|
||
var showImgDiv = document.createElement('div');
|
||
showImgDiv.className = className ? "mui-slider-item "+className:"mui-slider-item";
|
||
showImgDiv.innerHTML = `<a href="#">`;
|
||
showImgDiv.innerHTML += `<img src="`+ mediaUrl +`" onerror="javascript:this.src='/zinc/images/nopic.png';">`;
|
||
showImgDiv.innerHTML += `</a>`;
|
||
return showImgDiv;
|
||
}
|
||
|
||
function creatIndicator(className){
|
||
var indicatorDiv = document.createElement('div');
|
||
indicatorDiv.className = className ? "mui-indicator "+className:"mui-indicator";
|
||
return indicatorDiv;
|
||
}
|
||
|
||
//循环初始化所有下拉刷新，上拉加载。
|
||
$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
|
||
$(pullRefreshEl).pullToRefresh({
|
||
up: {
|
||
auto:true,
|
||
contentrefresh : "正在加载...",
|
||
contentnomore:'没有更多模板了',
|
||
callback: function() {
|
||
self = this;
|
||
queryAllTemplate(self);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
});
|
||
})(mui, document);
|
||
|
||
</script>
|
||
|
||
</html> |