JQuery_jquery を使用して Web ページにセパレータ関数を実装するコード
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 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 td> 3. Split を呼び出すための Javascript を追加します。
コードをコピー コードは次のとおりです: このようにして、次の図に示すように、クライアントの区切りバーの機能が実現されます。 このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
![]() ホットAIツール![]() Undresser.AI Undressリアルなヌード写真を作成する AI 搭載アプリ ![]() AI Clothes Remover写真から衣服を削除するオンライン AI ツール。 ![]() Undress AI Tool脱衣画像を無料で ![]() Clothoff.ioAI衣類リムーバー ![]() Video Face Swap完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。 ![]() 人気の記事
アサシンのクリードシャドウズ:シーシェルリドルソリューション
3週間前
By DDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
2週間前
By DDD
Atomfallのクレーンコントロールキーカードを見つける場所
3週間前
By DDD
<🎜>:Dead Rails-すべての課題を完了する方法
4週間前
By DDD
Atomfall Guide:アイテムの場所、クエストガイド、およびヒント
4週間前
By DDD
![]() ホットツール![]() メモ帳++7.3.1使いやすく無料のコードエディター ![]() SublimeText3 中国語版中国語版、とても使いやすい ![]() ゼンドスタジオ 13.0.1強力な PHP 統合開発環境 ![]() ドリームウィーバー CS6ビジュアル Web 開発ツール ![]() SublimeText3 Mac版神レベルのコード編集ソフト(SublimeText3) ![]() ホットトピック
Gmailメールのログイン入り口はどこですか?
![]() ![]()
CakePHP チュートリアル
![]() ![]()
Steamのアカウント名の形式は何ですか
![]() ![]()
NYTミニクロスワードの回答
![]() ![]() ![]() フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています... ![]() スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。 ![]() JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。 ![]() 同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は?データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します... ![]() この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト(https://www.shisido.co.co.jp/sb/wonderland/)と同様の達成方法について説明します。 ![]() JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1)変数、データ型、関数などの基本概念を理解します。2)非同期プログラミングをマスターし、イベントループを通じて実装します。 3)DOM操作を使用し、非同期リクエストを処理することを約束します。 4)一般的な間違いを避け、デバッグテクニックを使用します。 5)パフォーマンスを最適化し、ベストプラクティスに従ってください。 ![]() Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �... ![]() フロントエンドのVSCodeと同様に、パネルドラッグアンドドロップ調整機能の実装を調べます。フロントエンド開発では、VSCODEと同様のVSCODEを実装する方法... ![]() |