嗞嗞嗞~ 你的浏览器仿佛在对我微笑!

YDUI Touch Docs 返回首页

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 属性,并指明 targetcloseElement 参数;

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>

3、自定义事件(Data API 和 Javascript API均支持)

3.1、[open.ydui.actionsheet]:打开时立即触发;

3.2、[close.ydui.actionsheet]:关闭时立即触发;