原則は、テキストボックスを UL に追加してドロップダウン ボックスをシミュレートし、フォントを使用してドロップダウン ボタンをシミュレートすることです。
まず、CSS と HTML を使用して、見た目を整えます。ここでは の 2 つのフォントを使用しています。これらのフォントは、icoon ウェブサイトで自分で作成できます。フォントを使用する利点は、入力ボックスの配置が非常に便利で、サイズや色なども制御できることです。唯一の欠点は、IE6 および IE7 は :before セレクターをサポートしていないため、このフォントを表示できないことです。ですが、他の方法でも実現できますので、自分で試してみることもできます。以下はHTMLコードです
<span style="display:inline-block;position:relative" class="combox_border"> <input type="text" class="combox_input"/><font class="ficomoon icon-angle-bottom combox_button" style="display:inline-block"></font> <ul style="position:absolute;top:29px;left:-1px" class="combox_select"> <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项一</a></li> <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项二</a></li> <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项三</a></li> <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项四</a></li> </ul> </span>
1. タグにはスタイルとクラスがあり、このスタイルは必須の属性です。
が必要です。
2. 最も外側の部分をspanで囲み、inline-block属性を付与します。 inline要素を使用する理由は、将来のレイアウトの便宜のためです。ブロック要素に置き換えることもできますが、多くの場合、ブロック要素が使用されます。フローティングやその他のスタイルは制御がより困難です
3. Ficomoon icon-angle-bottom はフォント
を定義しています
4. スパンの属性位置は相対的であり、将来的には、ul の位置は jquery left に従って絶対的になるようにする予定です。コード化された
5. li のコンテンツに a タグを追加しました。ここでは、a タグを上に移動すると CSS が変更されるため、移動による特殊な効果を減らすことができます。スタイルを変更するにはコンテンツまで。
以下は CSS コードです:
@font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot?-fl11l'); src:url('fonts/icomoon.eot?#iefix-fl11l') format('embedded-opentype'), url('fonts/icomoon.woff?-fl11l') format('woff'), url('fonts/icomoon.ttf?-fl11l') format('truetype'), url('fonts/icomoon.svg?-fl11l#icomoon') format('svg'); font-weight: normal; font-style: normal; } .ficomoon{font-family:'icomoon';} .icon-angle-top:before {content: "\f102"}.icon-angle-bottom:before {content: "\f103"} /*下面的可根据自己的实际情况做修改*/ .combox_border{border:1px solid #c2c2c2;height:28px;width:245px} .combox_input{border:0;line-height:25px;height:25px;padding-left: 5px;width:85%;vertical-align: middle;} .combox_button{width:12%;text-align:center;vertical-align: middle;cursor:pointer;border-left:1px solid #c2c2c2} .combox_select{border:1px solid #c2c2c2;border-top:0;width:100%} .combox_select li{overflow:hidden;height:30px;line-height:30px;cursor:pointer;} .combox_select a {display: block;line-height: 28px;padding: 0 8px;text-decoration: none;color: #666;} .combox_select a:hover {text-decoration: none;background:#f5f5f5}
Combox_border やその他のスタイルはカスタマイズでき、CSS3 スタイルを追加して美しくすることができます。ここではシンプルなスタイルを作成しました。
2. JS 特殊効果を作成します
JS を実行しているときに、どのブラウザでもエラーが報告されないのに、IE6 ではオブジェクトのプロパティが設定されていないというエラーが表示されるという奇妙な問題に遭遇しました。最終的に、それが原因であることがわかりました。 js ファイルのエンコードの問題については、UTF-8 ではなく、エンコードを変更するだけです。
最初は jquery プラグイン形式です
(function($){ $.fn.combox = function(options) { }; })(jQuery);
次にデフォルトパラメータを追加します
var defaults = { borderCss: "combox_border", inputCss: "combox_input", buttonCss: "combox_button", selectCss: "combox_select", datas:[] }; var options = $.extend(defaults, options);
borderCss | 最外面包裹的样式,就是上面的span |
inputCss | 输入框的样式 |
buttonCss | 按钮的样式,就是 |
selectCss | 下拉列表的样式 |
datas | 下拉列表中的内容 |
次にレンダリング方法があります
this.each(function() { var _this = $(this); _this = _initBorder(_this);//初始化外框CSS IE6中需要有返回值 _this = _initInput(_this);//初始化输入框 _initSelect(_this);//初始化下拉列表 });
入力ボックス、ボタン、ドロップダウン ボックスを動的に生成し、スタイルと時間を追加します。わかりやすくするために、3 つのレンダリングをそれぞれ 3 つの関数に配置しました
function _initBorder($border) {//初始化外框CSS $border.css({'display':'inline-block', 'position':'relative'}).addClass(options.borderCss); return $border; } function _initInput($border){//初始化输入框 $border.append('<input type="text" class="'+options.inputCss+'"/>'); $border.append('<font class="ficomoon icon-angle-bottom '+options.buttonCss+'" style="display:inline-block"></font>'); //绑定下拉特效 $border.delegate('font', 'click', function() { var $ul = $border.children('ul'); if($ul.css('display') == 'none') { $ul.slideDown('fast'); $(this).removeClass('icon-angle-bottom').addClass('icon-angle-top'); }else { $ul.slideUp('fast'); $(this).removeClass('icon-angle-top').addClass('icon-angle-bottom'); } }); return $border;//IE6需要返回值 } function _initSelect($border) {//初始化下拉列表 $border.append('<ul style="position:absolute;left:-1px;display:none" class="'+options.selectCss+'">'); var $ul = $border.children('ul'); $ul.css('top',$border.height()+1); var length = options.datas.length; for(var i=0; i<length ;i++) $ul.append('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+options.datas[i]+'</a></li>'); $ul.delegate('li', 'click', function() { $border.children(':text').val($(this).text()); $ul.hide(); $border.children('font').removeClass('icon-angle-top').addClass('icon-angle-bottom');//确定的时候要将下拉的icon改变 }); return $border; }
これが jquery オブジェクトであることがわかるように、3 つの関数のパラメーターに $ 記号を追加しました。これらの関数には技術的な難しい点はなく、必要に応じていつでもコードを変更できるため、非常に簡単です。修正する。
以下は呼び出しプラグインです:
<script type="text/javascript"> $(document).ready(function() { $('#combox').combox({datas:['选项一','选项二','选项三']}); }) </script> </head> <body> <span id="combox"></span> </body> </html>
一文だけで済むのでとても便利です。
デモデモ: http://demo.jb51.net/js/2014/combox_jquery/
デモのダウンロード: http://www.jb51.net/jiaoben/199034.html