Skip to content

M
mui
Commit c8708deb authored by hbcui1984's avatar hbcui1984
Browse files
Options

add advertisement example to hello-mui

parent 0b0c3af3
Hide whitespace changes
Inline Side-by-side
Showing with 265 additions and 106 deletions
examples/hello-mui/examples/ad.html 0 → 100644
View file @ c8708deb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="../js/mui.min.js"></script>
<link href="../css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">advertisement（广告模板）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<p>本页为广告模板示例，集成了百度联盟的网站广告，目前支持广告固定在底部显示。</p>
</div>
</div>
</body>
<script type="text/javascript">
mui.plusReady(function () {
//屏幕真实宽度
var width = window.innerWidth;
var height = window.innerHeight;
//根据投放广告的比例，计算广告高度
var adHeight = parseInt(width)*3/20;
//广告投放域名地址
var ltu = encodeURIComponent('http://www.dcloud.io/ad/');
//投放广告的服务端页面标题
var title = encodeURIComponent('DCloud HBuilder-做最好的HTML5开发工具||MUI-最接近原生体验的高性能前端框架');
var url = 'http://pos.baidu.com/acom?adn=1&at=97&aurl=&cad=1&ccd=24&cec=UTF-8&cfv=18&ch=0&col=en-US&conOP=0&cpa=1&dai=1&dis=0&ltr=&lunum=6&n=99099160_cpr&pis=10000x10000&ps=0x0&qn=31f2f2a7de233256&rad=&rsi5=4&rss0=&rss1=&rss2=&rss3=&rss4=&rss5=&rss6=&rss7=&scale=20.3&skin=mobile_skin_white_blue&td_id=2206321&tn=template_inlay_all_mobile&tpr=1436841400149&ts=1&xuanting=0&tt=1436841400136.14.87.89&dtm=BAIDU_DUP2_SETJSONADSLOT&dc=2&wt=1&distp=1001';
url += '&conW='+width+'&conH='+adHeight+'&ltu='+ltu;
url += '&di=u2206321';//广告id
url += '&pcs='+width+'x'+height;
url += '&psr='+width+'x'+height;
url += '&pss='+width+'x0';
url += '&rsi0='+width+'&rsi1='+adHeight;
url += '&ti='+title;
var ad = plus.webview.create(url,'ad',{height:adHeight+'px',bottom:'0px'});
ad.addEventListener('loaded',function () {
ad.show('slide-in-bottom');
});
ad.appendJsFile('_www/js/ad.js');
//设置主页面的底部留白，否则会被遮住；
document.querySelector('.mui-content').style.paddingBottom = adHeight + 'px';
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/imageviewer-new.html deleted 100644 → 0
View file @ 0b0c3af3
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</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">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<style type="text/css">
.mui-fullscreen{
position: fixed;
z-index: 20;
background-color: #000;
}
p img{
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">image viewer（图片预览）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<p>这是图片放大预览示例，点击如下图片体验全屏预览功能</p>
<p><img src="../images/cbd.jpg" class="mui-action-preview"/></p>
<p>图片全屏后，左右滑动可查看本页其它图片，点击会关闭预览</p>
<p><img src="../images/muwu.jpg" alt="" class="mui-action-preview" /></p>
<p>第三张图片，纯粹为了占位： </p>
<p><img src="../images/shuijiao.jpg" alt="" class="mui-action-preview"/></p>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script>
mui.init();
mui.ready(function () {
var imgs = document.querySelectorAll("img.mui-action-preview");
imgs = mui.slice.call(imgs);
var slider = null;
if(imgs&&imgs.length>0){
slider = document.createElement("div");
slider.setAttribute("id","__mui-imageview__");
slider.classList.add("mui-slider");
slider.classList.add("mui-fullscreen");
slider.style.display = "none";
slider.addEventListener("tap",function () {
slider.style.display = "none";
});
slider.addEventListener("touchmove",function (event) {
event.preventDefault();
})
var slider_group = document.createElement("div");
slider_group.setAttribute("id","__mui-imageview__group");
slider_group.classList.add("mui-slider-group");
imgs.forEach(function (value,index,array) {
//给图片添加点击事件，触发预览显示；
value.addEventListener('tap',function () {
slider.style.display = "block";
_slider.refresh();
_slider.gotoItem(index,0);
})
var item = document.createElement("div");
item.classList.add("mui-slider-item");
var a = document.createElement("a");
// a.setAttribute("href","#");
var img = document.createElement("img");
img.setAttribute("src",value.src);
a.appendChild(img)
item.appendChild(a);
slider_group.appendChild(item);
});
slider.appendChild(slider_group);
document.body.appendChild(slider);
var _slider = mui(slider).slider();
}
var oldback = mui.back;
mui.back = function () {
if(slider&&slider.style.display=="block"){
slider.style.display = "none";
}else{
oldback();
}
}
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/imageviewer.html 0 → 100644
View file @ c8708deb
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</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">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<style type="text/css">
.mui-fullscreen {
position: fixed;
z-index: 20;
background-color: #000;
}
.mui-preview-header,
.mui-preview-footer {
position: absolute;
width: 100%;
left: 0;
z-index: 10;
}
.mui-preview-header {
height: 44px;
top: 0;
}
.mui-preview-footer {
height: 50px;
bottom: 0px;
}
.mui-preview-header .mui-preview-indicator {
display: block;
line-height: 25px;
color: #fff;
text-align: center;
margin: 15px auto 4;
width: 70px;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 12px;
font-size: 16px;
}
.mui-preview-image {
display: none;
}
.mui-preview-image.mui-preview-in {
display: block;
-webkit-animation: previewImageIn 400ms forwards;
animation: previewImageIn 400ms forwards;
}
.mui-preview-image.mui-preview-out {
-webkit-animation: previewImageOut 400ms forwards;
animation: previewImageOut 400ms forwards;
}
.mui-android-4-1 .mui-preview-image.mui-preview-in {
-webkit-animation: previewImageIn 0.001s forwards;
animation: previewImageIn 0.001s forwards;
}
.mui-android-4-1 .mui-preview-image.mui-preview-out {
-webkit-animation: previewImageOut 0.001s forwards;
animation: previewImageOut 0.001s forwards;
}
.mui-zoom-scroller {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
-webkit-backface-visibility: hidden;
}
.mui-zoom {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
p img {
max-width: 100%;
height: auto;
}
.mui-slider .mui-slider-group .mui-slider-item img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
width: 100%;
}
@-webkit-keyframes previewImageIn {
0% {
-webkit-transform: translate3d(0, 0, 0) scale(0.5);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
}
@keyframes previewImageIn {
0% {
transform: translate3d(0, 0, 0) scale(0.5);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
}
@-webkit-keyframes previewImageOut {
0% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
100% {
-webkit-transform: translate3d(0, 0, 0) scale(0.5);
opacity: 0;
}
}
@keyframes previewImageOut {
0% {
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
100% {
transform: translate3d(0, 0, 0) scale(0.5);
opacity: 0;
}
}
.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
display: inline-table;
}
.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">image viewer（图片预览）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<p>这是图片放大预览示例，点击如下图片体验全屏预览功能</p>
<p>
<img src="../images/yuantiao.jpg" data-preview-src="" data-preview-group="1" />
</p>
<p>图片全屏后，左右滑动可查看本页其它图片，点击会关闭预览</p>
<p>
<img src="../images/muwu.jpg" data-preview-src="" data-preview-group="1" />
</p>
<p>第三张图片，纯粹为了占位： </p>
<p>
<img src="../images/shuijiao.jpg" data-preview-src="" data-preview-group="1" />
</p>
<!--<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#">
<img class="mui-media-object" src="../images/shuijiao.jpg">
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#">
<img class="mui-media-object" src="../images/muwu.jpg">
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#">
<img class="mui-media-object" src="../images/cbd.jpg">
</a>
</li>
</ul>-->
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.zoom.js"></script>
<script src="../js/mui.previewimage.js"></script>
<script>
mui.previewImage();
</script>
</html>
\ No newline at end of file
examples/hello-mui/list.html
View file @ c8708deb
...@@ -348,13 +348,18 @@ ...@@ -348,13 +348,18 @@
</li> </li>
<li class="mui-table-view-divider">模板</li> <li class="mui-table-view-divider">模板</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/ad.html">
advertisement（广告模板）
</a>
</li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/im-chat.html"> <a class="mui-navigate-right" href="examples/im-chat.html">
chat（聊天窗口） chat（聊天窗口）
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/imageviewer-new.html"> <a class="mui-navigate-right" open-type="common" href="examples/imageviewer.html">
image viewer（图片预览） image viewer（图片预览）
</a> </a>
</li> </li>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment