first commit
This commit is contained in:
@@ -0,0 +1,671 @@
|
||||
<!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.listTemmplate()>
|
||||
<a class="mui-control-item <#if item_index == 0>mui-active</#if>" value="${item.getTypeId()}" href="#item1mobile">
|
||||
${item.getTypeName()}
|
||||
</a>
|
||||
</#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>
|
||||
<a class="mui-tab-item" href="#Popover_4" value="4">精品</a>
|
||||
</nav>
|
||||
<div id="#oddEven" style="display:none">
|
||||
<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事件为动画开始前触发)
|
||||
|
||||
$('.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 + `<br>`;
|
||||
htmls += list[i].widthMm + `X` + list[i].heightMm+ `mm`;
|
||||
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(lastImg),"mui-slider-item-duplicate");
|
||||
parentDiv.appendChild(creatImgShowDiv(firstImg),"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>
|
||||
Reference in New Issue
Block a user