<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<link rel="stylesheet" type="text/css" href="../css/header.css" />
<link rel="stylesheet" type="text/css" href="../css/footer.css" />
<style>
#wrap{
height:auto;
}
#main{
padding:0;
background-color: #fff;
margin-top:56px;
margin-bottom:52px;
}
img{
display:block;
}
.zhuti-menu{
background:url(../image/zhuti/top_banner.png) no-repeat 0 0;
background-size:100% 100%;
margin-bottom:3px;
}
.zhuti-menu-item{
width:25%;
float:left;
}
.zhuti-menu-item img{
width:60%;
margin:auto;
}
.zhuti-content-list li{
display:block;
}
.zhuti-item{
position:relative;
width:50%;
}
.zhuti-item-left{
float:left;
}
.zhuti-item-right{
float:right;
}
.zhuti-item img{
width:100%;
}
.zhuti-item span{
display:block;
}
.zhuti-item-juli{
position:absolute;
display:block;
width:60px;
height:28px;
background:rgba(69, 69, 69, 0.3) none repeat scroll 0 0 !important;
top:0;
right:0;
color:#fff;
text-align:center;
line-height:28px;
}
.zhuti-item-inner{
position:relative;
}
.zhuti-item-name{
position:absolute;
bottom:0;
color:#fff;
font-weight:bold;
width:100%;
text-align:center;
line-height:30px;
background:rgba(69, 69, 69, 0.3) none repeat scroll 0 0 !important;
}
.zhuti-item-left .zhuti-item-inner{
margin:4px 4px 4px 8px;
}
.zhuti-item-right .zhuti-item-inner{
margin:4px 8px 4px 4px;
}
#popmenu{
display: none;
width:120px;
top:50px;
right:6px;
position:fixed;
z-index:999;
background:rgba(255, 255, 255, 0) none repeat scroll 0 0 !important;
}
#popmenu img{
width:100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="header-top">
<a class="header-back" tapmode="" οnclick="api.closeWin()"></a>
<h1 class="header-title">艺术</h1>
<!-- <a class="header-search" tapmode="" οnclick="showPopMenu()"></a>-->
</div>
<div class="header-bottom">
<div id="header-fill-l"></div>
<div class="header-bottom-center"></div>
<div id="header-fill-r"></div>
</div>
</div>
<div id="main">
<ul id="acti-content">
</ul>
</div>
</div>
<div class="foot">
<span class="nav_home" οnclick="footNav('home')"></span>
<span class="nav_scan" οnclick="footNav('scan')"></span>
<span class="nav_user" οnclick="footNav('user')"></span>
<div style="clear:both"></div>
</div>
</body>
<script id="acti-template" type="text/x-dot-template">
{{ for(var i=0;i<it.data.length;i++){ }}
<!--<ul id="content-list" class="zhuti-content-list">-->
<!-- <li tapmode data-frameName="frm_activity" data-title="展览详情" οnclick="openArticleWin(this);">-->
<div class="zhuti-item zhuti-item-left" >
<div class="zhuti-item-inner">
<!--<img src="../image/zhuti/shanbo.png"/>-->
<img class="lazy" data-original="{{=it.data[i].thumb_url}}"/>
<!-- <span class="activity-time">{{=it.data[i].date}}</span>-->
<span class="zhuti-item-name">{{=it.data[i].name}}</span>
</div>
</div>
<!--<div style="clear:both;"></div>-->
<!--</li>
</ul>-->
{{ } }}
</script>
<!--下面是原本的第二块,写死的-->
<!--
<body>
<div id="wrap">
<div id="header">
<div class="header-top">
<a class="header-back" tapmode="" οnclick="api.closeWin()"></a>
<h1 class="header-title">艺术</h1>
<a class="header-search" tapmode="" οnclick="showPopMenu()"></a>
</div>
<div class="header-bottom">
<div id="header-fill-l"></div>
<div class="header-bottom-center"></div>
<div id="header-fill-r"></div>
</div>
</div>
<div id="main">
<ul id="content-list" class="zhuti-content-list">
<li>
<div class="zhuti-item zhuti-item-left" >
<div class="zhuti-item-inner">
<img src="../image/zhuti/shanbo.png"/>
<span class="zhuti-item-name">陕西历史博物馆</span>
</div>
</div>
<div class="zhuti-item zhuti-item-right" tapmode data-frameName="frm_museum_info" data-id="1" data-title="陕西历史博物馆" data-imageUrl="../image/zhuti/shanbo.png" data-winName="win_museum_index" οnclick="openMuseumById(this)">
<div class="zhuti-item-inner">
<img src="../image/zhuti/xabwy.jpg"/>
<span class="zhuti-item-name">西安博物院</span>
</div>
</div>
<div style="clear:both;"></div>
</li>
<li>
<div class="zhuti-item zhuti-item-left" οnclick="openMuseum()">
<div class="zhuti-item-inner">
<img src="../image/zhuti/blbwg.jpg"/>
<span class="zhuti-item-name">碑林博物馆</span>
</div>
</div>
<div class="zhuti-item zhuti-item-right" οnclick="openMuseum()">
<div class="zhuti-item-inner">
<img src="../image/zhuti/qlbwg.jpg"/>
<span class="zhuti-item-name">秦陵博物院</span>
</div>
</div>
<div style="clear:both;"></div>
</li>
<li>
<div class="zhuti-item zhuti-item-left" οnclick="openMuseum()">
<div class="zhuti-item-inner">
<img src="../image/zhuti/mlbwg.jpg"/>
<span class="zhuti-item-name">茂陵博物馆</span>
</div>
</div>
<div class="zhuti-item zhuti-item-right" οnclick="openMuseum()">
<div class="zhuti-item-inner">
<img src="../image/zhuti/bpbwg.jpg"/>
<span class="zhuti-item-name">半坡博物馆</span>
</div>
</div>
<div style="clear:both;"></div>
</li>
<li>
<div class="zhuti-item zhuti-item-left" tapmode data-frameName="frm_museum_info" data-id="1" data-title="陕西历史博物馆" data-imageUrl="../image/zhuti/shanbo.png" data-winName="win_museum_index" οnclick="openMuseumById(this)">
<div class="zhuti-item-inner">
<img src="../image/zhuti/shanbo.png"/>
<span class="zhuti-item-name">陕西历史博物馆</span>
</div>
</div>
<div class="zhuti-item zhuti-item-right" οnclick="openMuseum()">
<div class="zhuti-item-inner">
<img src="../image/zhuti/xabwy.jpg"/>
<span class="zhuti-item-name">西安博物院</span>
</div>
</div>
<div style="clear:both;"></div>
</li>
<li>
<div class="zhuti-item zhuti-item-left" οnclick="openMuseum()">
<div class="zhuti-item-inner">
<img src="../image/zhuti/blbwg.jpg"/>
<span class="zhuti-item-name">碑林博物馆</span>
</div>
</div>
<div class="zhuti-item zhuti-item-right" οnclick="openMuseum()">
<div class="zhuti-item-inner">
<img src="../image/zhuti/qlbwg.jpg"/>
<span class="zhuti-item-name">秦陵博物院</span>
</div>
</div>
<div style="clear:both;"></div>
</li>
<li>
<div class="zhuti-item zhuti-item-left" οnclick="openMuseum()">
<div class="zhuti-item-inner">
<img src="../image/zhuti/mlbwg.jpg"/>
<span class="zhuti-item-name">茂陵博物馆</span>
</div>
</div>
<div class="zhuti-item zhuti-item-right" οnclick="openMuseum()">
<div class="zhuti-item-inner">
<img src="../image/zhuti/bpbwg.jpg"/>
<span class="zhuti-item-name">半坡博物馆</span>
</div>
</div>
<div style="clear:both;"></div>
</li>
</ul>
</div>
<div id="popmenu" visible='0'>
<img src="../image/bodao/popmenu.png"/>
</div>
</div>
<div class="foot">
<span class="nav_home" οnclick="footNav('home')"></span>
<span class="nav_scan" οnclick="footNav('scan')"></span>
<span class="nav_user" οnclick="footNav('user')"></span>
<div style="clear:both"></div>
</div>
</body>
-->
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/swipe.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.2.js"></script>
<script type="text/javascript" src="../script/jquery.lazyload.js"></script>
<script type="text/javascript">
apiready = function(){
initHeader();
api.showProgress({
style: 'default',
animationType: 'fade',
title: '努力加载中...',
text: '先喝杯茶...',
modal: false
});
api.ajax({
url: HOST_URL + '/museum/museum_list.php?type=2', //艺术是2
method: 'get',
timeout: 30,
dataType: 'json',
returnAll:false,
},function(ret,err){
if(ret){
//alert("l啦啦");
var content = $api.byId('acti-content'); //获取幻灯片显示容器
var tpl = $api.byId('acti-template').text; //获取模板引擎的内容,以便上面进行模板的编译
var tplFn = doT.template(tpl); //根据模板的内容,进行编译,其实就是生成一个匿名函数
content.innerHTML = tplFn(ret); //根据实际数据,填充模板
$("img.lazy").lazyload({
placeholder:"../image/exhi_ph.jpg",
effect:"fadeIn"
});
api.hideProgress();
}else{
api.alert({
msg:('错误码:'+err.code+';错误信息:'+err.msg+'网络状态码:'+err.statusCode)
});
}
});
};
function showPopMenu(){ //popmenu是右上角那个下拉菜单
var popmenu = $api.dom('#popmenu');
$api.css(popmenu,'display:block');
$api.attr(popmenu,'visible','1');
}
function openMuseum(){
var popmenu = $api.dom('#popmenu');
var visible = $api.attr(popmenu,'visible');
if(visible=='1'){
$api.css(popmenu,'display:none');
$api.attr(popmenu,'visible','0');
}
else{
openWin('museum');
}
}
function openMuseumById(obj){
var popmenu = $api.dom('#popmenu');
var visible = $api.attr(popmenu,'visible');
if(visible=='1'){
$api.css(popmenu,'display:none');
$api.attr(popmenu,'visible','0');
}
else{
openWinWithObj('museum',obj);
}
}
</script>
</html>
这段代码的功能:点击”艺术“,然后显示图2中相关艺术博物馆,相关的博物馆在后端有分类。
红色的代码部分将js与html合起来。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<link rel="stylesheet" type="text/css" href="../css/header.css" />
<link rel="stylesheet" type="text/css" href="../css/footer.css" />
<style>
#wrap{
height:auto;
}
#main{
padding:0;
background-color: #fff;
margin-top:56px;
margin-bottom:52px;
}
img{
display:block;
}
.zhuti-menu{
background:url(../image/zhuti/top_banner.png) no-repeat 0 0;
background-size:100% 100%;
margin-bottom:3px;
}
.zhuti-menu-item{
width:25%;
float:left;
}
.zhuti-menu-item img{
width:60%;
margin:auto;
}
.zhuti-content-list li{
display:block;
}
.zhuti-item{
position:relative;
width:50%;
}
.zhuti-item-left{
float:left; float:left并不是就规定这个代码在左边显示,而是跟上一个元素左边对齐,然后默认往下显示
}
.zhuti-item-right{
float:right;
}
.zhuti-item img{
width:100%;
}
.zhuti-item span{
display:block;
}
.zhuti-item-juli{
position:absolute;
display:block;
width:60px;
height:28px;
background:rgba(69, 69, 69, 0.3) none repeat scroll 0 0 !important;
top:0;
right:0;
color:#fff;
text-align:center;
line-height:28px;
}
.zhuti-item-inner{
position:relative;
}
.zhuti-item-name{
position:absolute;
bottom:0;
color:#fff;
font-weight:bold;
width:100%;
text-align:center;
line-height:30px;
background:rgba(69, 69, 69, 0.3) none repeat scroll 0 0 !important;
}
.zhuti-item-left .zhuti-item-inner{
margin:4px 4px 4px 8px;
}
.zhuti-item-right .zhuti-item-inner{
margin:4px 8px 4px 4px;
}
#popmenu{
display: none;
width:120px;
top:50px;
right:6px;
position:fixed;
z-index:999;
background:rgba(255, 255, 255, 0) none repeat scroll 0 0 !important;
}
#popmenu img{
width:100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="header-top">
<a class="header-back" tapmode="" οnclick="api.closeWin()"></a>
<h1 class="header-title">艺术</h1>
<!-- <a class="header-search" tapmode="" οnclick="showPopMenu()"></a>-->
</div>
<div class="header-bottom">
<div id="header-fill-l"></div>
<div class="header-bottom-center"></div>
<div id="header-fill-r"></div>
</div>
</div>
<div id="main">
<ul id=" acti-content">
</ul>
</div>
</div>
<div class="foot">
<span class="nav_home" οnclick="footNav('home')"></span>
<span class="nav_scan" οnclick="footNav('scan')"></span>
<span class="nav_user" οnclick="footNav('user')"></span>
<div style="clear:both"></div>
</div>
</body>
<script id=" acti-template" type="text/x-dot-template"> <script>里面写js代码,代码部分要用{{及}}包起来。
{{ for(var i=0;i<it.data.length;i++){ }}
<!--<ul id="content-list" class="zhuti-content-list">-->
<!-- <li tapmode data-frameName="frm_activity" data-title="展览详情" οnclick="openArticleWin(this);">-->
<div class="zhuti-item zhuti-item-left" >
<div class="zhuti-item-inner">
<!--<img src="../image/zhuti/shanbo.png"/>-->
<img class="lazy" data-original="{{=it.data[i].thumb_url}}"/> 获取传过来的图片地址
<!-- <span class="activity-time">{{=it.data[i].date}}</span>-->
<span class="zhuti-item-name">{{=it.data[i].name}}</span> 获取传过来的名字
</div>
</div>
<!--<div style="clear:both;"></div>-->
<!--</li>
</ul>-->
{{ } }}
</script>
<!--下面是原本的第二块,写死的-->
<!--
<body>
<div id="wrap">
<div id="header">
<div class="header-top">
<a class="header-back" tapmode="" οnclick="api.closeWin()"></a>
<h1 class="header-title">艺术</h1>
<a class="header-search" tapmode="" οnclick="showPopMenu()"></a>
</div>
<div class="header-bottom">
<div id="header-fill-l"></div>
<div class="header-bottom-center"></div>
<div id="header-fill-r"></div>
</div>
</div>
<div id="main">
<ul id="content-list" class="zhuti-content-list">
<li>
<div class="zhuti-item zhuti-item-left" >
<div class="zhuti-item-inner">
<img src="../image/zhuti/shanbo.png"/>
<span class="zhuti-item-name">陕西历史博物馆</span>
</div>
</div>
<div class="zhuti-item zhuti-item-right" tapmode data-frameName="frm_museum_info" data-id="1" data-title="陕西历史博物馆" data-imageUrl="../image/zhuti/shanbo.png" data-winName="win_museum_index" οnclick="openMuseumById(this)">
<div class="zhuti-item-inner">
<img src="../image/zhuti/xabwy.jpg"/>
<span class="zhuti-item-name">西安博物院</span>
</div>
</div>
<div style="clear:both;"></div>
</li>
<li>
<div class="zhuti-item zhuti-item-left" οnclick="openMuseum()">
<div class="zhuti-item-inner">
<img src="../image/zhuti/blbwg.jpg"/>
<span class="zhuti-item-name">碑林博物馆</span>
</div>
</div>
<div class="zhuti-item zhuti-item-right" οnclick="openMuseum()">
<div class="zhuti-item-inner">
<img src="../image/zhuti/qlbwg.jpg"/>
<span class="zhuti-item-name">秦陵博物院</span>
</div>
</div>
<div style="clear:both;"></div>
</li>
<li>
<div class="zhuti-item zhuti-item-left" οnclick="openMuseum()">
<div class="zhuti-item-inner">
<img src="../image/zhuti/mlbwg.jpg"/>
<span class="zhuti-item-name">茂陵博物馆</span>
</div>
</div>
<div class="zhuti-item zhuti-item-right" οnclick="openMuseum()">
<div class="zhuti-item-inner">
<img src="../image/zhuti/bpbwg.jpg"/>
<span class="zhuti-item-name">半坡博物馆</span>
</div>
</div>
<div style="clear:both;"></div>
</li>
<li>
<div class="zhuti-item zhuti-item-left" tapmode data-frameName="frm_museum_info" data-id="1" data-title="陕西历史博物馆" data-imageUrl="../image/zhuti/shanbo.png" data-winName="win_museum_index" οnclick="openMuseumById(this)">
<div class="zhuti-item-inner">
<img src="../image/zhuti/shanbo.png"/>
<span class="zhuti-item-name">陕西历史博物馆</span>
</div>
</div>
<div class="zhuti-item zhuti-item-right" οnclick="openMuseum()">
<div class="zhuti-item-inner">
<img src="../image/zhuti/xabwy.jpg"/>
<span class="zhuti-item-name">西安博物院</span>
</div>
</div>
<div style="clear:both;"></div>
</li>
<li>
<div class="zhuti-item zhuti-item-left" οnclick="openMuseum()">
<div class="zhuti-item-inner">
<img src="../image/zhuti/blbwg.jpg"/>
<span class="zhuti-item-name">碑林博物馆</span>
</div>
</div>
<div class="zhuti-item zhuti-item-right" οnclick="openMuseum()">
<div class="zhuti-item-inner">
<img src="../image/zhuti/qlbwg.jpg"/>
<span class="zhuti-item-name">秦陵博物院</span>
</div>
</div>
<div style="clear:both;"></div>
</li>
<li>
<div class="zhuti-item zhuti-item-left" οnclick="openMuseum()">
<div class="zhuti-item-inner">
<img src="../image/zhuti/mlbwg.jpg"/>
<span class="zhuti-item-name">茂陵博物馆</span>
</div>
</div>
<div class="zhuti-item zhuti-item-right" οnclick="openMuseum()">
<div class="zhuti-item-inner">
<img src="../image/zhuti/bpbwg.jpg"/>
<span class="zhuti-item-name">半坡博物馆</span>
</div>
</div>
<div style="clear:both;"></div>
</li>
</ul>
</div>
<div id="popmenu" visible='0'>
<img src="../image/bodao/popmenu.png"/>
</div>
</div>
<div class="foot">
<span class="nav_home" οnclick="footNav('home')"></span>
<span class="nav_scan" οnclick="footNav('scan')"></span>
<span class="nav_user" οnclick="footNav('user')"></span>
<div style="clear:both"></div>
</div>
</body>
-->
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/swipe.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.2.js"></script>
<script type="text/javascript" src="../script/jquery.lazyload.js"></script>
<script type="text/javascript">
apiready = function(){
initHeader();
api.showProgress({
style: 'default',
animationType: 'fade',
title: '努力加载中...',
text: '先喝杯茶...',
modal: false
});
api.ajax({
url: HOST_URL + '/museum/museum_list.php?type=2', //艺术是2
method: 'get',
timeout: 30,
dataType: 'json',
returnAll:false,
},function(ret,err){
if(ret){
//alert("l啦啦");
var content = $api.byId('acti-content'); //获取幻灯片显示容器
var tpl = $api.byId('acti-template').text; //获取模板引擎的内容,以便上面进行模板的编译
var tplFn = doT.template(tpl); //根据模板的内容,进行编译,其实就是生成一个匿名函数
content.innerHTML = tplFn(ret); //根据实际数据,填充模板
$("img.lazy").lazyload({
placeholder:"../image/exhi_ph.jpg",
effect:"fadeIn"
});
api.hideProgress();
}else{
api.alert({
msg:('错误码:'+err.code+';错误信息:'+err.msg+'网络状态码:'+err.statusCode)
});
}
});
};
function showPopMenu(){ //popmenu是右上角那个下拉菜单
var popmenu = $api.dom('#popmenu');
$api.css(popmenu,'display:block');
$api.attr(popmenu,'visible','1');
}
function openMuseum(){
var popmenu = $api.dom('#popmenu');
var visible = $api.attr(popmenu,'visible');
if(visible=='1'){
$api.css(popmenu,'display:none');
$api.attr(popmenu,'visible','0');
}
else{
openWin('museum');
}
}
function openMuseumById(obj){
var popmenu = $api.dom('#popmenu');
var visible = $api.attr(popmenu,'visible');
if(visible=='1'){
$api.css(popmenu,'display:none');
$api.attr(popmenu,'visible','0');
}
else{
openWinWithObj('museum',obj);
}
}
</script>
</html>