码迷,mamicode.com
首页 > 其他好文 > 详细

Framework7学习笔记之 常用弹窗(Modal)

时间:2018-02-21 23:05:25      阅读:547      评论:0      收藏:0      [点我收藏+]

标签:show   color   -o   通知   cancel   settime   自定义   函数   function   

 

一:弹窗

    Modal 是从App的主要内容区域上弹出的一小块内容块,经常被用来向用户询问信息,通知或警告用户。

    弹窗一般在js中定义,通过api,设定弹窗的标题、内容、点击回调函数。

 

二:Alert

    最简单的弹窗,用于提示或警告,只有一个ok选项。

$$(‘.alert-text-title-callback‘).on(‘click‘, function () {
    myApp.alert(‘提示内容‘, ‘弹窗标题‘, function () {
        选项点击回调函数。
    });
});
 

 

三:Confirm

     确认弹窗,用于确认某些操作,有 ok、cancel两个选项。

$$(‘.confirm-title-ok-cancel‘).on(‘click‘, function () {
    myApp.confirm(‘提示信息‘, ‘弹窗标题‘, 
      function () {
        点击ok选项的回调函数
      },
      function () {
        点击cancel选项的回调函数
      }
    );
}); 

 

四:Prompt

    输入弹窗,用于提醒用户输入一些数据。

$$(‘.prompt-title-ok-cancel‘).on(‘click‘, function () {
    myApp.prompt(‘弹窗信息‘, ‘弹窗标题‘, 
      function (value) {
       ok选项回调函数,value是输入值
      },
      function (value) {
        cancel选项回调函数,value是输入值
      }
    );
}); 

 

五:indicator

    指示器,用于在执行一些耗时操作时作提示用。

$$(‘.open-indicator‘).on(‘click‘, function () {
    myApp.showIndicator();//显示指示器
    setTimeout(function () {
        myApp.hideIndicator();
    }, 延时时间); //延时关闭
});

 

六:自定义弹窗

    自定义弹窗可以:自定义标题、文本、按钮数量以及各个按钮的点击函数。

    【其中,标题、文本可以用html字符串来实现样式,如:tab效果等】

$$(‘.open-3-modal‘).on(‘click‘, function () {
  myApp.modal({
    title:  ‘标题‘,
    text: ‘内容‘,
    buttons: [
      {
        text: ‘按钮文本‘,
        onClick: function() {
          点击事件函数
        }
      },
    ...
    ]
  })
});

 

Framework7学习笔记之 常用弹窗(Modal)

标签:show   color   -o   通知   cancel   settime   自定义   函数   function   

原文地址:https://www.cnblogs.com/ygj0930/p/8457546.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!