jQuery仿IOS彈出框插件
這款彈出框插件是本人自己模仿IOS原生彈出框?qū)懙囊粋€(gè)自定義插件,包括Alert彈出框和Confirm確認(rèn)框,支持標(biāo)題,內(nèi)容,按鈕文字以及按鈕回調(diào)函數(shù)自定義,使用非常簡單,可以進(jìn)行擴(kuò)展,下面是插件使用方法,一看就懂:
首先導(dǎo)入jquery庫和插件庫以及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è)
效果展示
是不是使用起來非常簡單 -_-
下載鏈接:https://pan.baidu.com/s/1pLJJky3
以上所述是小編給大家介紹的jQuery仿IOS彈出框插件,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Jquery動態(tài)添加及刪除頁面節(jié)點(diǎn)元素示例代碼
這篇文章主要介紹了Jquery如何動態(tài)添加及刪除頁面節(jié)點(diǎn)元素,示例代碼如下,需要的朋友不要錯(cuò)過2014-06-06如何使用jquery easyui創(chuàng)建標(biāo)簽組件
這篇文章主要介紹了如何使用jquery easyui創(chuàng)建標(biāo)簽組件的相關(guān)資料,需要的朋友可以參考下2015-11-11Jquery操作Select 簡單方便 一個(gè)js插件搞定
Jquery其實(shí)本身可以操作select表單,但是由于比較反鎖,沒有.net 控件那樣去操作方便,我在網(wǎng)上Google了一會,發(fā)現(xiàn)了一個(gè)不錯(cuò)的專門操作select的插件,很好,使用過了,感覺蠻不錯(cuò)的。2009-11-1111個(gè)用于提高排版水平的基于jquery的文字效果插件
我們都知道,在傳統(tǒng)的排版當(dāng)中使用DIV+CSS來實(shí)現(xiàn)的話是很困難的,今天使用jquery插件,你可以實(shí)現(xiàn)卓越的排版效果,專門用于為您提高您的排版水平2012-09-09JQuery實(shí)現(xiàn)倒計(jì)時(shí)按鈕的實(shí)現(xiàn)代碼
頁面中需要實(shí)現(xiàn)某個(gè)按鈕點(diǎn)擊完后,禁用它,并顯示倒計(jì)時(shí)。這個(gè)默認(rèn)是3秒,代碼很簡單2012-03-03jQuery中outerWidth()方法用法實(shí)例
這篇文章主要介紹了jQuery中outerWidth()方法用法,實(shí)例分析了outerWidth()方法的功能、定義及獲取第一個(gè)匹配元素外部寬度的使用技巧,需要的朋友可以參考下2015-01-01