ActionSheet
1、说明
1.1、示例：http://m.ydui.org/html/actionsheet.html
1.2、上拉菜单插件；借鉴 Bootstrap 先进思想，支持Data API 和 Javascript API方式调用；
2、调用
调用方式一（Javascript API）
通过调用 [open] 和 [close] 方法，实现开启关闭操作。
<div class="m-actionsheet" id="J_ActionSheet">
<a href="#" class="actionsheet-item">示例菜单 - Javascript API</a>
<a href="#" class="actionsheet-item">示例菜单 - Javascript API</a>
<a href="#" class="actionsheet-item">示例菜单 - Javascript API</a>
<a href="#" class="actionsheet-item">示例菜单 - Javascript API</a>
<a href="javascript:;" class="actionsheet-action" id="J_Cancel">取消</a>
</div>
<div class="m-button">
<button type="button" class="btn-block btn-warning" id="J_ShowActionSheet">ActionSheet(Javascript API调用)</button>
</div>
<script>
var $as = $('#J_ActionSheet');
$('#J_ShowActionSheet').on('click', function () {
$as.actionSheet('open');
});
$('#J_Cancel').on('click', function () {
$as.actionSheet('close');
});
/* 自定义事件 */
$as.on('open.ydui.actionsheet', function () {
console.log('打开了');
}).on('close.ydui.actionsheet', function () {
console.log('关闭了');
});
</script>调用方式二（Data API）
在元素上添加 data-ydui-actionsheet 属性，并指明 target 和 closeElement 参数；
target：触发展开目标元素；closeElement：关闭操作元素；
<div class="m-actionsheet" id="actionSheet">
<a href="#" class="actionsheet-item">示例菜单 - Data API</a>
<a href="#" class="actionsheet-item">示例菜单 - Data API</a>
<a href="#" class="actionsheet-item">示例菜单 - Data API</a>
<a href="#" class="actionsheet-item">示例菜单 - Data API</a>
<a href="javascript:;" class="actionsheet-action" id="cancel">取消</a>
</div>
<div class="m-button">
<button type="button" class="btn-block btn-primary" data-ydui-actionsheet="{target:'#actionSheet',closeElement:'#cancel'}">ActionSheet(Data API调用)</button>
</div>