Home » jQuery 外掛

[jQ]jqDnR 2007.08.19 +r2

[ 日期： | 瀏覽：6,174 | 迴響：4 ]
範例 1
請協助我把這個效果加到我的網站 (只要 900 元)
沒錯!只要 900 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

jqDnR 2007.08.19 +r2

在 Web 2.0 未開發火紅前，如果那時要做個可拖移及縮放的模擬視窗可是很累的人，而現在已經有很多方便的套件跟外掛來讓開發者直接套用，讓各位可以準時回家下班哩！
jqDnR 是一個集拖移及縮放於一身的套件，並能控制指定的區塊才能觸發拖移及縮放的動作。

套件名稱：jqDnR
套件版本：2007.08.19 +r2
作者網站：http://dev.iceburg.net/jquery/jqDnR/
套件網址：http://plugins.jquery.com/project/jqDnR
發佈日期：2007-08-19
檔案大小：5.78 KB
檔案下載：jqDnR.js

方法說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7

// 幫指定的元素加上縮放的功能
// 如果有給縮放的處理元素時, 則要透過指定的元素才能縮放
$(selector1).jqResize(selector2);
 
// 幫指定的元素加上拖移的功能
// 如果有給拖移的處理元素時, 則要透過指定的元素才能拖移
$(selector1).jqDrag(selector2);

使用範例：

檢視原始碼 JavaScript
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqDnR.js"></script>
<style type="text/css">
	.jqHandle {
	   background: red;
	   height: 15px;
	}
	.jqDrag {
	  width: 100%;
	  cursor: move;
	}
	.jqResize {
	   width: 15px;
	   position: absolute;
	   bottom: 0;
	   right: 0;
	   cursor: se-resize;
	}
	.jqDnR {
		z-index: 3;
		position: relative;
		width: 180px;
		font-size: 0.77em;
		color: #618d5e;
		margin: 5px 10px 10px 10px;
		padding: 8px;
		background-color: #EEE;
		border: 1px solid #CCC;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 幫 #ex1 加上縮放的功能
		$('#ex1').jqResize('.jqResize');
 
		// 幫 #ex2 加上拖移的功能
		$('#ex2').css('opacity', 0.6).jqDrag();
 
		// 幫 #ex3 加上拖移及縮放的功能
		$('#ex3').jqDrag('.jqDrag').jqResize('.jqResize');
	});
</script>
 
<body>
	<div id="ex1" class="jqDnR">
		我是一個展示縮放用的區塊<br />
		您可以透過右下的紅色部份來"縮放"我
		<div class="jqHandle jqResize"></div>
	</div>
 
	<div id="ex2" class="jqDnR jqDrag">
		我是一個展示拖移用的區塊<br />
		您可以隨意的"移動"我<br />
		注意唷~我本身的透明度效果一樣是存在的
	</div>
 
	<div id="ex3" class="jqDnR">
		<div class="jqHandle jqDrag"></div>
		<br />
		我是一個展示縮放及拖移用的區塊<br />
		請拖移上方的紅色部份來移動我<br />
		縮放我則是透過右下的紅色部份
		<div class="jqHandle jqResize"></div>
	</div>
</body>

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

4 筆針對 [jQ]jqDnR 2007.08.19 +r2 的迴響

    • 問題我已找到並修正了，在於某次 jQuery 改版後，單純使用 $() 並不等同 $(document) 了，所以原本外掛中的兩處修正後即可正常使用。

發表迴響