ホームページ >ウェブフロントエンド >htmlチュートリアル >代替プロンプトボックス_html/css_WEB-ITnose
代替プロンプトボックス_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:21:191028ブラウズ
ここで私が話しているプロンプト ボックスとは、ユーザーがプロンプトが必要なアイコンにマウスを移動すると、そのアイコンの位置にプロンプト ボックスが表示されるというものです。
ねえ、何て言うの？
もしこの効果を達成できたら、何をしますか?
最初のアプローチは、PS を使用してプロンプト ボックスのコンテンツ領域の PNG 画像と位置を指す矢印の PNG 画像を作成し、この画像をプロンプトの背景として使用し、指定された中のコンテンツ。
まあ、このアイデアは単純かつ大まかなので、最初は以下を実装してみましょう。有得 まず、上記の 2 つの写真を用意する必要があります。
私のアイデアは、2 つの div を使用して 2 番目の画像 (三角形の画像) を最初の画像 (長方形のボックス) にネストし、このプロンプト ボックスの効果を実現することです。 E e e
<!DOCTYPE html> <head> <title>tip</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> #liuTip { background:url(img/title_back.png) 0 10px no-repeat;<!--图一：内容区--> width:220px; height:112px; overflow:auto; position:absolute; display:block; } #liuTip div { background:url(img/title_arrow.png) 0 0 no-repeat;<!--图二：箭头区--> width:40px; height:11px; } </style> </head> <body> <!--提示框--> <div id="liuTip"> <div></div> </div> <!--提示框结束--> </body></html> がコードを実行すると、その結果は次のようになります:
、単純なプロンプトボックスが表示されます。
しかし、
この場合、コンテンツ ボックス (写真 1) が一定であることに気づきましたか。言い換えると、プロンプト ボックスを使用するたびに、特定のコンテンツに一致する別のコンテンツ ボックス (図 1) を作成する必要があります。
ねえ、ニマ、少しイライラしていますか? すべてのコンテンツに適したプロンプト ボックスを書きたい場合はどうすればよいですか?それでは一緒に改善していきましょう。
大明湖のウェイウェイをまだ覚えていますか? 背景に繰り返しがあります。
知ってましたか？
アイデア:
プロンプト ボックスを上部、中央、下部の 3 つの領域に分割します。上部と下部の領域は変更されず、中央の領域はコンテンツ領域に応じて自動的に分割されます。ニマ、これはどういう意味ですか?以下の図を参照してください。
あなたはRepeat-Yを使用して解くことができます本体フレームの問題です。
しかし、上、中、下の3つの領域に分割すると、内容に応じて高さが増加したときに見苦しくなることに気づきましたか。
そこで、内容がどれだけ変わっても、幅もそれに合わせて変化し、綺麗な状態を保てるように、左・中・右の3つの領域に分割しました。以下の写真を参照してください：のアイデアによって分解してから再度組み立てます。最後に、repeat-x を使用すると、コンテンツに応じて幅を変更できます。以下は実装コードです:
<!DOCTYPE html> <head> <title>tip2</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .tip { overflow:hidden; } .tipHead { height:77px; width:16px; background:url(localizerLeft.gif) no-repeat;<!--图七：头--> float:left; } .tipBody { height:77px; width:200px; background:url(localizerMid.gif) repeat-x;<!--图八：腰--> float:left; } .tipTail { height:77px; width:10px; background:url(localizerRight.gif) no-repeat;<!--图九：尾--> float:left; } </style> </head> <body> <div class="tip"> <div class="tipHead"></div> <div class="tipBody"></div> <div class="tipTail"></div> </div> </body></html> 上記のコードを実行すると、結果は次のようになります:
少し 。 。 。
上記のコードを読んだ後、少し不快なことに気づきました。
プロンプト ボックスは頻繁に使用する必要があるため、プラグインにカプセル化してみてはいかがでしょうか。 ！こうすることで、使用するたびに書いたりコピーしたりする必要がなくなり、効率と気分に確実に影響を与えます。 ！ ！
現在、jQuery がよく使われているので、jQuery プラグインのカプセル化についての予備的な話をします。
アイデア:
1、 オペレーターが変更できるように、対応する属性を提供します。オペレーターが変更しない場合は、デフォルトの属性を使用します。 2、 提供された属性を使用して、対応するプロンプト ボックスを描画します。
詳細については、以下のコードを参照してください:
(function ($){ var tip = function( p, ths ){ var _$ths = $(ths); var _$parent = _$ths.parent(); _$ths = _$ths.detach(); /* p合并自定义属性,默认包括以下属性设置: width 提示框内容区域的宽度,number content 提示框中的提示内容 */ p = $.extend({<br /> width: 200, content:'sample' }, p); /* Draw:绘制提示框的函数 param: ths --> 提示框this */ var Draw = function(){ var children = '<div class="tipHead"></div>' +'<div class="tipBody">'+p.content+'</div>' +'<div class="tipTail"></div>'; //将children加入到提示框中 _$ths.append( children ); //动态设置提示框的样式和内容区域的宽度 _$ths.addClass('tip').find('.tipBody').width( p.width ); _$parent.append(_$ths); };//End_Draw return (function(){ Draw(); _$parent = null; _$ths = null; })(); }; /* $.fn.tip:提示框插件，用于提示用户 Param: property --> 自定义提示框的相关信息 */ $.fn.tip = function( property ) { tip( property, this ); };//End_$.fn.timeProcess <br />})(jQuery);