利用jQuery UI为CMS网站实现拖拽布局效果，秒杀table布局
1?實(shí)現(xiàn)效果
? ? 對(duì)于使用過(guò)CMS系統(tǒng)制作網(wǎng)站的人應(yīng)該都清楚，制作網(wǎng)站過(guò)程有一個(gè)重要的步驟就是制作頁(yè)面布局。目前，實(shí)現(xiàn)頁(yè)面布局有兩種方式：table與div。這兩種方式各有其優(yōu)劣之處。
? ? Table：
? ? 優(yōu)勢(shì)：使用簡(jiǎn)單，使用表格進(jìn)行布局順理成章，概念和效果圖理解起來(lái)很簡(jiǎn)單，制作也方便。
? ? 劣勢(shì)：表格布局比較固定，布局效果控制的比較死，一些較為特殊的效果、層疊效果等比較難以實(shí)現(xiàn)。
? ? Div：
? ? 優(yōu)勢(shì)：布局效果靈活，div能輕易的控制布局位置，浮動(dòng)效果等。
? ? 劣勢(shì)：操作較為復(fù)雜，需要前端布局設(shè)計(jì)人員對(duì)div的特性、層疊樣式等都較為熟悉。
? ? 可以看出，其實(shí)table和div這兩種布局方式是互為優(yōu)劣的。但是目前來(lái)說(shuō)div越來(lái)越成為一種主流設(shè)計(jì)方式，其布局效果靈活、樣式新穎的特點(diǎn)也越來(lái)越受到青睞。而且這里我們所講的，如果你想使用拖拽的方式輕松實(shí)現(xiàn)頁(yè)面布局，那非div不可。如圖：
? ? 如下圖，可以將布局div拖入布局區(qū)，使用鼠標(biāo)拖拽隨意移動(dòng)其位置，同時(shí)可以將其選中，使用鍵盤(pán)進(jìn)行各個(gè)方向的位置移動(dòng)，還可以delete鍵將其刪除。另外，還可以使用鼠標(biāo)拖拽其右下角改變div的大小。
? ? 雙擊某個(gè)div后，會(huì)彈出屬性對(duì)話(huà)框。可以輸入div的寬度，高度，還可以在文本區(qū)中加入div中的內(nèi)容。
2?使用工具
? ? 整個(gè)工具使用jQueryUI來(lái)制作。制作過(guò)程用到了jQueryUI的包含的以下成員：
? ? 1)?Accordion
? ? 用于實(shí)現(xiàn)左側(cè)楓葉菜單，div來(lái)源基于此處。
?
? ? 2)?Draggable
? ? 拖拽項(xiàng)即使用Draggable來(lái)實(shí)現(xiàn)。
?
? ? 3)?Droppable
? ? Droppable用來(lái)實(shí)現(xiàn)布局釋放區(qū)。
?
? ? 4)?Resizable
? ? Resizable用來(lái)實(shí)現(xiàn)對(duì)div大小的拖拽設(shè)置效果。
?
? ? 5)?Dialog
? ? Dialog用來(lái)制作雙擊div時(shí)彈出的屬性對(duì)話(huà)框。?
?
3?實(shí)現(xiàn)過(guò)程
3.1?增加左側(cè)折疊導(dǎo)航
? ? 增加左側(cè)折疊導(dǎo)航，用到了jQueryUI中的Accordion，效果如圖：
? ? 代碼：
//增加折疊效果$("#catalog").accordion( {heightStyle : "fill"});//使<li>標(biāo)簽中的元素可拖拽$("#catalog li").draggable( {appendTo : "body",//用來(lái)指定控件在拖拽過(guò)程中ui.helper的容器, 默認(rèn)情況下, ui.helper使用和初始定義的draggable相同的容器, 也就是其父元素.默認(rèn)值 "parent"helper : "clone" //拖拽元素時(shí)的顯示方式。（如果是函數(shù)，必須返回值是一個(gè)DOM元素）可選值："original", "clone", Function默認(rèn)值 "original"});
3.2?設(shè)置布局畫(huà)布
? ? 列表項(xiàng)已經(jīng)可以拖拽了，現(xiàn)在還需要有地方可以接收這些元素。我們要實(shí)現(xiàn)的效果是，從左側(cè)列表拖出，放入右面的布局畫(huà)布區(qū)域，因此要將布局畫(huà)布區(qū)域設(shè)置為接收區(qū)，jQueryUI提供了Droppable來(lái)實(shí)現(xiàn)這個(gè)效果：
var bordNum = 0;$("#pageAreaWrapper div").droppable({activeClass : "ui-state-default",hoverClass : "ui-state-hover",accept : ".item",drop : function(event, ui) {//$(this).find(".placeholder").remove();var divContent = "";//生成布局界面的divvar ss = $("<div id=\"border_"+ ++bordNum+ "\" class=\"item-accepted componentWrapper\" style=\"position: absolute; z-index: 101;\">"+ "<div class=\"shield\" style=\"position:absolute\">"+ "</div>"+ "<div class=\"wrapperBorder\" style=\"background-color: transparent; border: 0px solid transparent; opacity: 1;\">"+ "<div class=\"wrapperPadding\">"+ "<div class=\"wrapperContent\" style=\"width: 320px; height:240px; word-break:break-all\">"+ divContent+ "</div>"+ "</div>" + "</div>" + "</div>");//ss.text(ui.draggable.text()).appendTo(this);ss.appendTo(this);//獲取拖入位置var px = ui.position.left;var py = ui.position.top;//獲取布局畫(huà)布pageArea的在整個(gè)頁(yè)面的絕對(duì)偏移量var pageArea_px = $("#pageArea")[0].offsetLeft;//此處加上73是因?yàn)橥鈱拥膖able的top位置為73var pageArea_py = $("#pageArea")[0].offsetTop + 73;//alert("cart2_px=" + cart2_px + ", cart2_py=" + cart2_py);//獲取滾動(dòng)條滾動(dòng)距離var scrollpx = $("#bodyOfPage").scrollLeft();var scrollpy = $("#bodyOfPage").scrollTop();//剛拖入時(shí)的位置，要考慮到滾動(dòng)條的因素setPosition(ss, px - pageArea_px + scrollpx, py - pageArea_py + scrollpy);ss.draggable( {containment : "#pageAreaWrapper",scroll : false,stop : function(event, ui) {}});//雙擊div，編輯div內(nèi)部?jī)?nèi)容ss.dblclick(function() {var dialog;dialog = $( "#dialog-form" ).dialog({autoOpen: false,height: 400,width: 450,modal: true,buttons: {OK: function() {var valid = true;if ( valid ) {var content = dialog.find("#content"); var divWidth = dialog.find("#divWidth");var divHeight = dialog.find("#divHeight");//alert(divWidth.val() + " " + divHeight.val());ss.css('width', divWidth.val());ss.find(".wrapperContent").css('width', divWidth.val());ss.css('height', divHeight.val());ss.find(".wrapperContent").css('height', divHeight.val());ss.find(".wrapperContent").html(content.val());dialog.dialog( "close" );}return valid;},Cancel: function() {dialog.dialog( "close" );}},close: function() {//form[ 0 ].reset();//allFields.removeClass( "ui-state-error" );},open: function(event, ui) {//dialogSource = }});//設(shè)置textarea的值需要用val()函數(shù)，html()函數(shù)設(shè)置不成功dialog.find("#content").val(ss.find(".wrapperContent").html());dialog.find("#divWidth").val(ss.css("width"));dialog.find("#divHeight").val(ss.css("height"));dialog.dialog( "open" );} );//定義點(diǎn)擊選中事件$("*").click(function(event, ui) {//alert(event.currentTarget.id);//每次點(diǎn)擊都是先取消選中，然后再讓相應(yīng)元素被選中$(".selected").removeClass("selected");if (event.currentTarget.getAttribute("class") == "shield") {//alert(1);$(this).parent().find(".wrapperBorder").addClass("selected");return false;} /* else if ($(this).hasClass("componentWrapper")) {//alert(2);$(this).find(".wrapperBorder").addClass("selected");}*///else {// $(".wrapperBorder").removeClass("selected"); //}//只激活第一次點(diǎn)擊，之后停止起泡//return false;});//調(diào)整大小時(shí)同時(shí)將內(nèi)層div大小調(diào)整$(".componentWrapper").resizable({autoHide : true,resize : function(event, ui) {//alert($(this).width());$(this).find(".wrapperContent").css("width", $(this).width());$(this).find(".wrapperContent").css("height", $(this).height());}});}});? ? 這里需要說(shuō)明：
????1.?為了使每個(gè)被拖出來(lái)的div的id都不一樣，設(shè)置了一個(gè)變量“bordNum”來(lái)標(biāo)識(shí)。
????2.?每個(gè)被拖出來(lái)的div，也就是ss，需要再次設(shè)置為Droppable，才能使其在畫(huà)布中也能夠被拖動(dòng)。
? ? 3.?為了可以使用鼠標(biāo)選中某個(gè)div，需要為div動(dòng)態(tài)增加樣式，而且要注意獲取對(duì)象并動(dòng)態(tài)增加了樣式之后就要通過(guò)“return?false”來(lái)阻止事件冒泡。
? ? 4.?剛拖入時(shí)，放入位置還要考慮到滾動(dòng)條的因素。
????5.?通過(guò)設(shè)置div為Resizable使其可以被拖拽調(diào)整大小。
?
3.3?鍵盤(pán)動(dòng)作
? ? 鍵盤(pán)動(dòng)作主要有選中后：
? ? 向上移動(dòng)一個(gè)像素；
? ? 向下移動(dòng)一個(gè)像素；
? ? 向左移動(dòng)一個(gè)像素；
? ? 向右移動(dòng)一個(gè)像素；
? ? 刪除。
? ? 代碼：
$(document).ready(function() {divFullScreen();//頁(yè)面加載時(shí)全屏$(window).bind('resize', function() {divFullScreen();//最大化，還原窗口大小時(shí)DIV尺寸跟著變化，不過(guò)最好在CSS里給這個(gè)DIV加個(gè)min-width等于html,body的最小寬度。});//定義鍵盤(pán)移動(dòng)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是為了停止冒泡，以便點(diǎn)擊鍵盤(pán)向下鍵時(shí)頁(yè)面不隨著移動(dòng)return false;});});
總結(jié)
以上是生活随笔為你收集整理的利用jQuery UI为CMS网站实现拖拽布局效果，秒杀table布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 史记——货殖列传
- 下一篇： JAVA中接口存在的意义