コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JQuery_jquery を使用して Web ページにセパレータ関数を実装するコード

JQuery_jquery を使用して Web ページにセパレータ関数を実装するコード

WBOY
リリース： 2016-05-16 17:51:12
オリジナル
1208 人が閲覧しました

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 を定義します。
コードをコピー コードは次のとおりです。

tr>




3. Split を呼び出すための Javascript を追加します。

コードをコピー コードは次のとおりです:



このようにして、次の図に示すように、クライアントの区切りバーの機能が実現されます。
関連ラベル：
分隔条
ソース：php.cn
前の記事：jQuery.query.js パラメータ取得における 2 つの問題の分析_jquery 次の記事：高性能 Javascript のメモ、データ ストレージとアクセス パフォーマンスの最適化_JavaScript スキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
部分的な値の条件でクエリを記録する - SQL スキルの共有 zipcode というテーブルがあり、code という列があります。コード列には、郵便番号のプレフィックスが含まれています (例: 395453302120312)。指定された郵便...
から 2024-04-06 16:01:26
0
1
395
クリックしたときにテキストが新しい要素 (区切り線など) に変わるようにするにはどうすればよいですか? ページ上の特定のテキストをクリックすると区切り文字/新しい要素に変わる方法を見つけようとしています。どう説明したらいいのかわかりませんが、画像の下にタイトルがあると想像してください...
から 2024-04-04 11:21:03
0
1
3580
複数のテーブルからデータを取得する場合、SQL グループ化でテーブル内のエントリに基づいてクエリを実行する方法 2つのテーブルがあります。クリック2.rideクリックテーブルID |タイムライドテーブルID |タイムスタンプ両方のテーブルからデータを取得したいのですが、GROUPBYEXTR...
から 2024-04-04 08:58:17
0
1
319
PHP は 2 つの文字列を分離します PHP 文字列から最初と 2 番目の数値を取得するコードが必要です。 $string="ACCESS_NUMBER:160375356:13176570247"...
から 2024-04-02 08:57:35
0
1
281
Mysql REGEXP の年の範囲を検索する 映画 Web サイトの表のコンテンツを年ごとに分けたいのですが、どれだけ頑張っても成功できません。実際に私が望んでいるのは、1950 年より前の映画ファイルをリストすることです。初...
から 2024-04-01 14:26:29
0
1
404
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
テスト Table