欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

現在的網(wǎng)站...很多模塊化的東西..都希望實(shí)現可視化的操作..主要原因是為了提高用戶(hù)體驗.增強用戶(hù)的粘合度.當然這也間接性地體現出本網(wǎng)站的高質(zhì)量性能...用Javascript 實(shí)現頁(yè)面的拖動(dòng)與同步保存,在技術(shù)上已經(jīng)不是什么新的東西..因為我們所接觸的系統就有.比如Google的用戶(hù)面版iGoogle,當然還有百度的my百度.這二個(gè)系統就很好的提現出拖動(dòng)層的運用..當我們在運用這些系統的時(shí)候..我們會(huì )感覺(jué)非同一般
感受..腦海中會(huì )出現一個(gè)字:贊!
    今天我也要來(lái)玩一把這個(gè)拖動(dòng)層.(這原因當然是公司的系統中需要這個(gè)功能).當然我的Javascript的功力還不到Google,百度它們公司人員的十分之一.所以呢..我借助的是Jquery這個(gè)JS類(lèi)庫來(lái)實(shí)現這么一個(gè)功能. 在介紹功能實(shí)現之前:先上幾張效果圖片:

拖動(dòng)一:

拖動(dòng)二:

    在介紹這個(gè)功能實(shí)現之前,我想很多朋友都會(huì )Jquery.同時(shí),對Jquery這里面的UI功能是有相當的認識的.UI里面有一個(gè)sortable這么一一塊的介紹..其實(shí)里面的大部分功能都已經(jīng)寫(xiě)好了拖動(dòng)效果.我們只需要學(xué)會(huì )用就可以....
    第一:
    我們需要加入Jquery.js的庫文件,還有Jquery UI核心文件:ui.core.js,最后一個(gè)就是UI 拖動(dòng)層文件:ui.sortable.js.以及一些UI樣式.
代碼如下 :

<script type="text/javascript" src="../../jquery-1.3.2.js"></script><script type="text/javascript" src="../../ui/ui.core.js"></script><script type="text/javascript" src="../../ui/ui.sortable.js"></script><link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />

第二: 接下來(lái)寫(xiě)我們拖動(dòng)層的JS函數功能.主要的函數(sortable)如下(注:我這里只基本功能):

$(function() {$(".column").sortable({connectWith: '.column',//要拖動(dòng)層的列opacity: 0.4,//模糊效果值revert: true,stop:saveLayout//拖動(dòng)完成后,回調函數.這里就可以通過(guò)AJAX把層的順序保存在數據庫里面});$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ").find(".portlet-header").addClass("ui-widget-header ui-corner-all").prepend('<span class="ui-icon ui-icon-plusthick"></span>').end().find(".portlet-content").addClass("movehand");$(".portlet-header .ui-icon").click(function(){$(this).toggleClass("ui-icon-minusthick");$(this).parents(".portlet:first").find(".portlet-content").toggle();});$(".column").disableSelection();}

關(guān)于sortable這個(gè)函數所有值代表的意思,我也不在這里多介紹了..因為比較多..不是太好多介紹..朋友們可以參考jquery的UI API介紹..在那里介紹的很詳細..不過(guò)是E文.但都很
簡(jiǎn)單.慢慢看吧..呵呵....

    第三:寫(xiě)一些亂七八糟的功能,比如上下排序層,刪除層和拖動(dòng)前或拖動(dòng)完成后等等一些回調函數.

//保存模塊排序并寫(xiě)入Cookie (^_^我這里只有COOKIE保存.當然你可以保存在數據庫里面)

//保存模塊排序并寫(xiě)入Cookie (^_^我這里只有COOKIE保存.當然你可以保存在數據庫里面)function saveLayout(){$.cookie('my_self_panle',getVales());changeIcon();}

//每一列模塊的值,其實(shí)sortable這個(gè)函數里有一個(gè)serialize可以直接取到對應的序列值:格式如下:// $('#left').sortable('serialize',{key:'leftmod[]'}) + '&' + $('#right').sortable('serialize',{key:'rightmod[]'})//我這里就沒(méi)有用這個(gè)東西function getVales(){var vales='';var Tstring=new Array();var areas=new Array('left','center','right');$.each(areas, function(i, vals){$('#'+vals+'>.portlet').each(function(j){vales=vales+'&'+this.id;});Tstring[i]=vales;vales=''});return Tstring;}//這里只是改變上下排序的圖標.function changeIcon(){var areas=new Array('left','center','right');$.each(areas, function(i, vals){$('#'+vals).find(".portlet-header >span").show();$('#'+vals+' div:first-child').find(".portlet-header >span:nth-child(4)").hide();$('#'+vals+' div:last-child').find(".portlet-header >span:nth-child(3)").hide();});}//把一個(gè)層向上.這個(gè)函數寫(xiě)的不算好..我總認為有更好的方法.比如用:clone方法.//有好的方法的朋友可以指導一下我.function up(obj){var this_obj=$(obj).closest("div");var prev_html = this_obj.prev().html();var this_html = this_obj.html();var prev_id = this_obj.prev().attr("id");var this_id = this_obj.attr("id");this_obj.prev().html(this_html);this_obj.prev().attr('id',this_id);this_obj.html(prev_html);this_obj.attr('id',prev_id);saveLayout();//排序后.我們也要保存層}//同上面.只是這個(gè)是讓一個(gè)層向下function down(obj){var this_obj=$(obj).closest("div");var next_html = this_obj.next().html();var this_html = this_obj.html();var next_id = this_obj.next().attr("id");var this_id = this_obj.attr("id");this_obj.next().html(this_html);this_obj.next().attr('id',this_id);this_obj.html(next_html);this_obj.attr('id',next_id);saveLayout();}//一個(gè)簡(jiǎn)單的,刪除一個(gè)層function del(obj){var this_box=$(obj).closest("div").remove();saveLayout();}