Skip to content

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

优化hello mui中actionsheet的描述信息

parent a8d81086
Hide whitespace changes
Inline Side-by-side
Showing with 74 additions and 31 deletions
examples/hello-mui/examples/actionsheet-plus.html
View file @ 3d43667e
...@@ -34,6 +34,13 @@ ...@@ -34,6 +34,13 @@
#info{ #info{
padding: 20px 10px ; padding: 20px 10px ;
} }
.des{
margin: .5em 0;
}
.des>li{
font-size: 14px;
color: #8f8f94;
}
</style> </style>
<script> <script>
mui.init(); mui.init();
...@@ -59,15 +66,16 @@ ...@@ -59,15 +66,16 @@
</nav> </nav>
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded"> <div class="mui-content-padded">
<p>这是5+ runtime封装的原生Actionsheet， <p>这是5+ runtime封装的原生actionsheet，该模式具备如下优点：</p>
优点是无需考虑跨webview的遮罩问题， <ul class="des">
缺点是样式固定，无法自定义； <li>支持覆盖顶部状态栏</li>
多webview模式下推荐使用原生模式的Actionsheet； <li>支持跨webview的遮罩</li>
<!--<span class="mui-icon mui-icon-trash"></span>会弹出删除信息确认框； 点击本页面右下角 <li>在有map等原生组件时，依然会显示在最顶层，不会被遮挡</li>
<span class="mui-icon mui-icon-undo"></span>会弹出转发确认框； 你也可点击如下按钮，打开照片选择框：--> </ul>
</p> <p>另一方面，原生模式的actionsheet目前暂不支持样式自定义</p>
<p> <p>
<a id="picture-btn" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开Actionsheet</a> <a id="picture-btn" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开actionsheet</a>
</p> </p>
</div> </div>
</div> </div>
......
examples/hello-mui/examples/actionsheet.html
View file @ 3d43667e
...@@ -34,6 +34,13 @@ ...@@ -34,6 +34,13 @@
#info{ #info{
padding: 20px 10px ; padding: 20px 10px ;
} }
.des{
margin: .5em 0;
}
.des>li{
font-size: 14px;
color: #8f8f94;
}
</style> </style>
<script> <script>
mui.init(); mui.init();
...@@ -60,19 +67,22 @@ ...@@ -60,19 +67,22 @@
</nav> </nav>
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded"> <div class="mui-content-padded">
<p>Actionsheet一般从底部弹出，显示一系列可选择的操作按钮，供用户选择； ActionSheet可从任意位置触发， 点击本页面左下角 <p>actionsheet一般从底部弹出，显示一系列可选择的操作按钮，供用户选择； actionSheet可从任意位置触发， 点击本页面左下角
<span class="mui-icon mui-icon-trash"></span>会弹出删除信息确认框； 点击本页面右下角 <span class="mui-icon mui-icon-trash"></span>会弹出删除信息确认框； 点击本页面右下角
<span class="mui-icon mui-icon-undo"></span>会弹出转发确认框； 你也可点击如下按钮，打开照片选择框： <span class="mui-icon mui-icon-undo"></span>会弹出转发确认框； 你也可点击如下按钮，打开照片选择框：
</p> </p>
<p> <p>
<a href="#picture" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开Actionsheet</a> <a href="#picture" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开actionsheet</a>
</p>
<p>本页面为H5模式的Actionsheet演示示例，
H5模式的优点是可通过css自由定制展现样式，
缺点是不支持跨webview的遮罩，
当前页面使用了双webview的模板机制，故Actionsheet弹出后，顶部导航栏并未被遮罩层覆盖；
在单webview模式下，推荐使用H5模式的Actionsheet；
</p> </p>
<p>本页面为H5模式的actionsheet演示示例，该模式具有如下优点：</p>
<ul class="des"><li>可通过css自由定制展现样式</li></ul>
<p>另一方面，H5模式的actionsheet也具备如下缺点：</p>
<ul class="des">
<li>不支持覆盖顶部状态栏</li>
<li>不支持跨webview的遮罩</li>
<li>在有map等原生组件时，容易被遮挡</li>
</ul>
<p id="info"></p> <p id="info"></p>
</div> </div>
</div> </div>
......
examples/hello-mui/examples/tab-with-viewpagerindicator.html
View file @ 3d43667e
...@@ -22,6 +22,15 @@ ...@@ -22,6 +22,15 @@
.mui-bar-nav~.mui-content { .mui-bar-nav~.mui-content {
padding: 0; padding: 0;
} }
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-control-content { .mui-control-content {
background-color: white; background-color: white;
min-height: 215px; min-height: 215px;
...@@ -30,25 +39,22 @@ ...@@ -30,25 +39,22 @@
margin-top: 50px; margin-top: 50px;
} }
</style> </style>
</head>
<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 id="slider" class="mui-slider mui-fullscreen"> <div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"> <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item mui-active" href="#item1mobile"> <a class="mui-control-item" href="#item1mobile">
待办公文 待办公文
</a> </a>
<a class="mui-control-item" href="#item2mobile"> <a class="mui-control-item" href="#item2mobile">
已办公文 已办公文
</a> </a>
<a class="mui-control-item" href="#item3mobile"> <a class="mui-control-item" href="#item3mobile">
全部公文 全部公文
</a> </a>
</div> </div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div> <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group"> <div class="mui-slider-group">
...@@ -145,7 +151,26 @@ ...@@ -145,7 +151,26 @@
</div> </div>
</div> </div>
<h5 class="mui-content-padded">Color</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-primary" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" checked value="primary">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-positive" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" value="positive">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-negative" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" value="negative">
</div>
</form>
</div>
</div> </div>
<script> <script>
......
examples/hello-mui/list.html
View file @ 3d43667e
...@@ -29,17 +29,17 @@ ...@@ -29,17 +29,17 @@
</li> </li>
<li class="mui-table-view-cell mui-collapse"> <li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#"> <a class="mui-navigate-right" href="#">
Actionsheet（操作表） actionsheet（操作表）
</a> </a>
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/actionsheet.html"> <a class="mui-navigate-right" href="examples/actionsheet.html">
H5模式Actionsheet H5模式actionsheet
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/actionsheet-plus.html"> <a class="mui-navigate-right" href="examples/actionsheet-plus.html">
原生模式Actionsheet 原生模式actionsheet
</a> </a>
</li> </li>
</ul> </ul>
......
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