jQuery拖拽 & 彈出層 介紹與示例
iDrag & iDialog 介紹
特點：
iDialog.js依賴于jquery編寫的簡單易用的對話框，同時還可以通過添加css3，改變對話框的展現(xiàn)動畫。提供了兩個方法：
•1、拖拽函數(shù) iDrag() 或 $.drag();
•2、對話框函數(shù) iDialog() 或 $.dialog();
跨平臺兼容:
兼容：IE6+、Firefox、Chrome等主流瀏覽器(其它暫時沒條件測試)。并且IE6下也能支持現(xiàn)代瀏覽器的靜止定位(fixed)、覆蓋下拉控件。
漸進增強的體驗:
確保IE家族功能完善的前提下，現(xiàn)代瀏覽器適當?shù)奶砑觕ss3增強體驗，如陰影、圓角、和scale show、super scale show 、right slide show動畫,動畫亦可自己修改css文件進行擴展。
豐富的接口:
1．$.drag()函數(shù)，提供了拖拽范圍設置，拖拽前，拖拽過程，拖拽結(jié)束的回調(diào)函數(shù)； 2．$.dialog()函數(shù)，提供了css3展示特效、大小、位置、顯示、關閉和外部訪問接口等，更多參考后面的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實現(xiàn)的，所以加載它之前必須加載jQuery;
•dialog-theme="default"表示將自動加載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);
}
});
一個iDialog()使用例子:
iDialog({
title:'Hello World',
id:'DemoDialog ',
content:'<p>大家好：<br> 我是minDialog</p>',
lock: true,
width:500,
fixed: true,
height:300
});
相關文章
JavaScript寫的一個DIV 彈出網(wǎng)頁對話框
自己整理得一個JavaScript寫的一個DIV 彈出網(wǎng)頁對話框2009-08-08
這篇文章主要介紹了JS實現(xiàn)iframe自適應高度的方法,結(jié)合實例形式分析了JS實現(xiàn)iframe高度自適應的實現(xiàn)技巧,并給出了項目示例供大家參考,需要的朋友可以參考下2017-01-01
這篇文章主要從作用域鏈談閉包，閉包（closure）是Javascript語言的一個難點，也是它的特色，很多高級應用都要依靠閉包實現(xiàn)，本文針對閉包進行學習,需要的朋友可以參考下2015-12-12
本篇文章主要介紹了bootstrap實現(xiàn)動態(tài)進度條效果，進度條可以加強應用的用戶體驗效果，看到數(shù)字，具有一定的參考價值，有興趣的可以了解一下。2017-03-03
Three.js是一個3DJavaScript庫，基于右手坐標系，可以創(chuàng)建簡單或是比較復雜的三維圖形并應用豐富多彩的紋理和材質(zhì)，可以添加五光十色的光源，可以在3D場景中移動物體或是添加腳本動畫等等。本文介紹了利用three.js如何畫一個3D立體的正方體的方法，需要的可以參考下。2017-11-11
BootStrap selectpicker后臺動態(tài)綁定數(shù)據(jù)的方法
這篇文章主要為大家詳細介紹了BootStrap selectpicker后臺動態(tài)綁定數(shù)據(jù)的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家詳細介紹了微信小程序自定義select下拉選項框的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
javascript刪除option選項的多種方法總結(jié)
這篇文章主要是對javascript刪除option選項的多種方法進行了詳細的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
JavaScript 錯誤處理與調(diào)試經(jīng)驗總結(jié)
在Web開發(fā)過程中，編寫JavaScript程序時或多或少會遇到各種各樣的錯誤，有語法錯誤，邏輯錯誤。如果是一小段代碼，可以通過仔細檢查來排除錯誤，但如果程序稍微復雜點，調(diào)試JS便成為一個令Web開發(fā)者很頭痛的問題。2010-08-08
這篇文章主要介紹了JS工廠模式開發(fā),結(jié)合具體實踐案例形式分析了基于javascript工廠模式實現(xiàn)的輪播功能相關操作技巧,需要的朋友可以參考下2019-10-10