1. 程式人生 > >基於jquery的元件開發-mask

基於jquery的元件開發-mask

mask

一個常用的浮層元件,自己寫的,基於jquery,業務需求,樣式基於支付寶ui規範

mask.js 1.0版本

mask2.js 升級版本

效果截圖如下所示:

這裡寫圖片描述

這裡寫圖片描述

這裡寫圖片描述

呼叫方法如下:

  1. modal式呼叫

    $.mask({
      title: 'hello',
      text: '我是text資訊',
      type: 'normal', //[normal|alert|content]
      buttons: [{
          buttonTxt: '立即開啟1',
          buttonFn: function() {
              console.log(1)
          }
      }, {
          buttonTxt: '立即開啟2'
    , buttonFn: function() { console.log(2) } }] });
  2. 內容式呼叫

    $.mask({
    title: '請匯款至下方賬號:',
    text: [
        '<font color="#888">賬戶名:</font>上海限公司',
        '<font color="#888">賬戶號:</font>0207 000 9455',
        '<font color="#888">開戶號:</font>中國民黃浦支行'
    ],
    tips: [
        '·匯款時需備註資訊:貴公司名稱 + 訂單金額'
    , '·收款後的2個工作日內將向您的企業賬戶充值' ], type: 'content', //[normal|alert|content] buttons: [{ buttonTxt: '立即開啟1', buttonFn: function() { console.log(1) } }], close: true });
  3. toast式呼叫

    $.mask({
    type: 'alert',
    alertTime: 2000,
    alertTips: '請匯款至下方賬號:'
    })