2.精通前端系列技术之seajs模块化使工作更简单(二)
drag.js
// JavaScript Document //B开发 define(function(require,exports,module){ function drag(obj){
var disX = ;
var disY = ; obj.onmousedown = function(ev){ var ev = ev || window.event;
disX = ev.clientX - obj.offsetLeft;
disY = ev.clientY - obj.offsetTop; document.onmousemove = function(ev){
var ev = ev || window.event; var L = ev.clientX - disX;
var T = ev.clientY - disY; //L = require('./range.js').range(L , document.documentElement.clientWidth - obj.offsetWidth , 0);
//T = require('./range.js').range(T , document.documentElement.clientHeight - obj.offsetHeight , 0); obj.style.left = L + 'px';
obj.style.top = T + 'px';
}; document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}; return false; }; } exports.drag = drag; });
main.js
// JavaScript Document //A开发 define(function(require,exports,module){ var oInput = document.getElementById('input1');
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3'); require('./drag.js').drag(oDiv3); oInput.onclick = function(){ oDiv1.style.display = 'block'; require('./scale.js').scale(oDiv1,oDiv2); }; });
range.js
// JavaScript Document define(function(require,exports,module){ function range(val , max , min){ if( val > max ){
return max;
}
else if( val < min ){
return min;
}
else{
return val;
} } exports.range = range; });
scale.js
// JavaScript Document //C开发 define(function(require,exports,module){ function scale(obj1,obj2){ var downX = ;
var downY = ;
var downW = ;
var downH = ; obj2.onmousedown = function(ev){
var ev = ev || window.event;
downX = ev.clientX;
downY = ev.clientY;
downW = obj1.offsetWidth;
downH = obj1.offsetHeight; document.onmousemove = function(ev){
var ev = ev || window.event; var W = ev.clientX - downX + downW;
var H = ev.clientY - downY + downH; W = require('./range.js').range(W , , );
H = require('./range.js').range(H , , ); obj1.style.width = W + 'px';
obj1.style.height = H + 'px';
}; document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}; return false; }; } exports.scale = scale; });
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:200px; height:200px; background:red; position:absolute; display:none;}
#div2{ width:30px; height:30px; background:yellow; position:absolute; right:; bottom:;}
#div3{ width:100px; height:100px; background:blue; position:absolute; right:; top:;}
</style>
<script src="../sea/sea.js"></script>
<script> //A开发 seajs.use('./main.js'); </script>
</head> <body>
<input type="button" value="弹窗" id="input1">
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
</body>
</html>
2.精通前端系列技术之seajs模块化使工作更简单(二)的更多相关文章
- 2.精通前端系列技术之JavaScript模块化开发 seajs(一)
在使用seajs模块化开发之前,直接在页面引用js会容易出现冲突及依赖相关的问题,具体问题如下 问题1:多人开发脚本的时候容易产生冲突(比如全局参数冲突,方法名冲突),可以使用命名空间降低冲突,不能完 ...
- 2.精通前端系列技术之JS模块化开发-深入学习seaJs(四)
深入学习seajs 配置信息 alias : 别名配置 paths : 路径配置 vars : 变量配置 map : 映射配置 preload : 预加载项 debug : 调试模式 base : 基 ...
- 2.精通前端系列技术之seajs和gruntJs结合开发(三)
1.我们先来了解下模块化历史 模块化历史 nodeJS的出现(http://nodejs.org/) commonJS规范(http://www.commonjs.org/) 浏览器JS的模块化? A ...
- 3.精通前端系列技术之深入学习Jquery(一)
使用Jquery的好处: •简化JS的复杂操作 •不再需要关心兼容性(原生js获取元素样式.事件需要做兼容性) •提供大量实用方法 1.选择网页元素 <!DOCTYPE html PUBLIC ...
- 1.精通前端系列技术之js正则表达式
在不会正则的时候,我们寻找字符串某些规律或者截取部分特殊字符的时候,我们需要写很多行代码来获取我们想要的字符串,在使用正则之后,代码量会大量简洁很多 1.字符串的比较,判断是否数字类型的字符串,我们用 ...
- [后端人员耍前端系列]AngularJs篇:30分钟快速掌握AngularJs
一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...
- seaJs模块化开发简单入门
随着前端技术的日益成熟,功能越来越丰富强大,规范也越来越健全,在这样的背景环境下很快便有了CommonJs.AMD.CMD等一系列规范,使前端发开趋向模块化.规范化.CMD模块化的代表之一就是国内开发 ...
- 通往成功的钥匙--Web前端开发技术
互联网是一个服务性行业,用户对网站良好的体验度,直接影响到网站的效果.无论你做了多少广告推广,没有用户体验度等于零.Web前端技术是为了解决用户体验度而诞生的.无论是百度.新浪.阿里巴巴等大型网站,还 ...
- gulp基于seaJs模块化项目打包实践【原创】
公司还一直在延续使用jq+seajs的技术栈,所以只能基于现在的技术栈进行静态文件打包,而众所周知seajs的打包比较"偏门",在查了不少的文档和技术分享后终于琢磨出了自己的打包策 ...
随机推荐
- dateTimePicker的使用,时间控件
<li> <label>促销时间<span class="imprt">*</span></label> <inp ...
- 9月java货车版速记
运算符的优先级java自带的方法正则表达式数组和二维数组:数组遍历,填充数组,数组排序,复制数组,数组查询数组算法:冒泡,选择,反转,快速类和对象:封装,继承,多态,this关键字,抽象类和接口重写和 ...
- xml配置文件详解
1:bean的基本属性配置: <!-- id是bean的标识符,必须唯一,如果没有配置id,name默认为标识符 如果配置了id,有配置了name,那么name为别名 name可以设置多个别名, ...
- Android ViewPager更新数据
ViewPager也是一个常用的组件 与ListView类似 当绑定数据后 想刷新数据 需要在适配器中添加如下方法 protected PagerAdapter galleryAdapter = ne ...
- go-mysql
1.GO语言实现的简单TCP服务代码 package main import ( "net" "fmt" ) var ( maxRead = 1100 msgS ...
- 【linux命令】:查看系统运行状态,命令top 【转载】
原文:http://www.cnblogs.com/ggjucheng/archive/2012/01/08/2316399.html 简介 top命令是Linux下常用的性能分析工具,能够实时显示系 ...
- Hbase之获取数据
import org.apache.hadoop.hbase.TableName; import org.apache.hadoop.hbase.client.*; import org.apache ...
- Linux下软件安装方法即路径设置
Linux下软件安装方法即路径设置 http://www.cnblogs.com/edward259/archive/2010/07/02/1770066.html
- java里的基本数据类型
java里一共有八大数据类型 boolean(未定) char(2字节) byte(1字节) short(2字节) int(4字节) long(8字节) float(4字节) double(8字节), ...
- 资源 之 4.4 Resource通配符路径(拾贰)
4.4.1 使用路径通配符加载Resource 前面介绍的资源路径都是非常简单的一个路径匹配一个资源,Spring还提供了一种更强大的Ant模式通配符匹配,从能一个路径匹配一批资源. Ant路径通配 ...