Skip to content

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

升级Hello mui

parent cdf6402f
Expand all Show whitespace changes
Inline Side-by-side
Showing with 375 additions and 595 deletions
examples/hello-mui/css/mui.min.css
View file @ cf990ab0
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/examples/badges.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/buttons-with-badges.html
View file @ cf990ab0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +20,7 @@
mui.init();
</script>
</head>
<body>
<style>
......@@ -29,7 +31,7 @@
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">带数字的按钮</h1>
</header>
<div class="mui-content">
......
examples/hello-mui/examples/buttons-with-block.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......@@ -25,7 +24,7 @@
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">块级按钮</h1>
</header>
<div class="mui-content">
......
examples/hello-mui/examples/buttons-with-fabs.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/buttons-with-icons.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......@@ -31,7 +30,7 @@
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">带图标按钮</h1>
</header>
<div class="mui-content">
......@@ -48,12 +47,8 @@
<span class="mui-icon mui-icon-trash"></span>
删除
</button>
<button class="mui-btn mui-btn-outlined">
<span class="mui-icon mui-icon-calendar"></span>
日程
</button>
<button class="mui-btn mui-btn-link">
<span class="mui-icon mui-icon-left-nav"></span>
<span class="mui-icon mui-icon-back"></span>
返回
</button>
<h5>图标居右：</h5>
......@@ -68,14 +63,9 @@
删除
<span class="mui-icon mui-icon-trash"></span>
</button>
<button class="mui-btn mui-btn-outlined">
日程
<span class="mui-icon mui-icon-calendar"></span>
</button>
<button class="mui-btn mui-btn-link">
下一步
<span class="mui-icon mui-icon-right"></span>
<span class="mui-icon mui-icon-forward"></span>
</button>
</div>
</div>
......
examples/hello-mui/examples/buttons.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/cards.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/checkbox.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/dialog.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/forms-with-group-and-labels.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/forms-with-group.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/forms.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/grid-default.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......@@ -42,20 +41,14 @@
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-sms"><span class="mui-badge">5</span></span>
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<div class="mui-media-body">Email</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-calendar"></span>
<div class="mui-media-body">Calendar</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-chat"></span>
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-category"></span>
<div class="mui-media-body">Sort</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-map"></span>
<div class="mui-media-body">Map</div></a></li>
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">location</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div></a></li>
......@@ -63,8 +56,14 @@
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-cog"></span>
<span class="mui-icon mui-icon-gear"></span>
<div class="mui-media-body">Setting</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-info"></span>
<div class="mui-media-body">about</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-more"></span>
<div class="mui-media-body">more</div></a></li>
</ul>
</div>
......
examples/hello-mui/examples/icons.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......@@ -45,9 +44,16 @@
.mui-spinner {
margin-top: 12px
}
.mui-spinner-indicator {
.active .mui-spinner-indicator {
background: #007AFF;
}
.mui-content a{
color: #8F8F94;
}
.mui-content a.active{
color: #007aff;
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
......@@ -55,6 +61,43 @@
</header>
<div class="mui-content">
<div class="mui-content-padded">
<p>点击图标查看高亮样式</p>
<a id="icon-icon-contact"><span class="mui-icon mui-icon-contact"></span></a>
<a id="icon-person"><span class="mui-icon mui-icon-person"></span></a>
<a id="icon-personadd"><span class="mui-icon mui-icon-personadd"></span></a>
<a id="icon-phone"><span class="mui-icon mui-icon-phone"></span></a>
<a id="icon-email"><span class="mui-icon mui-icon-email"></span></a>
<a id="icon-chatbubble"><span class="mui-icon mui-icon-chatbubble"></span></a>
<a id="icon-chatboxes"><span class="mui-icon mui-icon-chatboxes"></span></a>
<a><span class="mui-icon mui-icon-weibo"></span></a>
<a><span class="mui-icon mui-icon-weixin"></span></a>
<a><span class="mui-icon mui-icon-pengyouquan"></span></a>
<a><span class="mui-icon mui-icon-chat"></span></a>
<a><span class="mui-icon mui-icon-videocam"></span></a>
<a><span class="mui-icon mui-icon-camera"></span></a>
<a id="icon-mic"><span class="mui-icon mui-icon-mic"></span></a>
<a id="icon-location"><span class="mui-icon mui-icon-location"></span></a>
<a><span class="mui-icon mui-icon-micoff"></span></a>
<a><span class="mui-icon mui-icon-volumehigh"></span></a>
<a><span class="mui-icon mui-icon-volumelow"></span></a>
<a><span class="mui-icon mui-icon-image"></span></a>
<a><span class="mui-icon mui-icon-map"></span></a>
<a><span class="mui-icon mui-icon-compose"></span></a>
<a><span class="mui-icon mui-icon-trash"></span></a>
<a><span class="mui-icon mui-icon-upload"></span></a>
<a><span class="mui-icon mui-icon-download"></span></a>
<a id="icon-close"><span class="mui-icon mui-icon-close"></span></a>
<a><span class="mui-icon mui-icon-closeempty"></span></a>
<a><span class="mui-icon mui-icon-redo"></span></a>
<a><span class="mui-icon mui-icon-undo"></span></a>
<a id="icon-refresh"><span class="mui-icon mui-icon-refresh"></span></a>
<a><span class="mui-icon mui-icon-refreshempty"></span></a>
<a><span class="mui-icon mui-icon-reload"></span></a>
<a><span class="mui-icon mui-icon-loop"></span></a>
<a><span class="mui-icon mui-icon-loopstrong"></span></a>
<a>
<div class="mui-spinner">
<div class="mui-spinner-indicator mui-spinner-indicator1"></div>
......@@ -71,89 +114,85 @@
<div class="mui-spinner-indicator mui-spinner-indicator12"></div>
</div>
</a>
<a>
<span class="mui-icon mui-icon-spinner mui-spin"></span>
</a>
<a>
<span class="mui-icon mui-icon-spinner-cycle mui-spin"></span>
</a>
<a>
<span class="mui-icon mui-icon-weibo"></span>
</a>
<a>
<span class="mui-icon mui-icon-pin"></span>
</a>
<!--电话-->
<a><span class="mui-icon mui-icon-phone"></span></a>
<a><span class="mui-icon mui-icon-phone-solid"></span></a>
<a><span class="mui-icon mui-icon-phone-filled"></span></a>
<a>
<span class="mui-icon mui-icon-map"></span>
</a>
<a>
<span class="mui-icon mui-icon-sms"></span>
</a>
<a>
<span class="mui-icon mui-icon-chat"></span>
</a>
<a>
<span class="mui-icon mui-icon-search"></span>
</a>
<a><span class="mui-icon mui-icon-close"></span></a>
<a><span class="mui-icon mui-icon-close-cycle"></span></a>
<a><span class="mui-icon mui-icon-clear"></span></a>
<a>
<span class="mui-icon mui-icon-reply"></span>
</a>
<a>
<span class="mui-icon mui-icon-trash"></span>
</a>
<a>
<span class="mui-icon mui-icon-edit"></span>
</a>
<a>
<span class="mui-icon mui-icon-home"></span>
</a>
<a><span class="mui-icon mui-icon-category"></span></a>
<a><span class="mui-icon mui-icon-spinner mui-spin"></span></a>
<a><span class="mui-icon mui-icon-spinner-cycle mui-spin"></span></a>
<a id="icon-star"><span class="mui-icon mui-icon-star"></span></a>
<a><span class="mui-icon mui-icon-starhalf"></span></a>
<a id="icon-plus"><span class="mui-icon mui-icon-plus"></span></a>
<a><span class="mui-icon mui-icon-plusempty"></span></a>
<a id="icon-minus"><span class="mui-icon mui-icon-minus"></span></a>
<a id="icon-circle"><span class="mui-icon mui-icon-circle"></span></a>
<a id="icon-checkmark"><span class="mui-icon mui-icon-checkmark"></span></a>
<a><span class="mui-icon mui-icon-checkmarkempty"></span></a>
<a id="icon-checkbox"><span class="mui-icon mui-icon-checkbox"></span></a>
<a><span class="mui-icon mui-icon-search"></span></a>
<a><span class="mui-icon mui-icon-searchstrong"></span></a>
<a><span class="mui-icon mui-icon-share"></span></a>
<a id="icon-home"><span class="mui-icon mui-icon-home"></span></a>
<a><span class="mui-icon mui-icon-navigate"></span></a>
<a id="icon-gear"><span class="mui-icon mui-icon-gear"></span></a>
<a><span class="mui-icon mui-icon-settings"></span></a>
<a><span class="mui-icon mui-icon-settingsstrong"></span></a>
<a><span class="mui-icon mui-icon-list"></span></a>
<a><span class="mui-icon mui-icon-bars"></span></a>
<a>
<span class="mui-icon mui-icon-calendar"></span>
</a>
<a>
<span class="mui-icon mui-icon-cog"></span>
</a>
<a>
<span class="mui-icon mui-icon-speech"></span>
</a>
<a><span class="mui-icon mui-icon-pulldown"></span></a>
<a><span class="mui-icon mui-icon-arrow-left"></span></a>
<a><span class="mui-icon mui-icon-arrow-right"></span></a>
<!--较粗的箭头-->
<a><span class="mui-icon mui-icon-up"></span></a>
<a><span class="mui-icon mui-icon-down"></span></a>
<a><span class="mui-icon mui-icon-left"></span></a>
<a><span class="mui-icon mui-icon-right"></span></a>
<!--导航箭头-->
<a><span class="mui-icon mui-icon-up-nav"></span></a>
<a><span class="mui-icon mui-icon-down-nav"></span></a>
<a><span class="mui-icon mui-icon-left-nav"></span></a>
<a><span class="mui-icon mui-icon-right-nav"></span></a>
<a><span class="mui-icon mui-icon-radio"></span></a>
<a><span class="mui-icon mui-icon-radio-checked"></span></a>
<a><span class="mui-icon mui-icon-checkbox"></span></a>
<a><span class="mui-icon mui-icon-checkbox-checked"></span></a>
<a><span class="mui-icon mui-icon-checkbox-checked-cycle"></span></a>
<a ><span class="mui-icon mui-icon-paperplane"></span></a>
<a id="icon-info"><span class="mui-icon mui-icon-info"></span></a>
<a id="icon-help"><span class="mui-icon mui-icon-help"></span></a>
<a><span class="mui-icon mui-icon-locked"></span></a>
<a id="icon-more"><span class="mui-icon mui-icon-more"></span></a>
<a><span class="mui-icon mui-icon-more-vertical"></span></a>
<a><span class="mui-icon mui-icon-flag"></span></a>
<a><span class="mui-icon mui-icon-paperclip"></span></a>
<a><span class="mui-icon mui-icon-bars"></span></a>
<a><span class="mui-icon mui-icon-plus"></span></a>
<a><span class="mui-icon mui-icon-back"></span></a>
<a><span class="mui-icon mui-icon-forward"></span></a>
<a><span class="mui-icon mui-icon-arrowup"></span></a>
<a><span class="mui-icon mui-icon-arrowdown"></span></a>
<a><span class="mui-icon mui-icon-arrowleft"></span></a>
<a><span class="mui-icon mui-icon-arrowright"></span></a>
<a><span class="mui-icon mui-icon-arrowthinup"></span></a>
<a><span class="mui-icon mui-icon-arrowthindown"></span></a>
<a><span class="mui-icon mui-icon-arrowthinleft"></span></a>
<a><span class="mui-icon mui-icon-arrowthinright"></span></a>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var active = null,lastid,span;
mui(".mui-content").on("tap","a",function(){
var id = this.getAttribute("id");
if(!active){
this.classList.add("active");
if(id){
span = this.querySelector("span");
span.classList.remove("mui-"+id);
span.classList.add("mui-"+id+"-filled");
}
active = this;
}else{
active.classList.remove("active");
if(lastid){
span.classList.remove("mui-"+lastid+"-filled");
span.classList.add("mui-"+lastid);
}
this.classList.add("active");
if(id){
span = this.querySelector("span");
span.classList.remove("mui-"+id);
span.classList.add("mui-"+id+"-filled");
}
active = this;
}
lastid = id;
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/info.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/inputs.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/iscroll.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/list-triplex-row.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/list-with-input.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/modals.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/oa-contact-list.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/oa-contact-main.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/oa-grid.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/oa-missives-detail.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/offcanvas-left-plus-main.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......@@ -28,7 +27,7 @@
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>
<a class="mui-action-back mui-icon mui-icon-close mui-pull-right"></a>
<a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a>
<h1 class="mui-title">off canvas（侧滑导航）</h1>
</header>
<div class="mui-content">
......
examples/hello-mui/examples/offcanvas-plus-menu.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/offcanvas-right-plus-main.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......@@ -28,7 +27,7 @@
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-right"></a>
<a class="mui-action-back mui-icon mui-icon-close mui-pull-left"></a>
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">off canvas（侧滑导航）</h1>
</header>
<div class="mui-content">
......
examples/hello-mui/examples/offcanvas-with-left.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......@@ -28,8 +27,8 @@
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a href="#offCanvas" class="mui-icon mui-icon-bars mui-pull-left"></a>
<a class="mui-action-back mui-icon mui-icon-close mui-pull-right"></a>
<h1 class="mui-title">Container with slide menu</h1>
<a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a>
<h1 class="mui-title">右滑导航</h1>
</header>
<aside id="offCanvas" class="mui-off-canvas-left">
<button id="offCanvasHide" class="mui-btn mui-btn-primary mui-btn-block">
......@@ -133,46 +132,6 @@
</a>
</li>
</ul>
<div class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/muwu.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/cbd.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div>
<!-- off-canvas backdrop -->
<div class="mui-off-canvas-backdrop"></div>
......
examples/hello-mui/examples/offcanvas-with-right.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......@@ -27,9 +26,9 @@
<div class="mui-off-canvas-wrap mui-draggable">
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<a href="#offCanvas" class="mui-icon mui-icon-bars mui-pull-right"></a>
<h1 class="mui-title">Container with slide menu(right)</h1>
<h1 class="mui-title">左滑导航</h1>
</header>
<aside id="offCanvas" class="mui-off-canvas-right">
<button id="offCanvasHide" class="mui-btn mui-btn-primary mui-btn-block">
......
examples/hello-mui/examples/pagination.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/popovers-with-actionsheet.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/popovers-with-cross-webviews-popover.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/popovers-with-cross-webviews.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/popovers-with-js-call.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/popovers.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/preload-mixwebview-content.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/preload-mixwebview-main.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/preload-webview-with-openwindow.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/preload-webview.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/preload.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/pulldown-and-pullup.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/pulldown-with-plus-content-custom.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/pulldown-with-plus-main-custom.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......@@ -79,7 +78,7 @@
}
function pull2() {
etext.textContent = "松开可刷新";
etext.textContent = "释放立即刷新";
eicon.style.webkitTransition = "all 0.3s ease-in";
eicon.style.webkitTransform = "rotate(180deg)";
}
......
examples/hello-mui/examples/pullrefresh-down-content.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/pullrefresh-down-main.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......@@ -25,7 +24,7 @@
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left mui-pull-left"></a>
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">下拉刷新</h1>
</header>
......
examples/hello-mui/examples/pullup.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/radio.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/range.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/slider-default.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/slider-table-default.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/slider-table-pagination.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/slider-with-title.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......@@ -97,9 +96,6 @@
});
}
});
document.getElementById("slider").addEventListener('slide',function(e){
console.log(e.detail.slideNumber);
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/speech.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/switches.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/tab-webview-main.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......@@ -41,13 +40,13 @@
<span class="mui-tab-label">电话咨询</span>
</a>
<a class="mui-tab-item" href="tab-webview-subpage-chat.html">
<span class="mui-icon mui-icon-chat"></span>
<span class="mui-tab-label">在线咨询</span>
</a>
<a class="mui-tab-item" href="tab-webview-subpage-sms.html">
<span class="mui-icon mui-icon-sms"></span>
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">短信咨询</span>
</a>
<a class="mui-tab-item" href="tab-webview-subpage-contact.html">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">通讯录</span>
</a>
<a class="mui-tab-item" href="tab-webview-subpage-map.html">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">查看地图</span>
......@@ -75,8 +74,8 @@
bottom:'50px'
}
},{
url:'tab-webview-subpage-sms.html',
id:'tab-webview-subpage-sms.html',
url:'tab-webview-subpage-contact.html',
id:'tab-webview-subpage-contact.html',
styles:{
top:'48px',
bottom:'50px'
......
examples/hello-mui/examples/tab-webview-subpage-chat.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......@@ -24,7 +23,7 @@
<body>
<h3>在线咨询</h3>
<h3>短信咨询</h3>
<style type="text/css">
h3{
text-align: center;
......
examples/hello-mui/examples/tab-webview-subpage-sms.html → examples/hello-mui/examples/tab-webview-subpage-contact.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......@@ -24,7 +23,7 @@
<body>
<h3>短信咨询</h3>
<h3>通讯录</h3>
<style type="text/css">
h3{
text-align: center;
......
examples/hello-mui/examples/tab-webview-subpage-map.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/tab-webview-subpage-phone.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/tab-with-segmented-control.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/tab-with-viewpagerindicator.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/tabbar-labels-only.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/tabbar-with-submenus.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/tabbar.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......@@ -40,13 +39,13 @@
<span class="mui-tab-label">电话咨询</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-chat">
<span class="mui-icon mui-icon-chat"></span>
<span class="mui-tab-label">在线咨询</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-sms">
<span class="mui-icon mui-icon-sms"></span>
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">短信咨询</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-contact">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">通讯录</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-map">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">查看地图</span>
......@@ -57,11 +56,11 @@
<h3>电话咨询</h3>
</div>
<div id="tabbar-with-chat" class="mui-control-content">
<h3>在线咨询</h3>
</div>
<div id="tabbar-with-sms" class="mui-control-content">
<h3>短信咨询</h3>
</div>
<div id="tabbar-with-contact" class="mui-control-content">
<h3>通讯录</h3>
</div>
<div id="tabbar-with-map" class="mui-control-content">
<h3>查看地图</h3>
</div>
......
examples/hello-mui/examples/tableview-image-left.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/tableview-image-right.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/tableview-with-images-and-chevrons.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/tableviews-with-badges-and-chevrons.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/tableviews-with-badges.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/tableviews-with-chevrons.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/tableviews-with-collapses.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/tableviews-with-swipe.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/tableviews-with-switches.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/tableviews.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/titlebar-with-buttons.html
View file @ cf990ab0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +20,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/titlebar-with-html5-and-5+.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/titlebar-with-icons.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/titlebar-with-search.html
View file @ cf990ab0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +20,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/titlebar-with-text-and-icons.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/titlebar-with-webview-and-5+.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/titlebar.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/examples/typography.html
View file @ cf990ab0
......@@ -12,8 +12,7 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
html,body {
background-color: #efeff4;
}
</style>
......
examples/hello-mui/index.html
View file @ cf990ab0
......@@ -13,7 +13,7 @@
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a id="info" class="mui-icon mui-icon-info mui-pull-right" style="color: #999;"></a>
<a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a>
<h1 class="mui-title">Hello mui</h1>
</header>
<script>
......
examples/hello-mui/js/mui.min.js
View file @ cf990ab0
This diff is collapsed.
examples/hello-mui/list.html
View file @ cf990ab0
......@@ -11,7 +11,7 @@
<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
<style type="text/css">
#demos {
#list {
/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
margin-top: -1px;
}
......@@ -120,11 +120,11 @@
左右滑动分页样式
</a>
</li>
<li class="mui-table-view-cell">
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/oa-grid.html">
高度自适应示例
</a>
</li>
</li>-->
</ul>
</li>
......@@ -519,6 +519,7 @@
count = 0;
$('.mui-table-view a', this).each(function() {
var url = this.getAttribute("href");
if (~url.indexOf('.html')) {
//单独处理侧滑导航的index
if(~url.indexOf('offcanvas-')){
$.createWindow({
......@@ -534,10 +535,10 @@
preload: true
});
}
if(++count>=limit){
return false;
}
}
});
});
......
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