seajs构建web申请书
define(function(require, exports, modules) {
// jquery 源代码
return jQuery;
});
seajs.config({
alias: {
"jquery": "/js/jquery_cmd.js" // 这个路劲写对（本项目基于框架以下静态文件夹js下）
}
});
define(function(require, exports, module) {
// 引入jquery模块
var $ = require('jquery');
if (typeof $('h2') !== "undefined") {
var oContent = {
logText: '%c这是一个%c奇妙的%c站点%c',
cssStyle: ['color:#a48bf2;', 'color:#ff0000;', 'color:#a0c484;', 'padding:55px 135px;background:url(http://res.imtt.qq.com/actnew/css/head_logo.png) no-repeat center center;line-height:109px;']
};
console.log(oContent['logText'], oContent['cssStyle'][0], oContent['cssStyle'][1], oContent['cssStyle'][2], oContent['cssStyle'][3]);
} else {
console.log('not found');
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>seajs第一个应用</title>
</head>
<body>
<h2>hello world</h2>
<script src="/js/sea.js" id="seajsnode"></script>
<script type="text/javascript">
seajs.use("/js/main");
</script>
</body>
</html>
define(function(require) {
var $, jQuery;
$ = jQuery = require('jquery');
// 插件整个代码
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>requirejs引用echarts图表</title>
</head>
<body>
<!-- 为Echarts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<script src="/js/require.js" id="requirejsnode"></script> <script type="text/javascript">
require.config({
paths: {
// 这个路径写对（该项目基于WSP框架下静态文件夹js下）
'echarts': './js/echarts-map',
'echarts/chart/bar': './js/echarts-map',
'echarts/chart/line': './js/echarts-map',
'echarts/chart/map': './js/echarts-map'
}
});
require([
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map'
], function(ec) {
var domMain = document.getElementById('main');
var myChart = ec.init(domMain);
myChart.setOption({
tooltip: {
trigger: 'axis'
},
legend: {
data: [ '蒸发量', '降水量' ]
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: [ 'line', 'bar' ] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
xAxis: [
{
type: 'category',
data: [ '1月', '2月', '3月' ]
}
],
yAxis: [
{
type: 'value',
splitArea: { show: true }
}
],
series: [
{
name: '蒸发量',
type: 'bar',
data: [ 2.0, 4.9, 7.0 ]
},
{
name: '降水量',
type: 'bar',
data: [ 2.6, 5.9, 9.0 ]
}
]
});
});
</script>
</body>
</html>
最后页面訪问效果如图：
版权声明：本文博主原创文章，博客，未经同意不得转载。
seajs构建web申请书的更多相关文章
- angularjs + seajs构建Web Form3
angularjs + seajs构建Web Form前端(三) -- 兼容easyui 回顾 在上一章中使用了angular实现了ajax form和树形结构,经过以上两章对于angular的大致使 ...
- bootstrap + angularjs + seajs构建Web Form前端2
bootstrap + angularjs + seajs构建Web Form前端(二) 回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操 ...
- bootstrap + angularjs + seajs构建Web Form前端(1)
bootstrap + angularjs + seajs构建Web Form前端(一) 简介 Bootstrap是Twitter推出的一个用于前端开发的开源工具包,它由Twitter的设计师Mark ...
- angularjs + seajs构建Web Form前端(一)
简介 Bootstrap是Twitter推出的一个用于前端开发的开源工具包,它由Twitter的设计师Mark Otto和Jacob Thornton合作开,是一个CSS/HTML框架. Angula ...
- angularjs + seajs构建Web Form前端(二)
回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操作过程当中如何使用ui-bootstrap,继而完成简单功能后如何引入seajs后如何使n ...
- angularjs + seajs构建Web Form前端(三) -- 兼容easyui
回顾 在上一章中使用了angular实现了ajax form和树形结构,经过以上两章对于angular的大致使用,对于angular也有了初步的认识,接下来的内容只会对angular的一些用法做简单的 ...
- NodeJs+http+fs+request+cheerio 采集,保存数据,并在网页上展示(构建web服务器)
目的: 数据采集 写入本地文件备份 构建web服务器 将文件读取到网页中进行展示 目录结构: package.json文件中的内容与上一篇一样:NodeJs+Request+Cheerio 采集数据 ...
- 使用EXtjs6.2构建web项目
一.项目简介 众所周知ext是一款非常强大的表格控件,尤其是里边的grid为用户提供了非常多的功能,现在主流的还是用extjs4.0-4.2,但是更高一点的版本更加符合人的审美要求.因此,在今天咱们构 ...
- 《深入浅出Node.js》第8章 构建Web应用
@by Ruth92(转载请注明出处) 第8章 构建Web应用 一.基础功能 请求方法:GET.POST.HEAD.DELETE.PUT.CONNECT GET /path?foo=bar HTTP/ ...
随机推荐
- windows SID
显示SID whoami /user 修改SID C:\windows\system32\sysprep\sysprep.exe /generalize /oobe /reboot
- BZOJ 2245 SDOI 2011 工作安排 费用流
题目大意:有一些商品须要被制造.有一些员工.每个员工会做一些物品,然而这些员工做物品越多,他们的愤慨值越大,这满足一个分段函数.给出哪些员工能够做哪些东西,给出这些分段函数,求最小的愤慨值以满足须要被 ...
- [TypeScript] Interface and Class
When to use Interface and when to use Class. Let's see one example: export interface Lesson { course ...
- [Maven实战]（6）仓库（本地仓库，远程仓库，镜像）
1. 简单介绍 maven能够在某个位置统一存储全部maven项目共享的构件,这个统一的位置就是仓库.实际的Maven项目将不会各自存储其依赖文件,它们仅仅须要声明这些依赖的坐标,在须要的时候(比如. ...
- swift项目第六天：中间发布按钮的封装以及监听点击事件
import UIKit /* 总结:1:给UIButton写分类,新建文件swiftFile,一般为了区分起名字都是名字-Extension,要想调用UI控件需要导入 import UIKit框架, ...
- JAVA SkipList 跳表 的原理和使用例子
跳跃表是一种随机化数据结构,基于并联的链表,其效率可比拟于二叉查找树(对于大多数操作需要O(log n)平均时间),并且对并发算法友好. 关于跳跃表的具体介绍可以参考MIT的公开课:跳跃表 跳跃表的应 ...
- 日期和时间的格式化定义（ISO C89）
格式化定义本质上控制的是占位. 日期 %Y:4位数的年份: %y:2位数的年份: %m:2位数的月份(1-12) %d:2位数的日(01-31) 时间 %H:24小时制(0-23) %I:12小时制( ...
- 一起学Python：TCP简介
TCP介绍 TCP协议,传输控制协议(英语:Transmission Control Protocol,缩写为 TCP)是一种面向连接的.可靠的.基于字节流的传输层通信协议,由IETF的RFC 793 ...
- javax.servlet.WriteListener
http://www.programcreek.com/java-api-examples/index.php?api=javax.servlet.WriteListener
- CentOS 7安装fcitx中文输入法
安装过程例如以下: 1.增加EPEL源 EPEL7差点儿是CentOS必备的源: sudo yum install epel-release 2.加入mosquito-myrepo源 mosquito ...