私は最近仕事で非常に忙しく、システムを改訂しています。プロジェクトの背景はMVC1.0によって開発されましたが、フロントエンド部分はいくつかのバージョンで変更されており、以前のデザイナーは非常に強力であり、どちらも設計とフロントエンド開発です。それはすでに非常にファッショナブルで最先端であり、常に人気のあるブートストラップツールキットを使用しており、それをWebフロントエンドCSSフレームワークとして定義する多くのものがあります。正直に言うと、私はそれがTwitterによって作成され、インターフェイスがより良くなることを以前に知っていました。しかし、それは実際のプロジェクトでは使用されていませんでした。会社の私の新しい同僚は以前にこれを行い、会社の公式ウェブサイトプロジェクトでそれを使用することを計画していました。私が知らないので、リーダーはこれに興味がないので、それは役に立たない。彼女は、プロジェクトに取り組むことが少ないと協力することで開発効率を向上させ、システムをより美しく美しくすることができると述べたが、適応設計もより良いサポートをサポートしている。
プロジェクトの要件は、HTMLネイティブ選択タグを下の図に示すドロップダウンボックス効果に置き換えることです。私は通常、この種の需要を見ます。ネイティブのHTMLタグを変更したい場合は、気に入らない。また、Selectと同じ機能をUIタグとLIタグとJavaScriptコードを使用して達成できることも知っていますが、以前に書き込もうとしたことはありません。バグとブラウザの互換性に問題がある場合は、PMと通信します。この選択を変更してはいけませんか？ネイティブセレクトを使用します。 PMは、ユーザーの干渉を減らし、ユーザーがこのオプションにあまり注意を払わないようにすることだと述べました。これは同じだと思います。まず、選択ほど誇張されていません。第二に、ドロップダウン矢印は少し小さいため、ユーザーはあまり意図的にクリックしません。実際、そのテキストをクリックすると、以下のドロップダウンリストも開きます。
画像（HTMLネイティブ選択タグ）画像（最終レンダリング）
（HTMLネイティブ選択タグ）
Selectの元の関数は、右側のドロップダウン矢印をクリックして、ドロップダウンリストを開き、ユーザーに選択を提供することです。ユーザーがオプションを選択すると、テキストボックスの値を対応するオプションコンテンツに変更し、オプションの値を取得できます。別の非常に重要な機能は、オプションに選択されたプロパティがあることです。オプションが= "selected"を選択した場合、ドロップダウンボックスはデフォルトで現在のオプションを選択します。
Bootstrapは、美しいメニューを作成するためのボタンドロップダウンを提供しますが、選択する機能ではありません。検索して見たとき、Bootstrapはボタンドロップダウンスタイルに似た選択コンポーネントを提供できると思いました。しかし、私は妄想です。このコンポーネントがないと、コンポーネントを実装する必要があります。実際、私はULとLIを使用して厳選されたタグを書いた経験があるので、これを書くのはそれほど難しくありません。
<div style = "マージントップ：30px;"> <a style = "font-size：14px;" type = "button" id = "dropdownmenu1" data-toggle = "dropdown">テキスト1 <span> </span> </a> <ul role = "menu" aria-labelledby = "dropdownmenu1"> <liロール= "value => <a role =" menuitem "tabindex =" role = "menuitem" tabindex = "2" href = "＃"> text 2 </a> </li> <li chole = "presention"> <a role = "menuitem" tabindex = "3" href = "＃">テキスト3 </a> </li> </ul> </div>
これは、ボタンドロップダウンの基本コードです。 CSSスタイル自体を適用するため、Bootstrap.min.cssのスタイルを後で変更する必要があるため、このページにいくつかのスタイルを配置する必要があります。
<！Doctype html> <html> <head> <title> bootstrap 101 Template </title> <meta name = "Viewport" content = "width = device-width = 1.0" charset = "utf-8"> <！ - bootstrap-> <link href = " type = "text/css">。btn-group.open .dropdown-toggle {-webkit-box-shadow：none; box-shadow：none;} </style> <！ - [if lt ie 9]> <スクリプトsrc = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <スクリプトsrc = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </scrip> <！[endif] - > </head> <body> <p>元の選択タグ</p> <select> <オプション値= "1" 1 </option値> <オプション値3 </option> </select> <div id = "dropdown1" "style =" margin-top：30px; "> <div> <a style =" font-size：14px; "type =" button "id" dropdownmenu1 "dat-toggle =" dropdown "> <！-オプションを選択した後、選択した値を選択する必要があります。 1 </span> <span> </span> </a> <ul role = "menu" aria-labelledby = "dropdownmenu1"> <li chole = "presention" value = "1"> <a role = "menuitem" tabindex = "1" 1 "href =" javascript：void（0）; " role = "menuitem" tabindex = "2" href = "javascript：void（0）;"> text 2 </a> </li> <liロール= "Presention" value = "3"> <a menuitem "tabindex =" 3 "href =" javascript：void（0）; " BootstrapのJavaScriptプラグイン） - > <スクリプトsrc = "js/jquery-1.10.2.js"> </script> <！ - すべてのコンパイルされたプラグインを含むか、必要に応じて個々のファイルを含むか、> <> <> <> <> <> <crsipt src = "js/bootstrap.min.js"> </> <script = "/javascript"> customdropdown（ele）{this.dropdown = ele; this.placeholder = this.dropdown.find（ "。placeholder"）; this.options = this.dropdown.find（ "ul.dropdown-menu> li"）; this.val = ''; this.index = -1; // default is -1; this.initevents（）;} customdropdown.prototype = {initevents：function（）{var obj = this; //このメソッドは、クリックイベントがブートストラップ自体によってキャプチャされるために書き込まれませんドロップダウンリストobj.options.on（ "click"、function（）{var opt = $（this）; obj.text = opt.find（ "A"） this.text;}、getValue：function（）{return this.val;}、getIndex：function（）{return this.index;}} $（document）.ready（var mydropdown = new customdropdown（$（ "＃dropdown1"）;}）; </script> </html>クリックプロセス中に背景が表示されます。 Chromeを介した要素の表示は、Box-Shodowを書くことの効果です。しかし、私がそれを修正した後、それはまだ現れました。明日は探し続けましょう。
スタイル自体の中に1本のスタイルオーバーレイ、Bootstrap.cssを追加します。
<style type = "text/css">。btn-group.open .dropdown-toggle {-webkit-box-shadow：none; box-shadow：none;} </style>注：インスタンスプロセス中に、jQueryセレクターのオブジェクトを渡すため、ページに多くのカスタムドロップダウンがある場合、カテゴリが使用されます。その後、インスタンス化プロセス中にコードを変更する必要があります！
デモデモアドレス：http：//liminjun.sinaapp.com/demo/customselect/index.html
bootstrap cdn http://www.bootstrapcdn.com/ Baiduも持っていますが、バージョンは少し古く、更新されません。
Bootstrapの公式Webサイトhttp://getBootstrap.com/components/#btn-dropdowns