ホームページ > 記事 > ウェブフロントエンド > bootstrap-select の複数選択およびファジー クエリ ドロップダウン ボックスの詳細な分析
bootstrap-select の複数選択およびファジー クエリ ドロップダウン ボックスの詳細な分析
- 青灯夜游転載
- 2021-05-10 10:58:033543ブラウズ
この記事では、bootstrap-select の複数選択とファジー クエリ ドロップダウン ボックスについて詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。
問題の紹介
以前のブロガーは、実際の開発中に問題に遭遇しました。つまり、両方の複数選択をサポートする必要があるということです。ファジー クエリのドロップダウン コントロールは、よく知られた強力なドロップダウン ボックス プラグイン bootstrap-select2 です。ブロガーも当時それを参照していましたが、その複数選択の効果が比較的貧弱であることがわかりました。これと同様に、
##Such a multi-select control は十分な長さでなければなりません。選択範囲が特定の制限を超えると、スタイルが折りたたまれます。知ってますよ〜後から偶然ブートストラップセレクトプラグインを発見したのですが、とてもハイエンドだということがすぐに分かりました！単一選択と複数選択の両方をサポートしており、最も驚くべきことは、あいまいクエリ機能も搭載されていることです。最初にクールなエフェクトをお見せしましょう:
このようなコントロールを使用しないのは残念です。その後、ブロガーはたくさんのドキュメントを見つけて、ブログのリファレンスを参照してください。しかし、その多くは具体的な使用法を明確に説明していないことがわかりました。簡単な例を示しているだけで、あまり参考になりませんでした。ブロガーは、関連ドキュメントを研究することで、bootstrap-select の使用法を明確にしました。公式ウェブサイトを参考に、自身の開発経験を交えてまとめました。 [関連する推奨事項: "bootstrap チュートリアル "]
公式プラグイン アドレス: http://silviomoreto.github.io/bootstrap-select
Github アドレス: https://github.com/silviomoreto/bootstrap-select
アプリケーション例 (公式ドキュメントの基本的な例を参照)
1.単一選択
- 単純な単一選択 デフォルトでは「√」は選択されていません。
<select class="selectpicker"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>
エフェクト表示
- グループラジオ選択 optgroup タグの追加に注意してください。 #
<select class="selectpicker">
<optgroup label="Picnic">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</optgroup>
<optgroup label="Camping">
<option>Tent</option>
<option>Flashlight</option>
<option>Toilet Paper</option>
</optgroup>
</select>効果表示
# #Comparison ラジオ ボタン
<select class="selectpicker" multiple> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>
効果表示
##data-live-search="true"
<select class="selectpicker" data-live-search="true"> <option>Hot Dog</option> <option>Fries</option> <option>Soda</option> <option>Burger</option> <option>Shake</option> <option>Smile</option> </select>
効果表示
data-max-options="2"または初期化中に制限するには maxOptionsText
を使用します<select class="selectpicker" multiple data-max-options="2"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>
または、selectpicker の初期化時に maxOptionsText を設定します$('.selectpicker').selectpicker({
'selectedText':'cat',
'maxOptionsText':2;
})効果表示
5. ボタンのテキストをカスタマイズしますtitle によって制御されます。
ボックスのテキストを選択
<select class="selectpicker" multiple title="请选择一个"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>効果の表示
<select class="selectpicker"> <option title="Combo 1">Hot Dog, Fries and a Soda</option> <option title="Combo 2">Burger, Shake and a Smile</option> <option title="Combo 3">Sugar, Spice and all things nice</option> </select>
data-selected-text-format 選択した値の表示を制御します 次の 4 つの値が使用可能です:
1.values: 選択された値のカンマ区切りリスト (システムのデフォルト);
2.
count： 如果选择了一个项，则显示选项值。如果选择多于一个，则显示所选项的数量,如选择2个，则下拉框显示2个已被选中；
3.
count > x： 当count的值小于x时，展示逗号分隔的选定值列表;当count>x时，显示x个被选中；
4.
static：无论选中什么，都只展示默认的选中文本。 下面给几个简单示例
<select class="selectpicker" multiple data-selected-text-format="count"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Onions</option> </select>
效果展示
<select class="selectpicker" multiple data-selected-text-format="count>3"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Onions</option> </select>
效果展示
7.样式选择
- 按钮样式
通过
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>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>
效果展示
- 菜单的箭头
Bootstrap的菜单箭头也可以被添加进来，需要加入样式
show-menu-arrow，个人感觉差别不大
<select> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>
效果展示
- style样式自定义 bootstrap-select的样式不是死的，可以自定义style样式，类似最基本的css样式添加。
.special {
font-weight: bold !important;
color: #fff !important;
background: #bc0000 !important;
text-transform: uppercase;
}
<select class="selectpicker">
<option>Mustard</option>
<option class="special">Ketchup</option>
<option style="background: #5cb85c; color: #fff;">Relish</option>
</select>效果展示
- 宽度（Width）
1.引用bootstrap的样式
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<select class="selectpicker form-control">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</div>
</div>2.使用data-width属性，来定义宽度，可选的值有以下4个auto：select的宽度由option中内容宽度最宽的哪个决定；fit：select的宽度由实际选中的option的宽度决定；100px：select的宽度定义为100px；50%：select的宽度设置为父容器宽度的50%。
<select class="selectpicker" data-width="auto">
<option>cow</option>
<option>bullaaaaaaaaaaaa</option>
<option>ASD</option>
<option>Bla</option>
<option>Ble</option>
</select>
<select class="selectpicker" data-width="fit">
<option>cow</option>
<option>bullaaaaaaaaaaaa</option>
<option>ASD</option>
<option>Bla</option>
<option>Ble</option>
</select>
<select class="selectpicker" data-width="100px">
<option>cow</option>
<option>bull</option>
<option>ASD</option>
<option selected>Bla</option>
<option>Ble</option>
</select>
<select class="selectpicker" data-width="50%">
<option>cow</option>
<option>bull</option>
<option>ASD</option>
<option selected>Bla</option>
<option>Ble</option>
</select>效果展示：从左至右依次为“auto”,“fit","100px","50%"。
8.自定义option
1.添加图标
用data-icon给option添加小图标，实现比较炫酷的效果
<select class="selectpicker"> <option data-icon="glyphicon-heart">Ketchup</option> <option data-icon="glyphicon glyphicon-th-large">Mustard</option> <option data-icon="glyphicon glyphicon-home">Relish</option> </select>
效果展示
如果想要获取更多样式可参考bootstrap官网的图标库，给个网址www.runoob.com/bootstrap/b…
2.插入HTML
用data-content可以在option中插入html元素,实现想要的效果。
<select class="selectpicker"> <option data-content="<span class='label label-success'>Relish</span>">Relish</option> </select>
效果展示
3.插入二级标题
用data-subtext实现二级标题，实现提示或者其他效果，如果要在select中也展示二级标题,要在初始化selectpicker时要设置showSubtext为true。
<select> <option>Ketchup</option> <option>Mustard</option> <option>Relish</option> </select>
效果展示
$('.selectpicker').selectpicker({
'selectedText':'cat',
'showSubtext':true
})
<select class="selectpicker" data-size="5">
<option data-subtext="Heinz">Ketchup</option>
<option data-subtext="ble">Mustard</option>
<option data-subtext="com">Relish</option>
</select>效果展示
9.自定义下拉菜单
1.菜单显示项大小
通过data-size属性来限制菜单显示的条数，比如说option有8条，我们只展示5条,其余的通过滚动条显示。
<select class="selectpicker" data-size="5">
<option>apple</option>
<option>banana</option>
<option>group</option>
<option>orange</option>
<option>cherry</option>
<option>mango</option>
<option>pineapple</option>
<option>lychee</option>
</select>效果展示(只展示前5个，后面的可以拖动滚动条查看)
2.全选和全不选
通过设置data-actions-box="true"来添加全选和全不选的按钮
<select class="selectpicker" multiple data-actions-box="true"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>
效果展示
当然这个按钮的文本也是可以自定制的 只需要在初始化时设置即可
$('.selectpicker').selectpicker({
'selectedText':'cat',
'noneSelectedText':'请选择',
'deselectAllText':'全不选',
'selectAllText': '全选',
})
效果展示
3.添加数据分割线
设置data-divider="true"添加数据分割线。
<select class="selectpicker" data-size="5"> <option>Mustrad</option> <option >Ketchup</option> <option >Relish</option> <option data-divider="true"></option> <option>Mustrad</option> <option >Ketchup</option> <option >Relish</option> </select>
效果展示
4.添加菜单头
用data-header为下拉菜单设置菜单头
<select class="selectpicker" data-header="Select a condiment"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>
效果展示
5.设置菜单的上浮或者下浮
通过设置dropupAuto来设置菜单的上下浮动，dropupAuto默认为true，自动确定是否应显示的菜单上面或下面的选择框，如果设置为false，系统会加入一个dropup样式的上拉框。
$('.selectpicker').selectpicker({
'selectedText':'cat',
'dropupAuto':false
})
<select class="selectpicker dropup">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>效果展示
10.不可用
在对应的控件上加入disabled即可实现
1.设置select不可用
这里select按钮失效，不能点击
<select class="selectpicker" disabled> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>
效果展示
2.设置option不可用
这里option设置属性为disabled的将无法选中
<select class="selectpicker"> <option>Mustard</option> <option disabled>Ketchup</option> <option>Relish</option> </select>
效果展示
3.设置optiongroup不可用 这里是一个optiongroup将无法选中
<select class="selectpicker test">
<optgroup label="Picnic" disabled>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</optgroup>
<optgroup label="Camping">
<option>Tent</option>
<option>Flashlight</option>
<option>Toilet Paper</option>
</optgroup>
</select>效果展示
总结
好的，这里我们基本上把官方的应用示例解读完毕，当然如果有疑问可以自己亲自去验证或者咨询博主，想实现自己想要的效果就要多加摸索和实践，只要明白其中的规则就能触类旁通了。第一篇关于bootstrap-select的官方示例文档的解读，如果想了解更多bootstrap-select的用法，可以关注我后面的博客哦。
更多编程相关知识，请访问：编程入门！！
以上がbootstrap-select の複数選択およびファジー クエリ ドロップダウン ボックスの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。