682 行
21 KiB
Plaintext
682 行
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> |