在 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> |
似乎必須是jquery-1.3.2 這個版本才會運行,firefug又不會秀錯,不知道是什麼原因呢。
問題我已找到並修正了,在於某次 jQuery 改版後,單純使用 $() 並不等同 $(document) 了,所以原本外掛中的兩處修正後即可正常使用。
新增外包案件為何無法使用
此功能要會員才能新增,所以得麻煩先利用右上角的功能來加入。