国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

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

拖動一:

拖動二:

    在介紹這個功能實現(xiàn)之前,我想很多朋友都會Jquery.同時,對Jquery這里面的UI功能是有相當(dāng)?shù)恼J(rèn)識的.UI里面有一個sortable這么一一塊的介紹..其實里面的大部分功能都已經(jīng)寫好了拖動效果.我們只需要學(xué)會用就可以....
    第一:
    我們需要加入Jquery.js的庫文件,還有Jquery UI核心文件:ui.core.js,最后一個就是UI 拖動層文件: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" />

第二: 接下來寫我們拖動層的JS函數(shù)功能.主要的函數(shù)(sortable)如下(注:我這里只基本功能):

$(function() {$(".column").sortable({connectWith: '.column',//要拖動層的列opacity: 0.4,//模糊效果值revert: true,stop:saveLayout//拖動完成后,回調(diào)函數(shù).這里就可以通過AJAX把層的順序保存在數(shù)據(jù)庫里面});$(".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這個函數(shù)所有值代表的意思,我也不在這里多介紹了..因為比較多..不是太好多介紹..朋友們可以參考jquery的UI API介紹..在那里介紹的很詳細(xì)..不過是E文.但都很
簡單.慢慢看吧..呵呵....

    第三:寫一些亂七八糟的功能,比如上下排序?qū)?刪除層和拖動前或拖動完成后等等一些回調(diào)函數(shù).

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

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

//每一列模塊的值,其實sortable這個函數(shù)里有一個serialize可以直接取到對應(yīng)的序列值:格式如下:// $('#left').sortable('serialize',{key:'leftmod[]'}) + '&' + $('#right').sortable('serialize',{key:'rightmod[]'})//我這里就沒有用這個東西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;}//這里只是改變上下排序的圖標(biāo).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();});}//把一個層向上.這個函數(shù)寫的不算好..我總認(rèn)為有更好的方法.比如用:clone方法.//有好的方法的朋友可以指導(dǎo)一下我.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();//排序后.我們也要保存層}//同上面.只是這個是讓一個層向下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();}//一個簡單的,刪除一個層function del(obj){var this_box=$(obj).closest("div").remove();saveLayout();}

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。