jQuery仿IOS彈出框插件
這款彈出框插件是本人自己模仿IOS原生彈出框?qū)懙囊粋€(gè)自定義插件,包括Alert彈出框和Confirm確認(rèn)框,支持標(biāo)題,內(nèi)容,按鈕文字以及按鈕回調(diào)函數(shù)自定義,使用非常簡(jiǎn)單,可以進(jìn)行擴(kuò)展,下面是插件使用方法,一看就懂:
首先導(dǎo)入jquery庫(kù)和插件庫(kù)以及css文件
<script src="./jquery-1.8.3.min.js"></script> <script src="./jquery.confirm-1.1.js"></script> <link href="./jquery.confirm-1.1.css" rel="external nofollow" rel='stylesheet' type='text/css' />
Alert彈出框快速使用
$.alert('Are you sure to continue?'); --內(nèi)容支持html代碼 $.alert({ title: 'Alert彈出框!', --標(biāo)題 默認(rèn)標(biāo)題(溫馨提示) content: 'Are you sure to continue?', --內(nèi)容 });
Alert回調(diào)彈出框使用
$.alert({ title: 'Alert回調(diào)彈出框!', content: 'alert帶回調(diào)函數(shù),點(diǎn)擊確定按鈕觸發(fā)回調(diào)函數(shù)', buttons: { ok: { text: '好', --按鈕標(biāo)題 action: function () { --回調(diào)事件 alert("按鈕回調(diào)函數(shù)被執(zhí)行"); } } } });
Confirm確認(rèn)框使用
$.confirm('Are you sure to continue?'); $.confirm({ title: 'Confirm確認(rèn)框!', content: 'Are you sure to continue?', });
Confirm回調(diào)確認(rèn)框使用
$.alert({ title: 'Confirm回調(diào)確認(rèn)框!', content: 'Confirm確認(rèn)框,點(diǎn)擊按鈕觸發(fā)回調(diào)函數(shù)', buttons: { ok: { --確定按鈕 text: '確定', action: function () { alert("確定按鈕回調(diào)函數(shù)被執(zhí)行"); } }, close: { --關(guān)閉按鈕 text: '關(guān)閉', action: function () { alert("關(guān)閉按鈕回調(diào)函數(shù)被執(zhí)行"); } } } });
確認(rèn)框按鈕可以放置多個(gè)
效果展示
是不是使用起來(lái)非常簡(jiǎn)單 -_-
下載鏈接:https://pan.baidu.com/s/1pLJJky3
以上所述是小編給大家介紹的jQuery仿IOS彈出框插件,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Jquery動(dòng)態(tài)添加及刪除頁(yè)面節(jié)點(diǎn)元素示例代碼
這篇文章主要介紹了Jquery如何動(dòng)態(tài)添加及刪除頁(yè)面節(jié)點(diǎn)元素,示例代碼如下,需要的朋友不要錯(cuò)過(guò)2014-06-06如何使用jquery easyui創(chuàng)建標(biāo)簽組件
這篇文章主要介紹了如何使用jquery easyui創(chuàng)建標(biāo)簽組件的相關(guān)資料,需要的朋友可以參考下2015-11-11Jquery操作Select 簡(jiǎn)單方便 一個(gè)js插件搞定
Jquery其實(shí)本身可以操作select表單,但是由于比較反鎖,沒(méi)有.net 控件那樣去操作方便,我在網(wǎng)上Google了一會(huì),發(fā)現(xiàn)了一個(gè)不錯(cuò)的專門(mén)操作select的插件,很好,使用過(guò)了,感覺(jué)蠻不錯(cuò)的。2009-11-11基于jquery的滾動(dòng)條滾動(dòng)固定div(附演示下載)
今天與大家分享一下我寫(xiě)的一個(gè)滾動(dòng)條滾動(dòng)固定div的例子,現(xiàn)在很多地方都可以看到這樣的效果2012-10-1011個(gè)用于提高排版水平的基于jquery的文字效果插件
我們都知道,在傳統(tǒng)的排版當(dāng)中使用DIV+CSS來(lái)實(shí)現(xiàn)的話是很困難的,今天使用jquery插件,你可以實(shí)現(xiàn)卓越的排版效果,專門(mén)用于為您提高您的排版水平2012-09-09JQuery實(shí)現(xiàn)倒計(jì)時(shí)按鈕的實(shí)現(xiàn)代碼
頁(yè)面中需要實(shí)現(xiàn)某個(gè)按鈕點(diǎn)擊完后,禁用它,并顯示倒計(jì)時(shí)。這個(gè)默認(rèn)是3秒,代碼很簡(jiǎn)單2012-03-03jQuery中outerWidth()方法用法實(shí)例
這篇文章主要介紹了jQuery中outerWidth()方法用法,實(shí)例分析了outerWidth()方法的功能、定義及獲取第一個(gè)匹配元素外部寬度的使用技巧,需要的朋友可以參考下2015-01-01