摘要:flagstrap.js是一款基于bootstrap3的jQuery国家选择插件。flagstrap.js插件能在bootstrap3原生selec下拉选择框的基础上,制作出带国旗效果的国家选择下拉框。希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
简要教程
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>
HTML结构
使用该jquery国家选择插件的基本HTML结构如下:
<form class="form-horizontal"> <div class="form-group"> <label>选择一个国家</label><br> <div id="flagstrap" data-input-name="country"></div> </div> </form>
可以通过data-*属性来添加配置参数。
<form> <div class="form-group"> <label>选择一个国家</label><br> <div id="flagstrap" data-input-name="country2" data-selected-country="DE" data-button-size="btn-md" data-button-type="btn-default" data-scrollable-height="250px" data-scrollable="true"> </div> </div> </form>
上面的代码生成一个带所有可选国家,默认选择德国,高度为250像素的select下拉下拉选择框。
初始化插件
在页面DOM元素加载完毕之后,可以通过flagStrap()方法来初始化该jquery国家选择插件。
$(document).ready(function() { $('#flagstrap').flagStrap(); });
或者在初始化是传入配置参数:
<form class="form-horizontal"> <div class="form-group"> <label>选择一个国家</label><br> <div id="flagstrap2"></div> </div> </form>
$('#flagstrap2').flagStrap({ countries: { "AU": "Australia", "GB": "United Kingdom", "US": "United States" }, inputName: 'country', buttonSize: "btn-lg", buttonType: "btn-primary", labelMargin: "20px", scrollable: false, scrollableHeight: "350px", onSelect: function(value, element) { // }, placeholder: { value: "", text: "Please select a country" } });
本文由职坐标整理发布,欢迎关注职坐标WEB前端jQuery频道,获取更多jQuery知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号