jQuery拖拽 & 彈出層 介紹與示例
iDrag & iDialog 介紹
特點(diǎn)：
iDialog.js依賴于jquery編寫的簡(jiǎn)單易用的對(duì)話框，同時(shí)還可以通過添加css3，改變對(duì)話框的展現(xiàn)動(dòng)畫。提供了兩個(gè)方法：
•1、拖拽函數(shù) iDrag() 或 $.drag();
•2、對(duì)話框函數(shù) iDialog() 或 $.dialog();
跨平臺(tái)兼容:
兼容：IE6+、Firefox、Chrome等主流瀏覽器(其它暫時(shí)沒條件測(cè)試)。并且IE6下也能支持現(xiàn)代瀏覽器的靜止定位(fixed)、覆蓋下拉控件。
漸進(jìn)增強(qiáng)的體驗(yàn):
確保IE家族功能完善的前提下，現(xiàn)代瀏覽器適當(dāng)?shù)奶砑觕ss3增強(qiáng)體驗(yàn)，如陰影、圓角、和scale show、super scale show 、right slide show動(dòng)畫,動(dòng)畫亦可自己修改css文件進(jìn)行擴(kuò)展。
豐富的接口:
1．$.drag()函數(shù)，提供了拖拽范圍設(shè)置，拖拽前，拖拽過程，拖拽結(jié)束的回調(diào)函數(shù)； 2．$.dialog()函數(shù)，提供了css3展示特效、大小、位置、顯示、關(guān)閉和外部訪問接口等，更多參考后面的API。
快速入門：
<script src="lib/js/jquery-1.8.3.min.js"></script>
<script src="lib/js/jquery.idialog.js" dialog-theme="default"></script>
•jquery.iDialog.js是依賴jquery實(shí)現(xiàn)的，所以加載它之前必須加載jQuery;
•dialog-theme="default"表示將自動(dòng)加載default.css樣式表;
•default.css必須保存在theme文件夾里，且該文件夾與jquery.iDialog.js需在同一目錄下。
iDrag()完整使用例子:
JS代碼：
var log = $('#drag-demo-log');
iDrag({
target:'#drag-demo',
min:{x:0, y:0},
max:{x:658, y:170},
start: function (pos) {
log.html('start:x='+pos.x+', y='+pos.y);
},
move: function(pos){
log.html('move:left='+pos.x+', top='+pos.y);
},
end: function(pos){
log.html('end:left='+pos.x+', top='+pos.y);
}
});
一個(gè)iDialog()使用例子:
iDialog({
title:'Hello World',
id:'DemoDialog ',
content:'<p>大家好：<br> 我是minDialog</p>',
lock: true,
width:500,
fixed: true,
height:300
});
相關(guān)文章
微信公眾號(hào)服務(wù)器驗(yàn)證Token步驟圖解
這篇文章主要介紹了微信公眾號(hào)服務(wù)器驗(yàn)證Token步驟圖解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
BootStrap智能表單實(shí)戰(zhàn)系列(三)分塊表單配置詳解
這篇文章主要介紹了BootStrap智能表單實(shí)戰(zhàn)系列(三)分塊表單配置詳解的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
js列舉css中所有圖標(biāo)的實(shí)現(xiàn)代碼
最近在做一個(gè)通用的配置模塊。配置模塊中必然要對(duì)系統(tǒng)的菜單、功能模塊、權(quán)限資源等進(jìn)行配置，為了更好的用戶體驗(yàn)，圖標(biāo)是必不可少的！2011-07-07
這篇文章主要給大家介紹了關(guān)于JavaScript中事件與異常捕獲的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要為大家詳細(xì)介紹一下JavaScript中的作用域鏈與閉包的使用，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下2022-11-11
使用JavaScript實(shí)現(xiàn)一個(gè)炫酷的羅盤時(shí)鐘
在探究前端動(dòng)畫時(shí),想到之前在鎖屏壁紙看到的羅盤時(shí)鐘,看著很是炫酷,于是說干就干,下面就跟隨小編一起來學(xué)習(xí)一下如何使用JS實(shí)現(xiàn)一個(gè)炫酷的羅盤時(shí)鐘效果吧2024-02-02
關(guān)于Vue中postcss-pxtorem的使用詳解
在Web開發(fā)領(lǐng)域,響應(yīng)式設(shè)計(jì)已經(jīng)成為一個(gè)不可或缺的趨勢(shì),PostCSS插件——postcss-pxtorem的出現(xiàn)為我們提供了一種更加智能和高效的解決方案,本文將深入探討postcss-pxtorem的使用,包括其背后的原理、配置選項(xiàng)、實(shí)際應(yīng)用中的注意事項(xiàng)等方面,需要的朋友可以參考下2023-12-12
javascript算法之?dāng)?shù)組反轉(zhuǎn)
這篇文章主要介紹了javascript算法之?dāng)?shù)組反轉(zhuǎn)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
Ionic2系列之使用DeepLinker實(shí)現(xiàn)指定頁面URL
這篇文章主要介紹了Ionic2系列之使用DeepLinker實(shí)現(xiàn)指定頁面URL的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
狼人殺是一款多人參與的，通過語言描述推動(dòng)、較量口才和分析判斷能力的策略類桌面游戲。本文將利用小程序?qū)崿F(xiàn)這一游戲，需要的可以參考一下2022-03-03