一个简单的backbone实例（基于139邮箱）
先看一下效果图：
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>邮箱前端实现</title>
<style type="text/css"> *{
margin:0px;
padding:0px;
} .main{
margin:20px 30px;
text-align:center;
line-height:30px;
} .left{
width:350px;
height:450px;
margin-top:30px;
} .right{
width:600px;
height:700px;
margin-left:400px;
margin-top:-480px;
} .bottom{
border:1px solid #eee;
width:100%;
text-align:left;
} #folderList li{
list-style: none;
} #emailList li{
list-style: none;
} #contentList li{
list-style: none;
} .on{
background-color:#ccc;
} #page{
text-align: right;
margin-right: 30px;
}
#page a{
text-decoration:none;
}
</style>
</head>
<body> <div class="main" name="main">
<div class="left" name="left" id="left">
<ul id="folderList"></ul>
</div>
<div class="right" name="right" id="right">
<div id="page">
<a id="previous" href="javascript:void(0);">上一页</a>
<a id="behind" href="javascript:void(0);">下一页</a>
</div>
<ul id="emailList"></ul>
</div>
<div class="bottom" name="bottom" id="bottom">
<ul id="contentList"></ul>
</div>
</div>
</body> <script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script> <script type="text/javascript">
Model = Backbone.Model.extend({
initialize: function(){
//alert('Hey, you create me!');
},
defaults: {
pageIndex : 1,
fid : -1,
mid : -1
},
start : 1, //邮件开始
total : 20, //每页显示多少封邮件
firstAddFolder : true, //判断是否是第一次加载文件夹
firstAddTitle : true, //判断是否是第一次加载邮件列表
getResult : function(options){
$.ajax({
url : options.url,
dataType : "json", //返回的数据类型,text 或者 json数据，建议为json
type : "post", //传参方式，get 或post
data : options.data, //传过去的参数，格式为 变量名：变量值
error : function(msg){ //若Ajax处理失败后回调函数，msg是返回的错误信息
//alert( "Ajax跳转处理失败");
//console.log(msg);
options.error(msg.responseText);
},
success: function(text) { //若Ajax处理成功后的回调函数，text是返回的信息
//alert("Ajax处理已成功：" + text);
//console.log(text);
options.success(text.responseText);
}
});
}
}); //文件夹列表视图
ViewLeft = Backbone.View.extend({
el: $("#left"),
initialize: function (options) { //初始化
//this.model = options.model;
this.viewRight = options.viewRight;
this.bindFidChangeEvent();
},
events: {
"click #folderList li a": "checkIn", //事件绑定，给a标签绑定点击事件
}, checkIn: function(event){
var target = $(event.target);
var fid = target.attr("fid"); //获取被点击的元素的fid
this.model.set("fid",fid);
target.parent().parent().find("li").removeClass("on"); //清除其余的.on
target.parent().addClass("on"); //给被点击的对象绑定.on
}, autoClick : function(){ //主动触发点击事件
$("#folderList li:first a").click();
}, bindFidChangeEvent: function () {
var self = this;
self.model.on("change:fid", function(){ //给fid绑定监听事件
self.model.firstAddTitle = true;
self.model.start = 1;
if(self.model.get("pageIndex")>1){
self.model.set("pageIndex",1);
}else{
self.viewRight.getEmailTitle(self.model.get("fid"));
}
});
self.model.on("change:pageIndex", function(){ //给pageIndex绑定监听事件
self.model.firstAddTitle = true;
self.viewRight.getEmailTitle(self.model.get("fid"));
});
}, //获取文件夹列表
getFolder : function(){
var self = this;
var sid = location.href.match(/sid=([^?#&]*)[?#&]?/)[1];
var data = [ '<object>',
'<int name="stats">1</int>',
'<int name="type">0</int>',
'<int name="command">1</int>',
'</object>'].join("");
var options = {};
options.url = "http://appmail.mail.10086.cn/s?func=mbox:getAllFolders&sid="+sid; options.data = data;
options.success = function(result){
console.log(result);
};
options.error = function(result){
//console.log('邮件列表：'+result);
var resultData = eval("(" + result + ")");
var array = resultData.var;
$("#folderList").html('');
_.each(array, function(item){
var html = '<li><a messageCount="' + item.stats.messageCount + '" fid="' + item.fid + '" href="javascript:void(0);">' + item.name + '</a></li>';
$("#folderList").append(html);
});
if(self.model.firstAddFolder){
self.autoClick();
self.model.firstAddFolder = false;
}
}; this.model.getResult(options);
} }); //邮件列表视图
ViewRight = Backbone.View.extend({
el: $("#right"),
initialize: function () { //options 可以传也可以不传
//this.model = options.model;
this.viewBottom = new ViewBottom();
this.bindMidChangeEvent();
},
events: {
"click #emailList li a": "checkIn", //事件绑定，绑定Dom中id为**的元素
"click #previous" : "previous",
"click #behind" : "behind",
},
checkIn: function(event){
var target = $(event.target);
var mid = target.attr("mid");
var fid = target.attr("fid");
this.model.set("mid",mid);
target.parent().parent().find("li").removeClass("on");
target.parent().addClass("on");
}, previous: function(){
var self = this; if(self.model.get("pageIndex")<2){
alert("您好！已经到第一页了");
}else{
self.model.start = (self.model.get("pageIndex")-2)*(self.model.total)+1;
self.model.set("pageIndex",self.model.get("pageIndex")-1);
}
}, behind: function(){
var self = this;
self.model.start = (self.model.get("pageIndex"))*(self.model.total)+1;
self.model.set("pageIndex",self.model.get("pageIndex")+1);
}, autoClick : function(){
$("#emailList li:first a").click();
},
bindMidChangeEvent: function () {
var self = this;
self.model.on("change:mid", function(){
self.viewBottom.getEmailContent(self.model.get("fid"),self.model.get("mid"));
});
},
//获取邮件列表
getEmailTitle : function(fid){
var self = this;
var sid = location.href.match(/sid=([^?#&]*)[?#&]?/)[1];
var data = [ '<object>',
'<int name="fid">' + fid + '</int>',
'<string name="order">receiveDate</string>',
'<string name="desc">1</string>',
'<int name="start">' + self.model.start + '</int>',
'<int name="total">' + self.model.total + '</int>',
'<string name="topFlag">top</string>',
'<int name="sessionEnable">2</int>',
'</object>'].join("");
var options = {};
options.url = "http://appmail.mail.10086.cn/s?func=mbox:listMessages&sid="+sid; options.data = data;
options.success = function(result){
console.log(result);
};
options.error = function(result){
//console.log('邮件标题：'+result);
var resultData = eval("(" + result + ")");
var array = resultData.var;
$("#emailList").html('');
_.each(array, function(item){
//console.log(item.name);
var html = '<li><a fid="' + item.fid + '" mid="' + item.mid + '" href="javascript:void(0);">' + item.subject + '</a></li>';
$("#emailList").append(html);
});
if(self.model.firstAddTitle){
self.autoClick();
self.model.firstAddTitle = false;
}
}; this.model.getResult(options);
} }); //邮件内容视图
ViewBottom = Backbone.View.extend({
el: $("#bottom"),
initialize: function () {
this.model = new Model;
},
events: {
//"click #left": "checkIn", //事件绑定，绑定Dom中id为left的元素
},
//获取邮件内容
getEmailContent : function(fid,mid){
var sid = location.href.match(/sid=([^?#&]*)[?#&]?/)[1];
var data = '';
var options = {};
options.url = "http://appmail.mail.10086.cn/RmWeb/view.do?func=view:readMessage&comefrom=54&sid="+sid+"&mid="+mid+"&callback=readMailReady&fid="+fid+""; options.data = data;
options.success = function(result){
console.log(result);
};
options.error = function(result){
//console.log('邮件内容：'+result);
$("#contentList").html('');
$("#contentList").append(result);
}; this.model.getResult(options);
} });
//实例化Model、ViewRight、ViewLeft
var model = new Model();
var viewRight = new ViewRight({model : model});
var viewLeft = new ViewLeft({model : model, viewRight : viewRight});
viewLeft.getFolder();
</script> </html>
只要再引入jquery.min.js、underscore.js、backbone.js。然后用fiddler挂载这几个文件，从139邮箱登陆页登陆进去即可看到效果。
一个简单的backbone实例（基于139邮箱）的更多相关文章
- 使用JAVA实现的一个简单IOC注入实例
https://blog.csdn.net/echoshinian100/article/details/77977823 欲登高而望远,勿筑台于流沙 RSS订阅 原 使用JAVA实现的一个简单IOC ...
- Java Tread多线程（0）一个简单的多线程实例
作者 : 卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/39341887 本文演示,一个简单的多线程实例,并简单分析一下线程. 编程多 ...
- 使用ssm（spring+springMVC+mybatis）创建一个简单的查询实例（三）（错误整理篇）
使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(一) 使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(二) 以上两篇已经把流 ...
- 使用ssm（spring+springMVC+mybatis）创建一个简单的查询实例（二）（代码篇）
这篇是上一篇的延续: 用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(一) 源代码在github上可以下载,地址:https://github.com/guoxia ...
- 使用ssm（spring+springMVC+mybatis）创建一个简单的查询实例（一）
梳理下使用spring+springMVC+mybatis 整合后的一个简单实例:输入用户的 ID,之后显示用户的信息(此次由于篇幅问题,会分几次进行说明,此次是工程的创建,逆向生成文件以及这个简单查 ...
- Qt5.9一个简单的多线程实例（类QThread）（第一种方法）
Qt开启多线程,主要用到类QThread.有两种方法,第一种用一个类继承QThread,然后重新改写虚函数run().当要开启新线程时,只需要实例该类,然后调用函数start(),就可以开启一条多线程 ...
- 一个简单的WebService实例
WebService在.NET平台下的作用是在不同应用程序间共享数据与数据交换. 要达到这样的目标,Web services要使用两种技术: XML(标准通用标记语言下的一个子集):XML是在web上 ...
- 从一个简单的小实例分析JSP+Servelt与JSP+Struts2框架的区别
最近在学struts2,struts2相比以前的JSP+Servlet,在处理流程上的更简单,我们就一个小实例来具体分析一下. 实例内容如下: 实现一个简单的注册页面包括:用户名.密码.重复密码.年龄 ...
- 一个简单的AJAX实例
创建一个简单的XMLHttpRequest,从一个TXT文件中返回数据. 来源于菜鸟教程 <!DOCTYPE html><html><head><meta c ...
随机推荐
- mysql 5.7版本目录无data文件夹的解决办法
安装mysql 5.7+版本时,若发现因根目录下,缺少data文件夹的情况, ***请不要去拷贝其他版本的data文件夹!*** 因为此操作会出现很多潜在问题:比如我遇到的执行show variabl ...
- 使用 Git + Dropbox + SourceTree 做 Source Code Management
此篇文章主要針對有安裝 XCode 的 Mac 用戶. Git 版本控管工具,作用類似 CVS.Subversion(簡 稱SVN),好處在於 Git 不像 CVS 及 SVN 是屬於集中式的版本控管 ...
- maven删除不必要的依赖；优化pom依赖研究
mvn dependency:copy-dependencies -DoutputDirectory=/home/admin/git/oceanus/test 会把所有依赖的插件版本都拷贝进去,而不是 ...
- docker下用keepalived+Haproxy实现高可用负载均衡集群
启动keepalived后宿主机无法ping通用keepalived,报错: [root@localhost ~]# ping 172.18.0.15 PING () bytes of data. F ...
- 一种排序（nyoj8）（简单排序）
一种排序 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描写叙述 如今有非常多长方形.每个长方形都有一个编号,这个编号能够反复.还知道这个长方形的宽和长,编号.长.宽都是整数 ...
- 手机加载优化 - 2x、3x图
人们常说,现在的流量不值钱了,图越大越好咯! 我想说的是,浏览器虽然不值钱了,但速度还是略快吧! 文章来自:UI妹儿 icon_alipay.png→iPhone 1-3代的手机(已经不考虑了) ic ...
- GridView的经常使用属性
1.android:numColumns="auto_fit" //GridView的列数设置为自己主动 2.android:columnWidth="90dp &q ...
- PAT 1094. The Largest Generation(BFS)
CODE: #include<cstdio> #include<cstring> #include<queue> using namespace std; bool ...
- eImage(仅两行代码实现输出从数据库中查询到的二进制字段)标签
功能: 专门用于向浏览器输出从数据库中查询到的二进制字段.支持通用的几十种文件类型 别名为edoc 使用方法: <chtml><eimage id=书包名type=类型>key ...
- selenium-python问题日记
今天在学习selenium时遇到了两个问题,在这里记录一下: 使用unittest框架组织了测试用例后,拓展一下功能就成了我最想做的事情, 所以决定添加发邮件功能. 使用python自带的smtpli ...