フロントエンドプラグインのbootstrap-select APIの紹介と使用

86692 ワード
先端プラグイン jquery
1.コンポーネントオープンアドレス及びAPIの説明
  • bootstrap-select
  • bootstrap-select Examples
    • 2.使用前提
    bootstrap-selectを導入すると、boot strap-selectである以上、コンポーネントはbootstrapに依存しているに違いない.bootstrapはまたjqueryに依存しているので、使用コンポーネントは下記のファイルを参照しなければならない.
    <script type="text/javascript" src="/js/jquery-1.9.1.min.js">script>
<link rel="stylesheet" href="/css/bootstrap.min.css" >
<link rel="stylesheet" href="/css/bootstrap-select.min.css" >
<script src="/js/bootstrap.min.js" >script>
<script src="/js/bootstrap-select.min.js" >script>
<script src="js/i18n/defaults-zh_CN.min.js">script>
    3.select使用
    3.1単一選択
    
<select class="selectpicker">
    <option value="1">Aoption>
    <option value="2">Boption>
    <option value="3">Coption>
    <option value="4">Doption>
    <option value="5">Eoption>
select>


<select class="selectpicker">
  <optgroup label="Picnic">
	 <option>Mustardoption>
	 <option>Ketchupoption>
	 <option>Relishoption>
 optgroup>
 <optgroup label="Camping">
	 <option>Tentoption>
	 <option>Flashlightoption>
	 <option>Toilet Paperoption>
 optgroup>
select>
    3.2多選択枠
    単一選択ボックスよりmultipleタグが追加されています.
    <select class="selectpicker" multiple>
  <option>Mustardoption>
  <option>Ketchupoption>
  <option>Relishoption>
select>
    3.3あいまい検索
    data-live-search=「true」の属性を追加します.
    <select class="selectpicker" data-live-search="true">
  <option>Hot Dogoption>
  <option>Friesoption>
  <option>Sodaoption>
  <option>Burgeroption>
  <option>Shakeoption>
  <option>Smileoption>
select>
    3.4多選制限
    属性data-max-options="2"を追加したり、初期化時にmaxOptionsTextで制限したりします.
    <select class="selectpicker" multiple data-max-options="2">
  <option>Mustardoption>
  <option>Ketchupoption>
  <option>Relishoption>
select>
    あるいはselectpickerを初期化する時にmaxOptionsTextを設定します.
    $('.selectpicker').selectpicker({
     
   'selectedText':'cat',
   'maxOptionsText':2;
})
    3.5カスタムボタンテキスト
    属性titleによって制御される.
  • 選択枠テキスト
    • <select class="selectpicker" multiple title="     ">
  <option>Mustardoption>
  <option>Ketchupoption>
  <option>Relishoption>
select>
  • 選択表示されているテキストの意味は、該当するオプトを選択して、オプトモーションのtitleを表示します.例えば、「Burger、Shake and a Smile」を選択して、テキストボックス内にCompbo 2が表示されます.
    • <select class="selectpicker">
  <option title="Combo 1">Hot Dog, Fries and a Sodaoption>
  <option title="Combo 2">Burger, Shake and a Smileoption>
  <option title="Combo 3">Sugar, Spice and all things niceoption>
select>
    3.6多選択枠フォーマット選択テキスト
    属性data-selected-text-formatで選択した値を制御する表示オプションの値は以下の4つあります.
  • values:カンマ区切りの選択値リスト(システムのデフォルト).
  • count:一つの項目が選択されたら、オプション値が表示されます.複数を選択すると、オプションの数が表示され、2つを選択すると、プルダウンボックスは2つが選択されていることを表示します.
  • count > x:countの値がxより小さい場合、カンマ区切りの選択値リストを示す.count>xの時、x個が選択されていることを表示します.
  • static:何を選択しても、デフォルトの選択テキストのみが表示されます.いくつかの簡単な例をあげます.
    • <select class="selectpicker" multiple data-selected-text-format="count">
  <option>Mustardoption>
  <option>Ketchupoption>
  <option>Relishoption>
  <option>Onionsoption>
select>

<select class="selectpicker" multiple data-selected-text-format="count>3">
  <option>Mustardoption>
  <option>Ketchupoption>
  <option>Relishoption>
  <option>Onionsoption>
select>
    3.6スタイルの選択
  • ボタンスタイルは、data-styleによりボタンのスタイル
    • を設定する.
    <select class="selectpicker" data-style="btn-primary">
  ...
select>

<select class="selectpicker" data-style="btn-info">
  ...
select>

<select class="selectpicker" data-style="btn-success">
  ...
select>

<select class="selectpicker" data-style="btn-warning">
  ...
select>

<select class="selectpicker" data-style="btn-danger">
  ...
select>
  • 単一選択枠スタイルここで注意したいのですが、単一選択枠はデフォルトでは多選択枠の選択後の「√」アイコンがありません.このアイコンを追加するには、スタイルにshow-tickを追加する必要があります.
    <select class="selectpicker show-tick">
  <option>Mustardoption>
  <option>Ketchupoption>
  <option>Relishoption>
select>
  • styleスタイルカスタムbootstrap-selectのスタイルは死ではなく、スタイルをカスタマイズして、最も基本的なcssのように追加することができます.
    • .special {
  font-weight: bold !important;
  color: #fff !important;
  background: #bc0000 !important;
  text-transform: uppercase;
}

<select class="selectpicker">
  <option>Mustardoption>
  <option class="special">Ketchupoption>
  <option style="background: #5cb85c; color: #fff;">Relishoption>
select>
  • 幅bootstrapのスタイルを参照する
    • <div class="row">
  <div class="col-xs-3">
    <div class="form-group">
      <select class="selectpicker form-control">
        <option>Mustardoption>
        <option>Ketchupoption>
        <option>Relishoption>
      select>
    div>
  div>
div>
    data-width属性を使用して、幅を定義します.オプションの値は次の4つのaut:selectの幅がoptionの中でコンテンツの幅が一番広いのはどれですか?fit:selectの幅は実際に選択されたoptionの幅で決定されます.100 px:selectの幅は100 pxと定義されています.50%:セットの幅を親容器の幅の50%に設定します.
    <select class="selectpicker" data-width="auto">
   <option>cowoption>
    <option>bullaaaaaaaaaaaaoption>
    <option>ASDoption>
    <option>Blaoption>
    <option>Bleoption>
select>
<select class="selectpicker" data-width="fit">
  <option>cowoption>
    <option>bullaaaaaaaaaaaaoption>
    <option>ASDoption>
    <option>Blaoption>
    <option>Bleoption>
select>
<select class="selectpicker" data-width="100px">
  <option>cowoption>
    <option>bulloption>
    <option>ASDoption>
    <option selected>Blaoption>
    <option>Bleoption>
select>
<select class="selectpicker" data-width="50%">
    <option>cowoption>
    <option>bulloption>
    <option>ASDoption>
    <option selected>Blaoption>
    <option>Bleoption>
select>
    3.7カスタムoption
  • にアイコンを追加し、data-iconでoptionに小さなアイコンを追加し、よりクールな効果を実現します.もっと多くのスタイルを取得したいなら、bootstrap公式サイトのアイコンライブラリを参照してください.ウェブサイトwww.runoob.com/bootstrap/b...
    •  <select class="selectpicker">
  <option data-icon="glyphicon-heart">Ketchupoption>
  <option data-icon="glyphicon glyphicon-th-large">Mustardoption>
  <option data-icon="glyphicon glyphicon-home">Relishoption>
select>
  • HTML用data-contentを挿入して、optionにhtml要素を挿入して、所望の効果を実現します.
    <select class="selectpicker">
  <option data-content="'label label-success'>Relish">Relishoption>
select>
  • は、二級タイトルを挿入してdata-subtextで二級タイトルを実現し、提示または他の効果を実現します.selectにも二級タイトルを展示する場合、selectpickerを初期化する時にshowSubtextをtrue
    • に設定します.
    <select class="selectpicker" data-size="5">
    <option data-subtext="Heinz">Ketchupoption>
    <option data-subtext="ble">Mustardoption>    
    <option data-subtext="com">Relishoption>
select>
    3.8カスタムプルダウンメニュー
    1.メニュー表示項目の大きさはdata-size属性によって、メニュー表示の本数を制限します.例えば、optionは8つあります.私たちは5つだけを示します.残りはスクロールバーで表示します.
    <select class="selectpicker" data-size="5">
    <option>appleoption>
    <option>bananaoption>
    <option>groupoption>
    <option>orangeoption>
    <option>cherryoption>
    <option>mangooption>
    <option>pineappleoption>
    <option>lycheeoption>
select>
    2.全選択と全選択は、data-actions-box="true"を設定することにより、全選択と全選択のボタンを追加します.
    <select class="selectpicker" multiple data-actions-box="true">
  <option>Mustardoption>
  <option>Ketchupoption>
  <option>Relishoption>
select>
//  
$('.selectpicker').selectpicker({
   'selectedText':'cat',
    'noneSelectedText':'   ',
    'deselectAllText':'   ',
    'selectAllText': '  ',
})
    3.データ分割線設定data-divider="true"を追加し、データ分割線を追加します.
    <select class="selectpicker" data-size="5">
  <option>Mustradoption>
  <option >Ketchupoption>
  <option >Relishoption>
  <option data-divider="true">option>
   <option>Mustradoption>
  <option >Ketchupoption>
  <option >Relishoption>
select>
    4.メニューヘッダを追加するdata-headerでプルダウンメニューのためにメニューヘッダを設定します.
    <select class="selectpicker" data-header="Select a condiment">
  <option>Mustardoption>
  <option>Ketchupoption>
  <option>Relishoption>
select>
    5.メニューの上下浮動または下浮動を設定するdropupAutoを通じてメニューの上下浮動を設定し、dropuptAutoはデフォルトtrueであり、表示すべきメニューの上または下の選択枠を自動的に決定し、falseに設定すると、システムはdropupスタイルの上枠に追加されます.
     $('.selectpicker').selectpicker({
                'selectedText':'cat',                   
                 'dropupAuto':false
             })

<select class="selectpicker dropup">
  <option>Mustardoption>
  <option>Ketchupoption>
  <option>Relishoption>
select>
    3.9利用できません
    対応するコントロールにdisabledを追加すれば実現できる.1.設定selectは利用できません.ここでselectボタンが失効します.クリックできません.
    <select class="selectpicker" disabled>
  <option>Mustardoption>
  <option>Ketchupoption>
  <option>Relishoption>
select>
    2.設定optionはここでoption設定属性がdisabledでないと選択できません.
    <select class="selectpicker">
  <option>Mustardoption>
  <option disabled>Ketchupoption>
  <option>Relishoption>
select>
    3.設定optiongroupここでは利用できません.optiongroupでは選択できません.
    <select class="selectpicker test">
  <optgroup label="Picnic" disabled>
    <option>Mustardoption>
    <option>Ketchupoption>
    <option>Relishoption>
  optgroup>
  <optgroup label="Camping">
    <option>Tentoption>
    <option>Flashlightoption>
    <option>Toilet Paperoption>
  optgroup>
select>
    bootstrap-selectの使用
    コンポーネントの評価と割り当て
    (1)値を取る
    var value = $('#sel').val(); #sel select   id
    複数選択の場合、ここで得られるvalue変数は配列変数です.
    (2)配当
    //    
$('.selectpicker').selectpicker('val', '1');
//    
$('.selectpicker').selectpicker('val', ['1','2','3'])
//             ，                   change  ，       。
$('.selectpicker').selectpicker('val', '1').trigger("change");
//        ，    
$('.selectpicker').selectpicker('val', ['1','2','3']).trigger("change");
    (3)コンポーネントの他の用法
    //  ：
 $('.selectpicker').selectpicker('selectAll'); 
//  ： 
$('.selectpicker').selectpicker('deselectAll'); 
//      ：
 $('.selectpicker').selectpicker('mobile');
//    ：
$('.disable-example').prop('disabled', true);
$('.disable-example').selectpicker('refresh');
//    
$('.disable-example').prop('disabled', false);
$('.disable-example').selectpicker('refresh');
//    
$('.selectpicker').selectpicker('destroy');
    ダイナミックプラスoption
    ajaxのデータrefreshとクリア
    $('.selectpicker').selectpicker('val', '');  
$('.selectpicker').selectpicker('refresh');   
//selected         
var category = $.trim($('#slpk option:selected').val());
    ダイナミック例:
    //        
$.ajax({
       
    type : 'get',  
    url : "${pageContext.request.contextPath}/category/findCategory",  
    dataType : 'json',      
    success : function(datas) {
     //  list         
        var select = $("#slpk");
        for (var i = 0; i < datas.rows.length; i++) {
      
        	select.append("  
                    + datas.rows[i].name + "");  
        }  
        $('.selectpicker').selectpicker('val', '');  
        $('.selectpicker').selectpicker('refresh');   
    } 
    
});
    参照リンク
  • bootstrap-selectの複数選択＋あいまいなクエリのドロップダウンボックスの詳細(公式の例の文書の解読)
  • select 2プラグインの使用及び方法統合
  • bootstrapフォームにおけるselectドロップリストデータの動的なロードとselected
    • dockerメモリ制限
    Android性能最適化のレイアウト最適化