Skip to content

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

微调hello mui中部分页面代码格式

parent eeb2ad6f
Hide whitespace changes
Inline Side-by-side
Showing with 58 additions and 166 deletions
examples/hello-mui/examples/info.html
View file @ 8306ce1d
...@@ -12,81 +12,67 @@ ...@@ -12,81 +12,67 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html,body {
background-color: #efeff4;
}
header.mui-bar{ header.mui-bar{
display: none; display: none;
} }
.mui-bar-nav~.mui-content{ .mui-bar-nav~.mui-content{
padding: 0; padding: 0;
} }
p {
text-indent: 22px;
padding: 5px 8px;
}
html,body,.mui-content {
background-color: #fff;
}
h4 {
margin-left: 5px;
}
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav">
<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-left-nav mui-pull-left"></a> <h1 class="mui-title">关于</h1>
<h1 class="mui-title">关于</h1> </header>
</header> <div class="mui-content">
<div class="mui-content"> <div class="mui-content-padded">
<div class="mui-content-padded"> <h4 style="margin-top:10px;">mui</h4>
<h4 style="margin-top:10px;">mui</h4> <p>
<p> 性能和体验的差距，一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题，这些都让HTML5开发者倍感挫败 ； 另一方面，浏览器默认控件样式又少又丑，制作一个漂亮的控件非常麻烦，也有一些制作简单的ui框架但性能低下。
性能和体验的差距，一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题，这些都让HTML5开发者倍感挫败 ； 另一方面，浏览器默认控件样式又少又丑，制作一个漂亮的控件非常麻烦，也有一些制作简单的ui框架但性能低下。 </p>
</p> <p>
<p> mui框架有效的解决了这些问题，这是一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。
mui框架有效的解决了这些问题，这是一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。 </p>
</p> <h4>新手指南</h4>
<h4>新手指南</h4> <p>
<p> 若想详细了解Hello MUI的源码及工作原理，可从<a href="http://www.dcloud.io">Dcloud官网</a>下载Hbuilder，选择新建“移动APP”，并选择“Hello MUI”工程模板，创建工程；然后通过数据线将手机连接上电脑，点击运行，就可以在手机上体验MUI的各项能力。
若想详细了解Hello MUI的源码及工作原理，可从<a href="http://www.dcloud.io">Dcloud官网</a>下载Hbuilder，选择新建“移动APP”，并选择“Hello MUI”工程模板，创建工程；然后通过数据线将手机连接上电脑，点击运行，就可以在手机上体验MUI的各项能力。 </p>
</p> <p>
<p> 若要使用MUI进行移动APP开发，可通过Hbuilder，新建“移动APP”，并选择“MUI”工程模板，该模板已内置MUI相关的资源文件。
若要使用MUI进行移动APP开发，可通过Hbuilder，新建“移动APP”，并选择“MUI”工程模板，该模板已内置MUI相关的资源文件。 </p>
</p> <p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p> <h4>版本介绍</h4>
<h4>版本介绍</h4> <p>当前版本为1.1.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<p>当前版本为1.1.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p> <h4>License</h4>
<h4>License</h4> <p>
<p> mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>;
mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>; </p>
</p> </div>
</div>
</div> <script type="text/javascript" charset="utf-8">
</div> mui.init();
<style type="text/css"> //处理点击事件，需要打开原生浏览器
p { mui('body').on('tap', 'a', function(e) {
text-indent: 22px; var href = this.getAttribute('href');
padding: 5px 8px; if (href) {
} if (window.plus) {
html, plus.runtime.openURL(href);
body, } else {
.mui-content { location.href = href;
background-color: #fff; }
} }
h4 { });
margin-left: 5px; </script>
} </body>
</style>
<script type="text/javascript" charset="utf-8">
//处理点击事件，需要打开原生浏览器
mui('body').on('tap', 'a', function(e) {
var href = this.getAttribute('href');
if (href) {
if (window.plus) {
plus.runtime.openURL(href);
} else {
location.href = href;
}
}
});
</script>
</body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/inputs.html → examples/hello-mui/examples/input.html
View file @ 8306ce1d
...@@ -15,6 +15,9 @@ ...@@ -15,6 +15,9 @@
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
} }
h5 {
margin: 5px 7px;
}
</style> </style>
</head> </head>
...@@ -29,18 +32,7 @@ ...@@ -29,18 +32,7 @@
<div class="mui-input-row mui-search"> <div class="mui-input-row mui-search">
<input id="search" type="search" class="mui-input-speech mui-input-clear" placeholder="带语音输入的搜索框"> <input id="search" type="search" class="mui-input-speech mui-input-clear" placeholder="带语音输入的搜索框">
</div> </div>
<div class="mui-input-row mui-input-range">
<label>slider</label>
<input type="range" min="0" max="100">
</div>
<div class="mui-input-row">
<label>Switch</label>
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</div>
<form class="mui-input-group"> <form class="mui-input-group">
<div class="mui-input-row"> <div class="mui-input-row">
<label>Input</label> <label>Input</label>
<input type="text" placeholder="普通输入框"> <input type="text" placeholder="普通输入框">
...@@ -64,13 +56,6 @@ ...@@ -64,13 +56,6 @@
</div> </div>
</div> </div>
</div> </div>
<style type="text/css">
h5 {
margin: 5px 7px;
}
</style>
<script> <script>
mui.init(); mui.init();
//语音识别完成事件 //语音识别完成事件
...@@ -79,5 +64,4 @@ ...@@ -79,5 +64,4 @@
}); });
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/list.html
View file @ 8306ce1d
...@@ -62,13 +62,7 @@ ...@@ -62,13 +62,7 @@
块级按钮 块级按钮
</a> </a>
</li> </li>
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/buttons-with-fabs.html">
浮动控制按钮
</a>
</li>-->
</ul> </ul>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/checkbox.html"> <a class="mui-navigate-right" href="examples/checkbox.html">
...@@ -145,7 +139,7 @@ ...@@ -145,7 +139,7 @@
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/inputs.html"> <a class="mui-navigate-right" href="examples/input.html">
input（输入框） input（输入框）
</a> </a>
</li> </li>
...@@ -193,11 +187,6 @@ ...@@ -193,11 +187,6 @@
media list（图文列表） media list（图文列表）
</a> </a>
</li> </li>
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type='common' href="examples/modals.html">
modal（弹出窗口）
</a>
</li>-->
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/nav.html"> <a class="mui-navigate-right" open-type="common" href="examples/nav.html">
nav bar（导航栏） nav bar（导航栏）
...@@ -317,78 +306,11 @@ ...@@ -317,78 +306,11 @@
</li> </li>
</ul> </ul>
</li> </li>
<!--<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">
表单（Forms）
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/forms.html">
Form
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/forms-with-group.html">
Form with input group
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/forms-with-group-and-labels.html">
Form with input group and labels
</a>
</li>
</ul>
</li>-->
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/preload.html">
预加载（Preload）
</a>
</li>-->
<!--<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">
OA模板
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/oa-missives-detail.html">
待办公文详情
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/oa-contact-main.html">
通讯录
</a>
</li>
</ul>
</li>-->
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/typography.html"> <a class="mui-navigate-right" href="examples/typography.html">
typography（文字） typography（文字）
</a> </a>
</li> </li>
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/iscroll.html">
iscroll 4
</a>
</li>
-->
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/demo.html">
预加载(模板)
</a>
</li>-->
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/scroll.html">
scroll（区域滚动）
</a>
</li>-->
</ul> </ul>
</div> </div>
<script> <script>
......
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