Rumah > hujung hadapan web > tutorial js > jQuery prompt plug-in alertify penggunaan guide_jquery

jQuery prompt plug-in alertify penggunaan guide_jquery

WBOY
Lepaskan: 2016-05-16 16:03:02
asal
2046 orang telah melayarinya

1. maklumkan fungsi pemalam

Terutamanya melaksanakan fungsi gesaan, yang digunakan untuk menggantikan makluman, mengesahkan, gesaan dalam js dan memaparkan kotak gesaan mesra

2. Cara menggunakan alertify

1. Fail digunakan
Terutamanya gunakan tiga fail dan dua css (alertify.core.css, alertify.default.css) untuk menetapkan gaya kotak gesaan. Js (alertify.min.js atau alertify.js), digunakan untuk melaksanakan fungsi kotak gesaan.

2. Laksanakan kod kotak gesaan
Alertif adalah sangat mudah untuk digunakan Langkah-langkah utama ialah: permulaan (mulakan alertify) -> mengikat (peristiwa mengikat)

Seperti melaksanakan kotak gesaan ringkas, kotak pengesahan dan kotak gesaan

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

var

$ = function (id) {

  return document.getElementById(id);

},

//初始化操作

reset = function () {

  alertify.set({

    labels : {

      ok   : "确认",

      cancel : "取消"

    },

    delay : 5000,

    buttonReverse : false,

    buttonFocus  : "ok"

  });

};

//绑定

$("alert").onclick = function () {

   reset();

   alertify.alert("提示框");

   return false;

};

//绑定

$("confirm").onclick = function () {

   reset();

   alertify.confirm("确认框", function (e) {

     if (e) {

       alertify.success("点击确认");

     } else {

       alertify.error("点击取消");

     }

   });

   return false;

};

//绑定

$("prompt").onclick = function () {

  reset();

  alertify.prompt("提示输入框", function (e, str) {

    if (e) {

      alertify.success("点击确认,输入内容为: " + str);

    } else {

      alertify.error("点击取消");

    }

  }, "默认值");

  return false;

};

Salin selepas log masuk

Paparkan hasil (kotak gesaan input):

4. maklumkan ubah suai gaya
Ia terutamanya mengubah suai dua fail css (alertify.core.css, alertify.default.css), yang juga boleh ditimpa. Jika anda menambah

pada halaman

1

2

3

4

5

6

7

.alertify{

  width:350px;

  margin-left: -205px;

  border:2px solid #4ba9e6;

  background:#f3faff;

  border-radius:0;

}

Salin selepas log masuk

Paparkan hasil selepas pengubahsuaian:

maklumkan arahan penggunaan

alertify ialah pemalam yang dibangunkan oleh html5 css3, jadi ia menyokong penyemak imbas html5 css3 dengan sempurna. Semasa proses ujian, kesan paparan alertify adalah sempurna dalam penyemak imbas Chrome dan Firefox, tetapi dalam IE8, kesan paparan berbeza, seperti sudut bulat, bayang-bayang, kesan khas animasi, dll. tidak akan dipaparkan.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan