一个简单的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 ...
随机推荐
- 《Java虚拟机原理图解》1.5、 class文件中的方法表集合--method方法在class文件中是怎样组织的
0. 前言 了解JVM虚拟机原理是每一个Java程序员修炼的必经之路.但是由于JVM虚拟机中有很多的东西讲述的比较宽泛,在当前接触到的关于JVM虚拟机原理的教程或者博客中,绝大部分都是充斥的文字性的描 ...
- js -- 监听窗口的大小变化
- Nuxt.js使用lazyload
Vue的使用方式: 1. 安装插件: npm install vue-lazyload --save-dev 2. main.js引入插件: import VueLazyLoad from 'vue- ...
- GBDT调参
gbm算法流程图: gbdt 参数:参考scikit-learn The overall parameters can be divided into 3 categories: Tree-Speci ...
- C语言使用以及其它语言经常出的错误
1. 计算优先级 i/*pi/(*p) //默认即用“()”花括号分隔即可 2.分号结束 ; ; if(i<j);{ //code } //分号结束必须看清楚 3.声明变量 ; ; //声明变量 ...
- IOS Object和javaScript相互调用
在IOS开发中有时会用到Object和javaScript相互调用,详细过程例如以下: 1. Object中运行javascript代码,这个比較简单,苹果提供了非常好的方法 - (NSString ...
- 使用zTree进行数据动态显示
由于公司项目的须要.现学了一下zTree的使用. 以下是我项目的结构图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYmVuamFtaW5fd2h4/f ...
- HDU 1257 最少拦截系统（dp）
Problem Description 某国为了防御敌国的导弹突击,发展出一种导弹拦截系统.可是这样的导弹拦截系统有一个缺陷:尽管它的第一发炮弹可以到达随意的高度,可是以后每一发炮弹都不能超过前一发的 ...
- Ubuntuserver版安装
近期因为工作的须要.又一次部署server.安装了Ubuntuserver版本号,依据当时遇到的一些问题,整理了下,为方便以后的使用做个记录. 因为直接安装server端.无法 ...
- 李洪强iOS开发之 - 指定刷新tableview的某一组
李洪强iOS开发之 - 指定刷新tableview的某一组