js弹出层插件action-sheet

所属分类:UI-弹出层

 39282  328  查看评论 (9)
分享到微信朋友圈
X
js弹出层插件action-sheet ie兼容9

这是一个类似IOS中ActionSheet的按钮组控件。

除了构造函数ActionSheet以外,它包含以下实例方法:

  • show

  • hide

  • update

安装

如果在Node.js环境中使用,通过以下命令安装它。

npm i -DS action-sheet
npm

引用

标签引入:

<script src="build/action-sheet.min.js"></script>

如果通过script方式引入,你可以通过全局变量ActionSheet来调用它。

CommonJS/CMD/AMD引入:

var ActionSheet = require('action-sheet');

ES6引入:

import ActionSheet from 'action-sheet';

创建ActionSheet

var as = new ActionSheet({
    buttons: {
        '点我': function(e){
            // 点击按钮的回调事件
        },
        '百度': 'http://baidu.com/', // 点击按钮跳转链接
    }
});

show

显示已经创建的ActionSheet实例

as.show();

hide

隐藏

as.hide();

update

更新按钮组内容

as.update({
    '重启手机': function(e){
        // 点击按钮的回调事件
    },
    '立即关机': function(e){
        // 点击按钮的回调事件
    }
});


相关插件-弹出层

flavr―超级漂亮的jQuery扁平弹出对话框

flavr是一个时尚的扁平弹出对话框为您的下一个网站。flavr是响应设计布局,能够适应任何屏幕大小。得到最好的用户体验,使用流行的animate.css动画,最重要的是,flavr可以运行在任何新的浏览器IE8(+),任何设备和屏幕大小。
  弹出层
 143146  1131

jQuery html5爆裂式登录效果

HTML5爆裂式关闭窗口动画登录模板,关闭窗口撕开动画效果。
  弹出层
 50788  577

jquery鼠标悬停滑动切换特效

jquery鼠标悬停滑动切换特效
  弹出层
 32470  387

响应式模态框

简洁、弹出效果好的响应式模态框,适用移动端
  弹出层
 36511  436

讨论这个项目(9)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    旮旯/内么冷 0
    2018/10/14 10:47:29
    如何给按钮设置对应的ID呢? 回复
    ?で懒ぐ猫べ 0
    2018/6/28 16:15:33
    我发现把 const 改成 var 就好用了。。。 回复
    ma1305249012 0
    2017/8/10 15:12:21

    IOS 点击事件会穿透, 

    回复
    wesleyzhang 0
    2017/8/4 11:48:42

    为什么ios不能弹出?

    回复
    yesfly 0
    2016/12/19 12:12:59

    ISO,部分非原生安卓浏览器报错

        Mamba、0
        2017/4/17 15:27:15

        是啊,致命的BUG。

    回复
    yBoy 0
    2016/12/16 16:12:56

    不能根据屏幕调整而自动缩放,这点很不好

        天气代表心情1
        2017/1/4 14:01:50

        给他加一个响应式标签:display:-webkit-flex

        最后的茶叶0
        2017/2/22 10:28:36

        样式可以改,套个bootstrap,瞬间变响应式

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复