基于JQuery實(shí)現(xiàn)分隔條的功能
在C/S系統(tǒng)中有專門的分隔條控件,很方便實(shí)現(xiàn),但在Asp.net中卻沒有。本文介紹了一種使用JQuery技術(shù)實(shí)現(xiàn)分隔條的功能。
Javascript代碼如下,將該代碼保存成JS文件后在HTML中引用。
jsplit jQuery.noConflict(); jQuery.fn.extend({ jsplit: function (j) { return this.each(function () { j = j || {}; j.Btn = j.Btn || {}; j.Btn.oBg = j.Btn.oBg || {}; j.Btn.cBg = j.Btn.cBg || {}; var jun = { MaxW: "600px" , MinW: "260px" , FloatD: "left" , IsClose: false , BgUrl: "" , Bg: "#fff" , Btn: { btn: true , oBg: { Out: "#333", Hover: "orange" } , cBg: { Out: "#333", Hover: "orange"} } , Fn: function () { } } j.MaxW = parseInt(j.MaxW) || parseInt(jun.MaxW); j.MinW = parseInt(j.MinW) || parseInt(jun.MinW); j.FloatD = j.FloatD || jun.FloatD; j.IsClose = j.IsClose != undefined ? j.IsClose : jun.IsClose; j.BgUrl = j.BgUrl || jun.BgUrl; j.Bg = j.Bg || jun.Bg; j.Btn.btn = j.Btn.btn != undefined ? j.Btn.btn : jun.Btn.btn; j.Btn.oBg.Out = j.Btn.oBg.Out || jun.Btn.oBg.Out; j.Btn.oBg.Hover = j.Btn.oBg.Hover || jun.Btn.oBg.Hover; j.Btn.cBg.Out = j.Btn.cBg.Out || jun.Btn.cBg.Out; j.Btn.cBg.Hover = j.Btn.cBg.Hover || jun.Btn.cBg.Hover; j.Fn = j.Fn || jun.Fn; var antiD = j.FloatD == "left" ? "right" : "left"; if (j.MinW > j.MaxW) { var amax = j.MaxW; j.MaxW = j.MinW; j.MinW = amax; }; var _self = this; var Close = false; jQuery(_self).css({ position: "relative", float: j.FloatD, overflow: "hidden", padding: "0px" }); jQuery(_self).wrapInner("<div class='jsplit-c' style='top:0px;z-index:9999;zoom:1;width:100%;overflow:hidden;position:relative;height:100%'></div>"); jQuery(_self).children(".jsplit-c").append("<div class='jsplit-e' unselectable='on' style='background:#fff;height:100%;width:6px;top:0px;-moz-user-select:none;" + antiD + ":0px;position:absolute;cursor:e-resize;overflow:hidden;z-index:10000;'><div class='jsplit-e-handle' unselectable='on' style='height:40px;width:100%;top:50%;margin-top:-20px;left:0;position:absolute;cursor:pointer;-moz-user-select:none;'></div></div>"); var dw = jQuery(_self).width(); var jsplitc = jQuery(_self).children(".jsplit-c"); var jsplite = jsplitc.children(".jsplit-e"); var jsplith = jsplite.children(".jsplit-e-handle"); if (j.Btn.btn == false) { jsplith.css({ display: "none" }) }; if (jQuery.browser.msie) { document.execCommand("BackgroundImageCache", false, true); } if (dw > j.MaxW) { jQuery(_self).css({ width: j.MaxW }); } if (dw < j.MinW) { jQuery(_self).css({ width: j.MinW }); } jsplite.css({ background: j.Bg, "background-image": j.BgUrl, opacity: 0 }) if (j.IsClose != false) { jsplith.css({ background: j.Btn.cBg.Out, "background-image": j.BgUrl }) _selfclose(); } else { jsplith.css({ background: j.Btn.oBg.Out, "background-image": j.BgUrl }) } jsplith.hover(function () { if (Close == false) { jQuery(this).css({ background: j.Btn.oBg.Hover, "background-image": j.BgUrl }) } else { jQuery(this).css({ background: j.Btn.cBg.Hover, "background-image": j.BgUrl }) } }, function () { if (Close == false) { jQuery(this).css({ background: j.Btn.oBg.Out, "background-image": j.BgUrl }) } else { jQuery(this).css({ background: j.Btn.cBg.Out, "background-image": j.BgUrl }) } }) jQuery(_self).hover(function () { if (Close == false) jsplite.stop().animate({ opacity: 0.85 }, 200) }, function () { if (Close == false) jsplite.stop().animate({ opacity: 0 }, 2000) }) jsplite.mousedown(function (e) { j['Fn'] && j['Fn'].call(_self); var screenX = e.screenX, w = jQuery(_self).width(); jQuery(document).mousemove(function (e2) { curW = j.FloatD == "left" ? w + (e2.screenX - screenX) : w - (e2.screenX - screenX); if (curW >= j.MaxW) { curW = j.MaxW; }; if (curW <= j.MinW) { curW = j.MinW; }; jQuery(_self).css({ width: curW }); dw = curW; }); jQuery(document).mouseup(function () { jQuery(document).unbind(); }); if (Close == true) { jQuery(this).css({ cursor: "e-resize", opacity: 0.8 }); jQuery(_self).animate({ width: dw }, 200); Close = false; }; return false; }); jsplite.dblclick(function () { if (Close == false) { _selfclose(); }; return false; }); jsplith.click(function () { if (Close == false) { _selfclose(); }; return false; }); function _selfclose() { jsplite.css({ cursor: "pointer", opacity: 1 }); jsplith.css({ background: j.Btn.cBg.Out, "background-image": j.BgUrl }); jQuery(_self).animate({ width: "6px" }, 400); Close = true; } }); } });
按以下步驟修改HTML文件:
1. 增加對JQuery和剛剛生成的jsplit.js文件的引用。
<script language='javascript' src='jquery-1.4.4.min.js'></script> <script language='javascript' src='jsplit.js'></script>
2. 為要被拖動大小的DIV或TD定義ID。
<table> <tr> <td id="tt" style="background:#999999">test</td> <td style="background:#009999" width="400">test Table</td> </tr> </table>
3. 增加Javascript調(diào)用Split。
<script type="text/javascript"> $(document).ready(function(){ jQuery('#tt').jsplit(); }); </script>
這樣就實(shí)現(xiàn)了客戶端的分隔條的功能,如下圖所示:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- C# Split分隔字符串的應(yīng)用(C#、split、分隔、字符串)
- SQL語法 分隔符理解小結(jié)
- Oracle逗號分隔列轉(zhuǎn)行實(shí)現(xiàn)方法
- PHP 將逗號、空格、回車分隔的字符串轉(zhuǎn)換為數(shù)組的函數(shù)
- 在MySQL字段中使用逗號分隔符的方法分享
- 用JQuery在網(wǎng)頁中實(shí)現(xiàn)分隔條功能的代碼
- java之路徑分隔符介紹
- java獲得平臺相關(guān)的行分隔符和java路徑分隔符的方法
- jquery插件jquery.beforeafter.js實(shí)現(xiàn)左右拖拽分隔條對比圖片的方法
- jQuery實(shí)現(xiàn)分隔條左右拖動功能
相關(guān)文章
jquery提示 "object expected"的解決方法
在測試代碼的時候,提示object expected,下面的解決方法,可以參考下。2009-12-12JQueryiframe頁面操作父頁面中的元素與方法(實(shí)例講解)
這篇文章主要是對JQueryiframe頁面操作父頁面中的元素與方法進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11通過jQuery源碼學(xué)習(xí)javascript(三)
承接上兩篇繼續(xù)寫下去。我盡量把我明白的地方給大家說清楚。有些大家的提問我也有點(diǎn)搞不明白,如果有人能解答,再好不過了2012-12-12EasyUI?Pagination如何實(shí)現(xiàn)分頁功能getPager
這篇文章主要介紹了EasyUI?Pagination如何實(shí)現(xiàn)分頁功能getPager問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04jquery操作復(fù)選框(checkbox)的12個小技巧總結(jié)
本篇文章主要是對jquery操作復(fù)選框(checkbox)的12個小技巧進(jìn)行了總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02jquery下動態(tài)顯示jqGrid以及jqGrid的屬性設(shè)置容易出現(xiàn)問題的解決方法
jquery下動態(tài)顯示jqGrid以及jqGrid的屬性設(shè)置容易出現(xiàn)問題的解決方法,使用jqgrid的朋友可以參考下。2010-10-10jQuery Easyui實(shí)現(xiàn)左右布局
jQuery EasyUI 是一個基于 jQuery 的框架,集成了各種用戶界面插件。接下來通過本文給大家介紹jQuery Easyui實(shí)現(xiàn)左右布局,涉及到到easyui左右布局相關(guān)知識,感興趣的朋友一起學(xué)習(xí)吧2016-01-01flash+jQuery實(shí)現(xiàn)可關(guān)閉及重復(fù)播放的壓頂廣告
本文給大家分享的是仿游戲門戶網(wǎng)站可關(guān)閉及重復(fù)播放泰山壓頂廣告是一款基于jquery實(shí)現(xiàn)的打開網(wǎng)頁緩慢下拉廣告代碼。有需要的小伙伴可以參考下。2015-04-04jQuery 位置函數(shù)offset,innerWidth,innerHeight,outerWidth,outerHei
jQuery的位置函數(shù)(offset(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),scrollTop(),scrollLeft())小應(yīng)用2010-03-03