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

YDUI Touch Docs 返回首页

ActionSheet

1、说明

1.1、示例:http://m.ydui.org/html/actionsheet.html

1.2、上拉菜单插件;借鉴 Bootstrap 先进思想,支持Data API 和 Javascript API方式调用;

2、自定义事件(Data API 和 Javascript API都支持)

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

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

3、调用方式一(Javascript API)

3.1、通过调用[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 src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="path/build/js/ydui.js"></script>
<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>

4、调用方式二(Data API)

4.1、在触发元素上添加data-ydui-actionsheet属性,并指明target和closeElement参数;

4.1.1、target:触发展开目标元素;

4.1.2、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>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="path/build/js/ydui.js"></script>

5、参与讨论

5.1、有任何使用问题,请在评论中留言,也欢迎大家发表意见、建议。感谢您对YDUI的支持。