當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

利用jQuery UI为CMS网站实现拖拽布局效果，秒杀table布局

發(fā)布時間：2024/3/7 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了利用jQuery UI为CMS网站实现拖拽布局效果，秒杀table布局小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1?實現(xiàn)效果

? ? 對于使用過CMS系統(tǒng)制作網站的人應該都清楚，制作網站過程有一個重要的步驟就是制作頁面布局。目前，實現(xiàn)頁面布局有兩種方式：table與div。這兩種方式各有其優(yōu)劣之處。

? ? Table：

? ? 優(yōu)勢：使用簡單，使用表格進行布局順理成章，概念和效果圖理解起來很簡單，制作也方便。

? ? 劣勢：表格布局比較固定，布局效果控制的比較死，一些較為特殊的效果、層疊效果等比較難以實現(xiàn)。

? ? Div：

? ? 優(yōu)勢：布局效果靈活，div能輕易的控制布局位置，浮動效果等。

? ? 劣勢：操作較為復雜，需要前端布局設計人員對div的特性、層疊樣式等都較為熟悉。

? ? 可以看出，其實table和div這兩種布局方式是互為優(yōu)劣的。但是目前來說div越來越成為一種主流設計方式，其布局效果靈活、樣式新穎的特點也越來越受到青睞。而且這里我們所講的，如果你想使用拖拽的方式輕松實現(xiàn)頁面布局，那非div不可。如圖：

? ? 如下圖，可以將布局div拖入布局區(qū)，使用鼠標拖拽隨意移動其位置，同時可以將其選中，使用鍵盤進行各個方向的位置移動，還可以delete鍵將其刪除。另外，還可以使用鼠標拖拽其右下角改變div的大小。

? ? 雙擊某個div后，會彈出屬性對話框。可以輸入div的寬度，高度，還可以在文本區(qū)中加入div中的內容。

2?使用工具

? ? 整個工具使用jQueryUI來制作。制作過程用到了jQueryUI的包含的以下成員：

? ? 1)?Accordion

? ? 用于實現(xiàn)左側楓葉菜單，div來源基于此處。

? ? 2)?Draggable

? ? 拖拽項即使用Draggable來實現(xiàn)。

? ? 3)?Droppable

? ? Droppable用來實現(xiàn)布局釋放區(qū)。

? ? 4)?Resizable

? ? Resizable用來實現(xiàn)對div大小的拖拽設置效果。

? ? 5)?Dialog

? ? Dialog用來制作雙擊div時彈出的屬性對話框。?

3?實現(xiàn)過程

3.1?增加左側折疊導航

? ? 增加左側折疊導航，用到了jQueryUI中的Accordion，效果如圖：

? ? 代碼：

//增加折疊效果$("#catalog").accordion( {heightStyle : "fill"});//使<li>標簽中的元素可拖拽$("#catalog li").draggable( {appendTo : "body",//用來指定控件在拖拽過程中ui.helper的容器, 默認情況下, ui.helper使用和初始定義的draggable相同的容器, 也就是其父元素.默認值 "parent"helper : "clone" //拖拽元素時的顯示方式。（如果是函數，必須返回值是一個DOM元素）可選值："original", "clone", Function默認值 "original"});

3.2?設置布局畫布

? ? 列表項已經可以拖拽了，現(xiàn)在還需要有地方可以接收這些元素。我們要實現(xiàn)的效果是，從左側列表拖出，放入右面的布局畫布區(qū)域，因此要將布局畫布區(qū)域設置為接收區(qū)，jQueryUI提供了Droppable來實現(xiàn)這個效果：

? ? 這里需要說明：

????1.?為了使每個被拖出來的div的id都不一樣，設置了一個變量“bordNum”來標識。

????2.?每個被拖出來的div，也就是ss，需要再次設置為Droppable，才能使其在畫布中也能夠被拖動。

? ? 3.?為了可以使用鼠標選中某個div，需要為div動態(tài)增加樣式，而且要注意獲取對象并動態(tài)增加了樣式之后就要通過“return?false”來阻止事件冒泡。

? ? 4.?剛拖入時，放入位置還要考慮到滾動條的因素。

????5.?通過設置div為Resizable使其可以被拖拽調整大小。

3.3?鍵盤動作

? ? 鍵盤動作主要有選中后：

? ? 向上移動一個像素；

? ? 向下移動一個像素；

? ? 向左移動一個像素；

? ? 向右移動一個像素；

? ? 刪除。

? ? 代碼：

$(document).ready(function() {divFullScreen();//頁面加載時全屏$(window).bind('resize', function() {divFullScreen();//最大化，還原窗口大小時DIV尺寸跟著變化，不過最好在CSS里給這個DIV加個min-width等于html,body的最小寬度。});//定義鍵盤移動div位置事件$(document).keydown(function(event) {var x = $(".selected").parent().position().top;//水平方向位移var y = $(".selected").parent().position().left;//垂直方向位移switch (event.which) {//case 37: y = y - 10; $("border_1").css("left", y + "px"); break;case 37:if (y >= 1) {//alert(y);y = y - 1;//alert(y);$(".selected").parent().css("left", y + "px");} else {y = 0;}break;case 38:if (x > 1) {x = x - 1;$(".selected").parent().css("top", x + "px");} else {x = 0;}break;case 39:if (y < $("#pageAreaWrapper").width()- $(".selected").width()) {y = y + 1;$(".selected").parent().css("left", y + "px");} else {y = $("#pageAreaWrapper").width();}break;case 40:x = x + 1;$(".selected").parent().css("top", x + "px");break;case 46:$(".selected").parent().remove();break;default:break;}//返回false是為了停止冒泡，以便點擊鍵盤向下鍵時頁面不隨著移動return false;});});

總結

以上是生活随笔為你收集整理的利用jQuery UI为CMS网站实现拖拽布局效果，秒杀table布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。