日本地图选择插件、日本地区选择插件
一、JQuery插件之 日本地图地区选择器
- 源代码名称:japan-map
- 源代码网址:http://www.github.com/takemaru-hirai/japan-map
演示地址:http://takemaru-hirai.github.io/japan-map/
二、使用方法:
引用
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script><script src="./data/japan/jquery.japan-map.js"></script>
<div id="map-container"></div>
js代码:
$(function () {var source = [{ "id": 3843, "text": "北海道地区 ", "children": [{ "id": 3844, "text": "北海道", "children": [] }] }, { "id": 3845, "text": "东北地区", "children": [{ "id": 3846, "text": "青森县", "children": [] }, { "id": 3847, "text": "岩手县", "children": [] }, { "id": 3848, "text": "宫城县", "children": [] }, { "id": 3849, "text": "秋田县", "children": [] }, { "id": 3850, "text": "山形县", "children": [] }, { "id": 3851, "text": "福岛县", "children": [] }] }, { "id": 3852, "text": "关东地区", "children": [{ "id": 3853, "text": "茨城县", "children": [] }, { "id": 3854, "text": "栃木县", "children": [] }, { "id": 3855, "text": "群马县", "children": [] }, { "id": 3856, "text": "埼玉县", "children": [] }, { "id": 3857, "text": "千叶县", "children": [] }, { "id": 3858, "text": "东京都", "children": [] }, { "id": 3859, "text": "神奈川县", "children": [] }] }, { "id": 3860, "text": "中部地区", "children": [{ "id": 3861, "text": "新潟县", "children": [] }, { "id": 3862, "text": "富山县", "children": [] }, { "id": 3863, "text": "石川县", "children": [] }, { "id": 3864, "text": "福井县", "children": [] }, { "id": 3865, "text": "山梨县", "children": [] }, { "id": 3866, "text": "长野县", "children": [] }, { "id": 3867, "text": "岐阜县", "children": [] }, { "id": 3868, "text": "静冈县", "children": [] }, { "id": 3869, "text": "爱知县", "children": [] }] }, { "id": 3870, "text": "近畿地区", "children": [{ "id": 3871, "text": "滋贺县", "children": [] }, { "id": 3872, "text": "京都府", "children": [] }, { "id": 3873, "text": "大阪府", "children": [] }, { "id": 3874, "text": "兵库县", "children": [] }, { "id": 3875, "text": "奈良县", "children": [] }, { "id": 3876, "text": "和歌山县", "children": [] }, { "id": 3898, "text": "三重县", "children": [] }] }, { "id": 3877, "text": "中国地区", "children": [{ "id": 3878, "text": "鸟取县", "children": [] }, { "id": 3879, "text": "岛根县", "children": [] }, { "id": 3880, "text": "冈山县", "children": [] }, { "id": 3881, "text": "广岛县", "children": [] }, { "id": 3882, "text": "山口县", "children": [] }] }, { "id": 3883, "text": "四国地区", "children": [{ "id": 3884, "text": "德岛县", "children": [] }, { "id": 3885, "text": "香川县", "children": [] }, { "id": 3886, "text": "爱媛县", "children": [] }, { "id": 3887, "text": "高知县", "children": [] }] }, { "id": 3888, "text": "九州地区", "children": [{ "id": 3889, "text": "福冈县", "children": [] }, { "id": 3890, "text": "佐贺县", "children": [] }, { "id": 3891, "text": "长崎县", "children": [] }, { "id": 3892, "text": "熊本县", "children": [] }, { "id": 3893, "text": "大分县", "children": [] }, { "id": 3894, "text": "宫崎县", "children": [] }, { "id": 3895, "text": "鹿儿岛县", "children": [] }] }, { "id": 3896, "text": "冲绳地区", "children": [{ "id": 3897, "text": "冲绳县", "children": [] }] }];var num = 0;var areas = [];for (var i = 0; i < source.length; i++) {for (var j = 0; j < source[i].children.length; j++) {num++;var item = source[i].children[j];areas.push({code: num,name: item.text,"color": "#CCCCCC","hoverColor": "#91c900",prefectures: [num]});}}$("#map-container").japanMap({areas: areas,selection: "area",borderLineWidth: 0.25,drawsBoxLine: false,movesIslands: true,showsAreaName: true,width: 900,fontSize: 12,fontColor: "areaColor",fontShadowColor: "black",backgroundColor: "#f2fcff",onSelect: function (data) {console.info(data);},});});
三、效果预览:
更多:
JQuery手机版日期选择控件之jdate(jquery-date)
JQuery.dataTables免费开源的数据表格插件
jquery.fly.js实现添加购物车效果、实现抛物线运动
日本地图选择插件、日本地区选择插件相关推荐
- php 地域插件,Z-BlogPHP地区分站插件
此插件仅是访问地区站的时候在标题和分类名称前面加地区名称,并不是独立发布新闻的分站 利用全国省市分站功能解决网站SEO优化地区问题,可以利用城市分站优化大量的地区和长尾关键词,可以起到一个很好的SEO ...
- antd的级联选择,关于国家地区选择的数据
// 地址文件const provice: any = [{value: "北京市",label: "北京市",children: [{value: " ...
- js三级地区选择插件,省市县级联下拉列表
js三级地区选择插件,省市县级联下拉列表 3级省地市级联菜单,ie/ff 测试通过,支持多个并存,支持事件 demo1为最简单的一份实现,页面id配置需在js文件中写入,适合简单情况 demo2增加了 ...
- 三级联动地区选择插件
最近在做一个需求,用到了地区选择的下拉插件,自己做了一点封装, 效果类似下图 使用的时候只需要初始化控件就行了 var city = new City("area").init() ...
- 仿智联招聘首页html源码,模仿智联职位选择,地区选择Js插件
[实例简介] 模仿智联职位选择,地区选择Js插件,界面需要做简单的修改 [实例截图] [核心代码] jquery-plugin-ExtendedBoxy └── jquery-plugin-Exten ...
- 选择最佳的WordPress活动日历插件
您是否经营需要定期安排和显示活动的业务,例如研讨会,网络研讨会,聚会,音乐会等? 然后,您将需要一个可靠的事件日历,以在一个有用的地方合并并显示与您的业务事件相关的所有信息,并使客户了解日期,时间,位 ...
- 【Android 插件化】Hook 插件化框架 ( 从源码角度分析加载资源流程 | Hook 点选择 | 资源冲突解决方案 )
Android 插件化系列文章目录 [Android 插件化]插件化简介 ( 组件化与插件化 ) [Android 插件化]插件化原理 ( JVM 内存数据 | 类加载流程 ) [Android 插件 ...
- chosen jquery ajax搜索,基于chosen插件实现人员选择树搜索自动筛选功能
要实现的功能截图: 要求: 1.点击输入框可以根据拼音自动筛选数据,并且标记已经选择的数据,没有结果的时候提示,相应的更新左边树状态 2.勾选树右侧树的复选框左侧出现相应的内容 我用到的插件 vue+ ...
- Chrome应用商店选择你想下载的插件
对于翻墙用户来说,安装Chrome浏览器插件很简单,但是若想给妹子安装,这就是个问题了.如果我们可以把想安装的插件下载下来,直接安装不就行了吗.但是问题是Chrome在安装完插件就把安装文件删除了,这 ...
最新文章
- centos 非root用户(普通用户)替换yum安装软件方法
- 让node.js支持es6的词法
- (9)MSP430F5529 定时器Timer_A
- Keepalived的VRRPD配置
- 服务器角色与数据库角色
- 剑指Offer - 面试题15. 二进制中1的个数(位运算)
- linux压缩命令(二)bzip2总结
- [转载]高性能托管应用程序设计入门
- Spring Aop中解析spel表达式,实现更灵活的功能
- 微分方程模型_天生一对,硬核微分方程与深度学习的「联姻」之路
- ThinkPHP在前台模板格式化输出时间
- 教学管理文件信息检索系统设计与实现
- soul群聊派对显示服务器异常,Soul群聊派对玩法攻略
- 基于Arduino UNO的光驱写字机制作
- scp过程中的两个问题解决 “The authenticity of host can‘t be established” “ Permission denied“
- C++ Cstring类型使用
- java水平测试_【考试】java基础知识测试,看你能得多少分?
- 程序员久坐伤身,站起来,走出去,别回来
- Eclipse日志文件存放在何处
- 今天给自己分享下我的心得体会