ホームページ > 記事 > ウェブフロントエンド > JQuery_jquery を使用して Web ページにセパレータ関数を実装するコード
JQuery_jquery を使用して Web ページにセパレータ関数を実装するコード
- WBOYオリジナル
- 2016-05-16 17:51:121196ブラウズ
Javascript コードは次のとおりです。コードを JS ファイルとして保存し、HTML で参照します。
コードをコピーします コードは次のとおりです。
jQuery.noConflict(); jQuery.fn .extend({
jsplit: function (j) {
return this.each(function () {
j = j || {};
j.Btn = j.Btn || { };
j.Btn.oBg = j.Btn.cBg {}; MaxW: " 600px"
、MinW: "260px"
、FloatD: "left"
、IsClose: false
、BgUrl: ""
、Bg: "#fff"
, Btn : { btn: true
, oBg: { アウト: "#333", ホバー: "オレンジ" }
, cBg: { アウト: "#333", ホバー: "オレンジ" }
}
, Fn: function () { }
}
j.MaxW = parseInt(j.MaxW) || parseInt(jun.MaxW);
j.MinW = parseInt(j. MinW) | parseInt(jun.MinW);
j.IsClose = j.IsClose : jun.IsClose; 🎜>j .BgUrl = j.BgUrl || jun.BgUrl;
j.Btn.btn = j.Btn.btn != 未定義.Btn.btn : jun.Btn.btn;
j.Btn.oBg.Out || j.Btn.oBg.Out; j.Btn.oBg.Hover || jun.Btn.oBg.Hover;
j.Btn.cBg.Out || jun.Btn.cBg.Out; Btn.cBg .Hover = j.Btn.cBg.Hover || jun.Btn.cBg.Hover;
j.Fn = j.FloatD == "左" ? "右" : "左";
if (j.MinW > j.MaxW) {
j.MaxW = j.MinW; >j.MinW =
};
var _self = this;
jQuery(_self).css({ 位置: "相対"、floatD 、オーバーフロー: "hidden"、パディング: "0px" });
jQuery(_self).wrapInner("");
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; 位置:絶対;カーソル:e-resize;オーバーフロー:非表示;z-index:10000;'>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({ 表示: "なし" }) };
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( { 背景: j.Bg, "背景画像": j.BgUrl, 不透明度: 0 })
if (j.IsClose != false) {
jsplith.css({ 背景: j.Btn.cBg .Out, "背景画像": j.BgUrl })
_selfclose();
} else {
jsplith.css({ 背景: j.Btn.oBg.Out, "背景画像" : j.BgUrl })
}
jsplith.hover(function () {
if (Close == false) {
jQuery(this).css({ 背景: j.Btn.oBg .Hover, "背景画像": j.BgUrl })
} else { jQuery(this).css({ 背景: j.Btn.cBg.Hover, "背景画像": j.BgUrl }) }
}, function () {
if (Close == false) {
jQuery(this).css({ 背景: j.Btn.oBg.Out, "背景画像": j.BgUrl })
} else { jQuery(this).css({ 背景: j.Btn.cBg.Out, "背景画像": 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 }; curW = j .MinW; };
jQuery(_self).css({ width: curW });
jQuery(document).mouseup(関数) ) {
jQuery(document).unbind();
});
if (Close == true) {
jQuery(this).css({ カーソル: "e-resize",不透明度: 0.8 });
jQuery(_self).animate({ width: dw }, 200);
return false; 🎜>jsplite .dblclick(function () {
if (Close == false) {
_selfclose();
};
return false;
}); click(function () {
if (Close == false) {
_selfclose();
};
return false;
}); 🎜>jsplite .css({ カーソル: "ポインター", 不透明度: 1 });
jsplith.css({ 背景: j.Btn.cBg.Out, "背景画像": j.BgUrl }); 🎜>jQuery (_self).animate({ width: "6px" }, 400);
閉じる =
}
});
次の手順に従って HTML ファイルを変更します。
1. JQuery と生成された jsplit.js ファイルへの参照を追加します。
コードをコピー コードは次のとおりです:
<スクリプト言語='javascript' src='jsplit.js'>
2. ドラッグする DIV または TD の ID を定義します。
コードをコピー コードは次のとおりです。
| テスト | Table 3. Split を呼び出すための Javascript を追加します。
コードをコピー コードは次のとおりです: このようにして、次の図に示すように、クライアントの区切りバーの機能が実現されます。 声明： この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。 |