Flagstrap 多语言国家选择jQuery插件

PetitQ 表单/表格 2018-11-12 1.91K 0 0

flagstrap.js 是一款基于 bootstrap3 的 jquery 国家选择插件。flagstrap.js 插件能在 bootstrap3 原生 selec 下拉选择框的基础上，制作出带国旗效果的国家选择下拉框。

使用方法

在页面中引入 jquery 和 bootstrap 相关文件，以及 flags.css 和 jquery.flags.js 文件。

也想出现在这里？联系我们吧

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

<link href="css/flags.css" rel="stylesheet" type="text/css">

<script src="js/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="js/jquery.flags.js"></script>

使用该 jquery 国家选择插件的基本 HTML 结构如下：

        <label>选择一个国家</label><br>

        <div id="flagstrap" data-input-name="country"></div>

可以通过 data-*属性来添加配置参数。

        <label>选择一个国家</label><br>

             data-button-type="btn-default"

             data-scrollable-height="250px"

上面的代码生成一个带所有可选国家，默认选择德国，高度为 250 像素的 select 下拉下拉选择框。

在页面 DOM 元素加载完毕之后，可以通过 flagStrap()方法来初始化该 jquery 国家选择插件。

或者在初始化是传入配置参数：

        <label>选择一个国家</label><br>

    onSelect: function(value, element) {

该 jquery 国家选择插件的可用配置参数有：

参数	类型	默认值	描述
inputName	string	uniquely generated	select 下拉框的`name`属性。
inputId	string	uniquely generated	select 下拉框的`id`属性。
buttonSize	string	"btn-md"	下拉框的 bootstrap 按钮尺寸 class。
buttonType	string	"btn-default"	下拉框的 bootstrap 按钮情景类 class。
labelMargin	string	"20px"	国家图标和文本之间的间距。
scrollable	boolean	false	下拉框是否可以滚动。
scrollableHeight	string	"250px"	下拉框的`max-height`。
countries（可选）	object	(all)	只显示指定的国家。例如： `{"GB": "United Kingdom", "US": "United States"}`
onSelect（可选）	function	null	select 下拉框改变时的回调函数。接收两个参数，一个是新的值，一个是 select 元素。
placeholder	bool\|object	`{value: "", text: "Please select a country"}`	设置占位文本。如果要禁用占位文本，设置为`false`。