学习 | 基于require.js的三级联动菜单【入门】
主要目的是学习如何使用require.js
AMD就是通过延迟和按需加载来解决各个模块的依赖关系,其中require就是AMD的框架之一
它的优点是可以解决以下问题:
- JS文件的依赖关系。
- 通过异步加载优化script标签引起的阻塞问题
- 可以简单的以文件为单位将功能模块化并实现复用
源代码:https://github.com/dirkhe1051931999/writeBlog/tree/master/sanjiliantong
html
<section style="padding:5px;">
<legend style="font-size: 30px">省市联动</legend>
出生地:<select name="P1"></select><select name="C1"></select><br>
所在地:<select name="P2"></select><select name="C2"></select><br>
工作地:<select name="P3"></select><select name="C3"></select><br>
</section>
<section style="padding:5px;">
<legend style="font-size: 30px">省市地区联动</legend>
出生地:<select name="province"></select><select name="city"></select><select name="area"></select><br>
户口所在地:<select name="province1"></select><select name="city1"></select><select name="area1"></select><br>
工作所在地:<select name="province2"></select><select name="city2"></select><select name="area2"></select><br>
无默认:<select name="province3"></select><select name="city3"></select><select name="area3"></select><br>
默认省:<select name="province4"></select><select name="city4"></select><select name="area4"></select><br>
默认省市:<select name="province5"></select><select name="city5"></select><select name="area5"></select><br>
默认省市区:<select name="province6"></select><select name="city6"></select><select name="area6"></select><br>
</section>
<script src="./require.js" data-main="./index.js"></script>
index.js
require.config({
paths:{
zepto:"./zepto",
commonObj:"./action",
PCASClass:"./PCASClass"
}
}) require(['zepto','commonObj',"PCASClass"],function($,action,PCASClass){
if ($("select[name='P1']").length>0) {
// new PCAS("sheng","shi","qu","吉林省","松原市","宁江区")
action.sanjiliandong();
}
})
action.js
define(function(require){
// console.log($)
return action= {
sanjiliandong:function(){
new PCAS("P1","C1");
new PCAS("P2","C2","陕西省");
new PCAS("P3","C3","陕西省","咸阳市");
new PCAS("province","city","area","陕西省","西安市","户县");
new PCAS("province1","city1","area1","陕西省","西安市","户县");
new PCAS("province2","city2","area2","陕西省","西安市","户县");
new PCAS("province3","city3","area3");
new PCAS("province4","city4","area4","陕西省");
new PCAS("province5","city5","area5","陕西省","宝鸡市");
new PCAS("province6","city6","area6","陕西省","西安市","户县");
}
}
})
学习 | 基于require.js的三级联动菜单【入门】的更多相关文章
- 30行代码实现js原生三级联动菜单
var oneArr=[['00','成都'],['01','绵阳'],['02','南充']] var towArr={ '00':[['000','武侯区'],['002','锦江区']], '0 ...
- 基于jQuery的AJAX实现三级联动菜单
最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录. 下面是嵌套js的html文件: <!DOCTYPE html> <html ...
- js封装的三级联动菜单(使用时只需要一行js代码)
前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...
- 基于JQ的三级联动菜单选择
<!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...
- 转: javascript实现全国城市三级联动菜单代码
<html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...
- MVC图片上传详解 IIS (安装SSL证书后) 实现 HTTP 自动跳转到 HTTPS C#中Enum用法小结 表达式目录树 “村长”教你测试用例 引用provinces.js的三级联动
MVC图片上传详解 MVC图片上传--控制器方法 新建一个控制器命名为File,定义一个Img方法 [HttpPost]public ActionResult Img(HttpPostedFile ...
- css 实现三级联动菜单
昨天因为项目中想要把二级联动菜单改成三级联动菜单,所以我就单独写了一个tab导航栏,用纯css的方式实现的三级联动.一开始我想着可以用js实现,但是js的hover事件和mouseenter,mous ...
- jQuery实现三级联动菜单(鼠标悬停联动)
效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> < ...
- QQ JS省市区三级联动
如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...
随机推荐
- IOS 如何持久化自定义对象 2014-08-01 01:38
如果持久话自定义对象 那么这个对象一定要遵循 NSCoding 协议 并实现编解码:然后再将编解码后的数据 NSKeyedArchiver 到NSData中 @interface NSKeyAnd ...
- JavaScript 基础四
遍历对象的属性 for...in 语句用于对数组或者对象的属性进行循环操作. for (变量 in 对象名字) { 在此执行代码 } 这个变量是自定义 符合命名规范 但是一般我们 都写为 k 或则 k ...
- Centos7重置root密码(详细版)
修改了root密码,步骤如下: 步骤一:在开机出现如下界面的时候就按“e”键 步骤二:在步骤一按下”e”键之后,出现如下界面,按 ↓键一直到底部找到“LANG=zh_CN.UTF-8”这句,在 ...
- 用终端命令行(BASH)将本地项目上传到Github并提交代码
第一步: 在Github上创建自己的repository 第二步:建立本地仓库cd到你的本地项目根目录下,执行git命令 1:$ cd 到你的项目目录下 2:$ git init 第三步:将本地项目工 ...
- PhpStorm安装及破解流程
下载完以后,把破解的jar包放到bin目录下,更改两个.vmoptions文件 我是安装了一个破解的和汉化包 jet是破解包,resource是汉化包,然后还要修改本地主机地址 例: 0.0.0.0 ...
- map[string]interface{} demo
package main import ( "encoding/json" "fmt" "reflect" ) func demo1() { ...
- CSS实现大数据热点波纹图
CSS实现大数据热点波纹图 实现效果: 涉及知识点: 定位 盒子阴影 动画 思想:以3道波纹为例.首先使用一个div盒子作为圆心,然后每道波纹作为一个div.4个盒子均使用定位属性定位到圆心.然后设置 ...
- 操作系统-I/O(6)I/O与系统调用
所有高级语言的运行时(runtime)都提供了执行I/O功能的机制. 例如,C语言中提供了包含像printf()和scanf()等这样的标准I/O库函数, C++语言中提供了如 <<和&g ...
- HTTP基础--网页基础
网页的组成: 网页可以分为三大部分---HTML,CSS和JavaScript.如果把网页比作一个人的话,HTML相当于骨架,JavaScript相当于肌肉,CSS相当于皮肤,三者结合起来才能形成一个 ...
- 完美解决方案-雪花算法ID到前端之后精度丢失问题
最近公司的一个项目组要把以前的单体应用进行为服务拆分,表的ID主键使用Mybatis plus默认 的雪花算法来生成. 快下班的时候,小伙伴跑过来找我,:"快给我看看这问题,卡这卡了小半天了 ...