在C/S系统中有专门的分隔条控件,很方便实现,但在Asp.net中却没有。本文介绍了一种使用JQuery技术实现分隔条的功能。
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 "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" "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调用Split。
<script type="text/javascript"> $(document).ready(function(){ jQuery('#tt').jsplit(); }); </script>
这样就实现了客户端的分隔条的功能,如下图所示:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月30日
2024年11月30日
- 一流的爵士乐《FirstClassJazz》ArtBlakey[正版原抓WAV+CUE]
- 杨千嬅《狼来了》[DSF][1.2G]
- 车载《旧情绵绵一路伴随》80后经典[FLAC/MP3][1G]
- 刀郎《身披彩衣的姑娘》[FLAC][1.4G]
- 张国荣《MissYouMix》美压版[正版原抓WAV+CUE]
- 长笛和吉他的浪漫音乐《OriginalRomanticMusicforFluteandGuitar》[WAV+CUE]
- 窦唯《八段锦》(上海音像)[WAV+CUE]
- DJ动力100%《堵在路上的解闷high曲》[FLAC/MP3][948M]
- 节奏炸裂《抖音最嗨 DJ 舞曲大合集》[FLAC/MP3][2G]
- 群星《百代No.1精选》[WAV+CUE][965M]
- 费玉清《中华民GUO》海山专辑[正版原抓WAV+CUE]
- Brahms-PianoConcertoNo.2(KarlBohm-VPO,WilhelmBackhaus-piano,1967)[SACD-WAV]
- ConcertoScirocco-SirensSoldiers.SongswithoutWordsfromtheItalianSeicento(2024)[24B
- 群星《天赐的声音第五季 第12期》[320K/MP3][339.36MB]
- 群星《天赐的声音第五季 第12期》[FLAC/分轨][1.64G]