Skip to content

M
mui
Commit 8af344b4 authored by fxy060608's avatar fxy060608
Browse files
Options

Merge branch 'gh-pages' of https://github.com/dcloudio/mui into gh-pages 

Conflicts:
	index.html
	javascript/index.html
	sitemap.xml
parents 71de472e 0e86d343
Expand all Show whitespace changes
Inline Side-by-side
Showing with 13397 additions and 996 deletions
dist/css/mui.css
View file @ 8af344b4
/*!
* =====================================================
* Mui v0.5.3 (https://github.com/dcloudio/mui)
* Mui v0.5.6 (https://github.com/dcloudio/mui)
* =====================================================
*/
......@@ -1492,13 +1492,13 @@ input[type="submit"]:active, input[type="submit"].mui-active,
}
.mui-table-view-cell.mui-collapse > .mui-navigate-right:after, .mui-table-view-cell.mui-collapse > .mui-push-right:after {
content: '\e662';
content: '\e581';
}
.mui-table-view-cell.mui-collapse.mui-active .mui-table-view {
display: block;
}
.mui-table-view-cell.mui-collapse.mui-active > .mui-navigate-right:after, .mui-table-view-cell.mui-collapse.mui-active > .mui-push-right:after {
content: '\e661';
content: '\e580';
}
.mui-table-view-cell.mui-collapse .mui-table-view {
display: none;
......@@ -1570,7 +1570,7 @@ input[type="submit"]:active, input[type="submit"].mui-active,
}
.mui-grid-view.mui-grid-9 .mui-media .mui-icon {
position: relative;
font-size: 3em;
font-size: 2.4em;
}
.mui-grid-view.mui-grid-9 .mui-media .mui-icon .mui-badge {
position: absolute;
......@@ -1827,27 +1827,19 @@ select {
}
.mui-radio input[type="radio"]:before {
content: "\e654";
content: "\e411";
}
.mui-radio input[type="radio"]:checked:before {
content: "\e655";
content: "\e441";
}
.mui-checkbox input[type="checkbox"]:before {
content: "\e656";
content: "\e411";
}
.mui-checkbox input[type="checkbox"]:checked:before {
content: "\e657";
}
.mui-checkbox-cycle input[type="checkbox"]:before {
content: "\e910";
}
.mui-checkbox-cycle input[type="checkbox"]:checked:before {
content: "\e911";
content: "\e442";
}
.mui-select {
......@@ -1982,7 +1974,7 @@ select {
font-family: Muiicons;
font-size: 20px;
font-weight: normal;
content: '\e607';
content: '\e466';
}
.mui-search.mui-active:before {
left: 5px;
......@@ -2626,13 +2618,13 @@ select {
.mui-navigate-left:after,
.mui-push-left:after {
left: 15px;
content: '\e664';
content: '\e582';
}
.mui-navigate-right:after,
.mui-push-right:after {
right: 15px;
content: '\e663';
content: '\e583';
}
.mui-pull-top-pocket, .mui-pull-bottom-pocket {
......@@ -2658,7 +2650,7 @@ select {
.mui-pull-bottom-pocket .mui-pull-loading {
display: none;
}
.mui-pull-bottom-pocket .mui-pull-loading.mui-in {
.mui-pull-bottom-pocket .mui-pull-loading.mui-active {
display: inline-block;
}
......@@ -2723,7 +2715,7 @@ select {
font-style: normal;
font-weight: normal;
src: url("../fonts/muiicons.ttf") format("truetype");
src: url("../fonts/mui.ttf") format("truetype");
}
.mui-icon {
display: inline-block;
......@@ -2741,170 +2733,342 @@ select {
padding-left: .2em;
}
.mui-icon-spinner:before {
content: "\e600";
.mui-icon-contact:before {
content: "\e100";
}
.mui-icon-weibo:before {
content: "\e601";
.mui-icon-person:before {
content: "\e101";
}
.mui-icon-personadd:before {
content: "\e102";
}
.mui-icon-pin:before {
content: "\e602";
.mui-icon-contact-filled:before {
content: "\e130";
}
.mui-icon-person-filled:before {
content: "\e131";
}
.mui-icon-personadd-filled:before {
content: "\e132";
}
.mui-icon-phone:before {
content: "\e603";
content: "\e200";
}
.mui-icon-map:before {
content: "\e604";
.mui-icon-email:before {
content: "\e201";
}
.mui-icon-sms:before {
content: "\e605";
.mui-icon-chatbubble:before {
content: "\e202";
}
.mui-icon-chat:before {
content: "\e606";
.mui-icon-chatboxes:before {
content: "\e203";
}
.mui-icon-search:before {
content: "\e607";
.mui-icon-phone-filled:before {
content: "\e230";
}
.mui-icon-close:before {
content: "\e608";
.mui-icon-email-filled:before {
content: "\e231";
}
.mui-icon-reply:before {
content: "\e609";
.mui-icon-chatbubble-filled:before {
content: "\e232";
}
.mui-icon-trash:before {
content: "\e610";
.mui-icon-chatboxes-filled:before {
content: "\e233";
}
.mui-icon-edit:before {
content: "\e611";
.mui-icon-weibo:before {
content: "\e260";
}
.mui-icon-home:before {
content: "\e612";
.mui-icon-weixin:before {
content: "\e261";
}
.mui-icon-category:before {
content: "\e613";
.mui-icon-pengyouquan:before {
content: "\e262";
}
.mui-icon-calendar:before {
content: "\e614";
.mui-icon-chat:before {
content: "\e263";
}
.mui-icon-cog:before {
content: "\e615";
.mui-icon-videocam:before {
content: "\e300";
}
.mui-icon-speech:before {
content: "\e616";
.mui-icon-camera:before {
content: "\e301";
}
.mui-icon-info:before {
content: "\e617";
.mui-icon-mic:before {
content: "\e302";
}
.mui-icon-arrow-left:before {
content: "\e648";
.mui-icon-location:before {
content: "\e303";
}
.mui-icon-arrow-right:before {
content: "\e649";
.mui-icon-mic-filled:before, .mui-icon-speech:before {
content: "\e332";
}
.mui-icon-up-nav:before {
content: "\e650";
.mui-icon-location-filled:before {
content: "\e333";
}
.mui-icon-down-nav:before {
content: "\e651";
.mui-icon-micoff:before {
content: "\e360";
}
.mui-icon-right-nav:before {
content: "\e652";
.mui-icon-image:before {
content: "\e363";
}
.mui-icon-left-nav:before {
content: "\e653";
.mui-icon-map:before {
content: "\e364";
}
.mui-icon-radio:before {
content: "\e654";
.mui-icon-compose:before {
content: "\e400";
}
.mui-icon-radio-checked:before {
content: "\e655";
.mui-icon-trash:before {
content: "\e401";
}
.mui-icon-checkbox:before {
content: "\e656";
.mui-icon-upload:before {
content: "\e402";
}
.mui-icon-checkbox-checked:before {
content: "\e657";
.mui-icon-download:before {
content: "\e403";
}
.mui-icon-bars:before {
content: "\e658";
.mui-icon-close:before {
content: "\e404";
}
.mui-icon-redo:before {
content: "\e405";
}
.mui-icon-undo:before {
content: "\e406";
}
.mui-icon-refresh:before {
content: "\e407";
}
.mui-icon-star:before {
content: "\e408";
}
.mui-icon-plus:before {
content: "\e659";
content: "\e409";
}
.mui-icon-clear:before {
content: "\e660";
.mui-icon-minus:before {
content: "\e410";
}
.mui-icon-up:before {
content: "\e661";
.mui-icon-circle:before, .mui-icon-checkbox:before {
content: "\e411";
}
.mui-icon-down:before {
content: "\e662";
.mui-icon-close-filled:before, .mui-icon-clear:before {
content: "\e434";
}
.mui-icon-right:before {
content: "\e663";
.mui-icon-refresh-filled:before {
content: "\e437";
}
.mui-icon-left:before {
content: "\e664";
.mui-icon-star-filled:before {
content: "\e438";
}
.mui-icon-pulldown:before {
content: "\e665";
.mui-icon-plus-filled:before {
content: "\e439";
}
.mui-icon-phone-solid:before {
content: "\e702";
.mui-icon-minus-filled:before {
content: "\e440";
}
.mui-icon-phone-filled:before {
content: "\e804";
.mui-icon-circle-filled:before {
content: "\e441";
}
.mui-icon-checkbox-filled:before {
content: "\e442";
}
.mui-icon-closeempty:before {
content: "\e460";
}
.mui-icon-refreshempty:before {
content: "\e461";
}
.mui-icon-reload:before {
content: "\e462";
}
.mui-icon-starhalf:before {
content: "\e463";
}
.mui-icon-close-cycle:before {
content: "\e908";
.mui-icon-spinner:before {
content: "\e464";
}
.mui-icon-spinner-cycle:before {
content: "\e909";
content: "\e465";
}
.mui-icon-search:before {
content: "\e466";
}
.mui-icon-plusempty:before {
content: "\e468";
}
.mui-icon-forward:before {
content: "\e470";
}
.mui-icon-back:before, .mui-icon-left-nav:before {
content: "\e471";
}
.mui-icon-checkmarkempty:before {
content: "\e472";
}
.mui-icon-home:before {
content: "\e500";
}
.mui-icon-navigate:before {
content: "\e501";
}
.mui-icon-gear:before {
content: "\e502";
}
.mui-icon-paperplane:before {
content: "\e503";
}
.mui-icon-info:before {
content: "\e504";
}
.mui-icon-help:before {
content: "\e505";
}
.mui-icon-locked:before {
content: "\e506";
}
.mui-icon-more:before {
content: "\e507";
}
.mui-icon-flag:before {
content: "\e508";
}
.mui-icon-home-filled:before {
content: "\e530";
}
.mui-icon-gear-filled:before {
content: "\e532";
}
.mui-icon-info-filled:before {
content: "\e534";
}
.mui-icon-help-filled:before {
content: "\e535";
}
.mui-icon-checkbox-cycle:before {
content: "\e910";
.mui-icon-more-filled:before {
content: "\e537";
}
.mui-icon-checkbox-checked-cycle:before {
content: "\e911";
.mui-icon-settings:before {
content: "\e560";
}
.mui-icon-list:before {
content: "\e562";
}
.mui-icon-bars:before {
content: "\e563";
}
.mui-icon-loop:before {
content: "\e565";
}
.mui-icon-paperclip:before {
content: "\e567";
}
.mui-icon-arrowup:before {
content: "\e580";
}
.mui-icon-arrowdown:before {
content: "\e581";
}
.mui-icon-arrowleft:before {
content: "\e582";
}
.mui-icon-arrowright:before {
content: "\e583";
}
.mui-icon-arrowthinup:before {
content: "\e584";
}
.mui-icon-arrowthindown:before {
content: "\e585";
}
.mui-icon-arrowthinleft:before {
content: "\e586";
}
.mui-icon-arrowthinright:before {
content: "\e587";
}
.mui-icon-pulldown:before {
content: "\e588";
}
dist/css/mui.min.css
View file @ 8af344b4
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/jquery-2.1.1.js
View file @ 8af344b4
This diff is collapsed.
dist/js/mui.js
View file @ 8af344b4
This diff is collapsed.
dist/js/mui.min.js
View file @ 8af344b4
This diff is collapsed.
dist/js/mui.tpl.js 0 → 100644
View file @ 8af344b4
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.tpl.min.js 0 → 100644
View file @ 8af344b4
This diff is collapsed.
examples/app-android-notes/css/app.css deleted 100644 → 0
View file @ 71de472e
.slider,
.slider img {
margin-bottom: 0;
height: 150px;
}
examples/app-android-notes/index.html deleted 100644 → 0
View file @ 71de472e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Notes</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Roboto -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700">
<link rel="stylesheet" href="../../dist/css/ratchet.min.css">
<link rel="stylesheet" href="../../dist/css/ratchet-theme-android.min.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/js/ratchet.min.js"></script>
</head>
<body>
<header class="bar bar-nav">
<a class="icon icon-compose pull-right" href="#composeModal"></a>
<a href="#navPopover">
<h1 class="title">
<span class="icon icon-home"></span>
Notes
<span class="icon icon-caret"></span>
</h1>
</a>
</header>
<div class="content">
<ul class="table-view">
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
</ul>
</div>
<!-- Compose modal -->
<div id="composeModal" class="modal">
<header class="bar bar-nav">
<a class="icon icon-left pull-left" href="#composeModal"></a>
<h1 class="title">New note</h1>
</header>
<div class="content">
<form class="content-padded">
<input type="text" placeholder="Title">
<textarea rows="10"></textarea>
<a class="btn btn-positive btn-block" href="#composeModal">Save note</a>
</form>
</div>
</div><!-- /.modal -->
<!-- Popover -->
<div id="navPopover" class="popover">
<ul class="table-view">
<li class="table-view-cell">Item1</li>
<li class="table-view-cell">Item2</li>
<li class="table-view-cell">Item3</li>
<li class="table-view-cell">Item4</li>
<li class="table-view-cell">Item5</li>
<li class="table-view-cell">Item6</li>
<li class="table-view-cell">Item7</li>
<li class="table-view-cell">Item8</li>
<li class="table-view-cell">Item9</li>
<li class="table-view-cell">Item10</li>
</ul>
</div>
</body>
</html>
examples/app-ios-mail/css/app.css deleted 100644 → 0
View file @ 71de472e
.updated-text {
position: absolute;
left: 0;
right: 0;
padding: 10px 0;
font-size: 11px;
text-align: center;
}
.table-view-cell .icon {
color: #007aff;
}
examples/app-ios-mail/inbox.html deleted 100644 → 0
View file @ 71de472e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mail</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../dist/css/ratchet.min.css">
<link rel="stylesheet" href="../../dist/css/ratchet-theme-ios.min.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/js/ratchet.min.js"></script>
</head>
<body>
<header class="bar bar-nav">
<a class="icon icon-left-nav pull-left" href="index.html" data-transition="slide-out"></a>
<a class="icon icon-refresh pull-right"></a>
<h1 class="title">All inboxes</h1>
</header>
<div class="content">
<ul class="table-view">
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
</ul>
</div><!-- /.content -->
</body>
</html>
examples/app-ios-mail/index.html deleted 100644 → 0
View file @ 71de472e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mail</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../dist/css/ratchet.min.css">
<link rel="stylesheet" href="../../dist/css/ratchet-theme-ios.min.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/js/ratchet.min.js"></script>
</head>
<body>
<header class="bar bar-nav">
<a class="icon icon-refresh pull-right"></a>
<h1 class="title">Mailboxes</h1>
</header>
<div class="bar bar-footer">
<a class="icon icon-compose pull-right" href="#composeModal"></a>
<small class="updated-text">Updated just now</small>
</div>
<div class="content">
<ul class="table-view">
<li class="table-view-cell media">
<a class="navigate-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-pages pull-left"></span>
<div class="media-body">
All inboxes
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-person pull-left"></span>
<div class="media-body">
Personal email
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-star-filled pull-left"></span>
<div class="media-body">
Starred
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-trash pull-left"></span>
<div class="media-body">
Trash
</div>
</a>
</li>
</ul>
<h5 class="content-padded">Other accounts</h5>
<ul class="table-view">
<li class="table-view-cell media">
<a class="navigate-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-more pull-left"></span>
<div class="media-body">
Misc
</div>
</a>
</li>
</ul>
</div><!-- /.content -->
<!-- Compose modal -->
<div id="composeModal" class="modal">
<header class="bar bar-nav">
<a class="btn btn-link pull-right" href="#composeModal">
<strong>Send</strong>
</a>
<a class="btn btn-link pull-left" href="#composeModal">
Cancel
</a>
<h1 class="title">New message</h1>
</header>
<div class="content">
<form class="input-group">
<input type="text" placeholder="To:">
<input type="email" placeholder="From:">
<input type="text" placeholder="Subject:">
<textarea rows="20"></textarea>
</form>
</div>
</div><!-- /.modal -->
</body>
</html>
examples/app-movies/choose-theater.html deleted 100644 → 0
View file @ 71de472e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Movie finder</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../dist/css/ratchet.min.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/js/ratchet.min.js"></script>
</head>
<body>
<header class="bar bar-nav">
<a class="btn btn-link btn-nav pull-left" href="index.html" data-transition="slide-out">
<span class="icon icon-left-nav"></span>
Back
</a>
<h1 class="title">Argo</h1>
</header>
<div class="bar bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search theaters">
</form>
</div>
<div class="content">
<ul class="table-view">
<li class="table-view-cell table-view-divider">Theaters nearby</li>
<li class="table-view-cell">
Metreon 16
<p>1.3 miles away</p>
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a>
</li>
<li class="table-view-cell">
AMC 5
<p>3.5 miles away</p>
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a>
</li>
<li class="table-view-cell">
Regal 42
<p>7.3 miles away</p>
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a>
</li>
<li class="table-view-cell">
Shorline theater
<p>12.5 miles away</p>
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a>
</li>
<li class="table-view-cell">
AMC 16
<p>12.2 miles away</p>
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a>
</li>
<li class="table-view-cell">
BW3 16
<p>13.4 miles away</p>
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a>
</li>
<li class="table-view-cell">
MC Hammer 16
<p>14.1 miles away</p>
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a>
</li>
<li class="table-view-cell">
AMC 3
<p>14.3 miles away</p>
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a>
</li>
<li class="table-view-cell">
AMC 2
<p>14.7 miles away</p>
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a>
</li>
<li class="table-view-cell">
AMC 10
<p>15 miles away</p>
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a>
</li>
</ul>
</div>
</body>
</html>
examples/app-movies/css/app.css deleted 100644 → 0
View file @ 71de472e
.slider {
margin-bottom: 0;
}
.slider img {
width: auto;
height: 150px;
}
.content-padded {
margin: 30px 15px 15px;
}
examples/app-movies/index.html deleted 100644 → 0
View file @ 71de472e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Movie finder</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../dist/css/ratchet.min.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/js/ratchet.min.js"></script>
</head>
<body>
<header class="bar bar-nav">
<a class="icon icon-gear pull-right" href="#settingsModal"></a>
<h1 class="title">Movie finder</h1>
</header>
<div class="bar bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search">
</form>
</div>
<div class="content">
<div class="slider">
<div class="slide-group">
<div class="slide">
<img src="img/argo.png" alt="Argo" width="640" height="300">
</div>
<div class="slide">
<img src="img/skyfall.png" alt="Skyfall" width="640" height="300">
</div>
<div class="slide">
<img src="img/ralph.png" alt="Wreck-It Ralph" width="640" height="300">
</div>
</div>
</div>
<ul class="table-view">
<li class="table-view-cell table-view-divider">Recommended movies</li>
<li class="table-view-cell media">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster">
<div class="media-body">
Argo
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster">
<div class="media-body">
Skyfall: 007
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster">
<div class="media-body">
Wreck-it Ralph
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster">
<div class="media-body">
Argo
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster">
<div class="media-body">
Skyfall: 007
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster">
<div class="media-body">
Wreck-it Ralph
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster">
<div class="media-body">
Argo
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster">
<div class="media-body">
Skyfall: 007
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster">
<div class="media-body">
Wreck-it Ralph
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
</ul>
</div><!-- /.content -->
<!-- Settings modal -->
<div id="settingsModal" class="modal">
<header class="bar bar-nav">
<a class="icon icon-close pull-right" href="#settingsModal"></a>
<h1 class="title">Settings</h1>
</header>
<div class="content">
<form class="input-group">
<input type="text" placeholder="Full name">
<input type="email" placeholder="Email">
<input type="text" placeholder="Username">
</form>
<h5 class="content-padded">App settings</h5>
<ul class="table-view">
<li class="table-view-cell media">
<span class="media-object pull-left icon icon-sound"></span>
<div class="media-body">
Enable sounds
</div>
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell media">
<span class="media-object pull-left icon icon-person"></span>
<div class="media-body">
Parental controls
</div>
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<div class="content-padded">
<button class="btn btn-positive btn-block">Save settings</button>
</div>
</div>
</div><!-- /.modal -->
</body>
</html>
index.html
View file @ 8af344b4
......@@ -10,6 +10,7 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<<<<<<< HEAD
<<<<<<< HEAD
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-13 19:37:35 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-13 19:37:35 +0800">
......@@ -17,6 +18,10 @@
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-11 14:42:27 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-11 14:42:27 +0800">
>>>>>>> FETCH_HEAD
=======
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-14 18:32:55 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-14 18:32:55 +0800">
>>>>>>> FETCH_HEAD
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
......@@ -78,11 +83,16 @@
</div>
<script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script>
<<<<<<< HEAD
<<<<<<< HEAD
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-13 19:37:35 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-13 19:37:35 +0800"></script>
=======
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-11 14:42:27 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-11 14:42:27 +0800"></script>
>>>>>>> FETCH_HEAD
=======
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-14 18:32:55 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-14 18:32:55 +0800"></script>
>>>>>>> FETCH_HEAD
</div>
......
javascript/index.html
View file @ 8af344b4
......@@ -10,6 +10,7 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<<<<<<< HEAD
<<<<<<< HEAD
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-13 19:37:35 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-13 19:37:35 +0800">
......@@ -17,6 +18,10 @@
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-12 17:26:05 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-12 17:26:05 +0800">
>>>>>>> FETCH_HEAD
=======
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-14 18:32:55 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-14 18:32:55 +0800">
>>>>>>> FETCH_HEAD
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
......@@ -116,7 +121,7 @@
<!-- 页面初始化 -->
<article class="component mui-active" id="pageinit">
<h3 class="component-title">页面初始化</h3>
<p class="component-description">mui框架将很多功能配置都集中在mui.init方法中，要使用某项功能，只需要在mui.init方法中完成对应参数配置即可，目前支持在mui.init方法中配置的功能包括：<a href="#subpage">创建子页面</a>、<a href="#closewindow">关闭页面</a>、<a href="#gesture">手势事件配置</a>、<a href="#preload">预加载</a>、<a href="#pullrefresh">下拉刷新</a>。</p>
<p class="component-description">mui框架将很多功能配置都集中在mui.init方法中，要使用某项功能，只需要在mui.init方法中完成对应参数配置即可，目前支持在mui.init方法中配置的功能包括：<a href="#subpage">创建子页面</a>、<a href="#closewindow">关闭页面</a>、<a href="#gesture">手势事件配置</a>、<a href="#preload">预加载</a>、<a href="#pullrefresh-down">下拉刷新</a>、<a href="#pullrefresh-up">上拉加载</a>。</p>
<p class="component-description">在app开发中，若要使用<a href="http://www.html5plus.org/#specification">HTML5+扩展api</a>，必须等plusready事件发生后才能正常使用，mui将该事件封装成了<code>mui.plusReady()</code>方法，涉及到HTML5+的api，建议都写在mui.plusReady方法中。如下为打印当前页面URL的示例：</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">mui</span><span class="p">.</span><span class="nx">plusReady</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
......@@ -484,6 +489,28 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级
<span class="c1">//注意，加载完新数据后，必须执行如下代码；若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后</span>
<span class="nx">callback</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>
</article>
<!-- 上拉加载 -->
<article id="pullrefresh-up" class="component mui-active">
<h3 class="component-title">上拉加载</h3>
<p class="component-description">mui的上拉加载实现比较简单，检测5+ runtime提供的滚动条滚动到底事件（plusscrollbottom），显示“正在加载”提示-->开始加载业务数据-->隐藏"正在加载"提示。使用方式类似下拉刷新，首先、通过mui.init方法中pullRefresh参数配置上拉加载各项参数，如下：</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">mui</span><span class="p">.</span><span class="nx">init</span><span class="p">({</span>
<span class="nx">pullRefresh</span> <span class="o">:</span> <span class="p">{</span>
<span class="nx">container</span><span class="o">:</span><span class="nx">refreshContainer</span><span class="p">,</span><span class="c1">//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等</span>
<span class="nx">up</span> <span class="o">:</span> <span class="p">{</span>
<span class="nx">contentrefresh</span> <span class="o">:</span> <span class="s2">&quot;正在加载...&quot;</span><span class="p">,</span><span class="c1">//可选，正在加载状态时，上拉加载控件上显示的标题内容</span>
<span class="nx">callback</span> <span class="o">:</span><span class="nx">pullfresh</span><span class="o">-</span><span class="kd">function</span> <span class="c1">//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">});</span></code></pre></div>
<p class="component-description">其次，根据具体业务编写加载函数，需要注意的是，加载完新数据后，需要执行callback()方法；</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">pullfresh</span><span class="o">-</span><span class="kd">function</span><span class="p">(</span><span class="nx">callback</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">//业务逻辑代码，比如通过ajax从服务器获取新数据；</span>
<span class="p">......</span>
<span class="c1">//注意，加载完新数据后，必须执行如下代码；若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后</span>
<span class="nx">callback</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>
<p class="component-description"><strong>注意：</strong>因为使用的是滚动到底事件，因此若当前页面内容过少，没有滚动条的话，就不会触发上拉加载。</p>
</article>
<!-- 下拉刷新 -->
<article id="input" class="component mui-active">
......@@ -584,11 +611,16 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级
</div>
<script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script>
<<<<<<< HEAD
<<<<<<< HEAD
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-13 19:37:35 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-13 19:37:35 +0800"></script>
=======
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-12 17:26:05 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-12 17:26:05 +0800"></script>
>>>>>>> FETCH_HEAD
=======
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-14 18:32:55 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-14 18:32:55 +0800"></script>
>>>>>>> FETCH_HEAD
</div>
......
sitemap.xml
View file @ 8af344b4
......@@ -2,10 +2,14 @@
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://dcloudio.github.io/mui/</loc>
<<<<<<< HEAD
<<<<<<< HEAD
<lastmod>2014-09-13T19:37:35+08:00</lastmod>
=======
<lastmod>2014-09-12T17:26:05+08:00</lastmod>
>>>>>>> FETCH_HEAD
=======
<lastmod>2014-09-14T18:32:55+08:00</lastmod>
>>>>>>> FETCH_HEAD
<changefreq>daily</changefreq>
<priority>1.0</priority>
......@@ -14,10 +18,14 @@
<url>
<loc>http://dcloudio.github.io/mui/about/</loc>
<<<<<<< HEAD
<<<<<<< HEAD
<lastmod>2014-09-13T19:37:35+08:00</lastmod>
=======
<lastmod>2014-09-12T17:26:05+08:00</lastmod>
>>>>>>> FETCH_HEAD
=======
<lastmod>2014-09-14T18:32:55+08:00</lastmod>
>>>>>>> FETCH_HEAD
<changefreq>weekly</changefreq>
<priority>0.7</priority>
......@@ -27,10 +35,14 @@
<url>
<loc>http://dcloudio.github.io/mui/components/</loc>
<<<<<<< HEAD
<<<<<<< HEAD
<lastmod>2014-09-13T19:37:35+08:00</lastmod>
=======
<lastmod>2014-09-12T17:26:05+08:00</lastmod>
>>>>>>> FETCH_HEAD
=======
<lastmod>2014-09-14T18:32:55+08:00</lastmod>
>>>>>>> FETCH_HEAD
<changefreq>weekly</changefreq>
<priority>0.7</priority>
......@@ -40,10 +52,14 @@
<url>
<loc>http://dcloudio.github.io/mui/getting-started-old/</loc>
<<<<<<< HEAD
<<<<<<< HEAD
<lastmod>2014-09-13T19:37:35+08:00</lastmod>
=======
<lastmod>2014-09-12T17:26:05+08:00</lastmod>
>>>>>>> FETCH_HEAD
=======
<lastmod>2014-09-14T18:32:55+08:00</lastmod>
>>>>>>> FETCH_HEAD
<changefreq>weekly</changefreq>
<priority>0.7</priority>
......@@ -53,10 +69,14 @@
<url>
<loc>http://dcloudio.github.io/mui/getting-started/</loc>
<<<<<<< HEAD
<<<<<<< HEAD
<lastmod>2014-09-13T19:37:35+08:00</lastmod>
=======
<lastmod>2014-09-12T17:26:05+08:00</lastmod>
>>>>>>> FETCH_HEAD
=======
<lastmod>2014-09-14T18:32:55+08:00</lastmod>
>>>>>>> FETCH_HEAD
<changefreq>weekly</changefreq>
<priority>0.7</priority>
......@@ -68,10 +88,14 @@
<url>
<loc>http://dcloudio.github.io/mui/javascript-old/</loc>
<<<<<<< HEAD
<<<<<<< HEAD
<lastmod>2014-09-13T19:37:35+08:00</lastmod>
=======
<lastmod>2014-09-12T17:26:05+08:00</lastmod>
>>>>>>> FETCH_HEAD
=======
<lastmod>2014-09-14T18:32:55+08:00</lastmod>
>>>>>>> FETCH_HEAD
<changefreq>weekly</changefreq>
<priority>0.7</priority>
......@@ -81,10 +105,14 @@
<url>
<loc>http://dcloudio.github.io/mui/javascript/</loc>
<<<<<<< HEAD
<<<<<<< HEAD
<lastmod>2014-09-13T19:37:35+08:00</lastmod>
=======
<lastmod>2014-09-12T17:26:05+08:00</lastmod>
>>>>>>> FETCH_HEAD
=======
<lastmod>2014-09-14T18:32:55+08:00</lastmod>
>>>>>>> FETCH_HEAD
<changefreq>weekly</changefreq>
<priority>0.7</priority>
......
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