一个简单的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主从架构配置
MySQL主从架构配置有两台MySQL数据库服务器master和slave,master为主服务器,slave为从服务器,初始状态时,master和slave中的数据信息相同,当master中的数据发 ...
- 最新的hustoj搭建姿势
试着照某度上的教程搭了一下hustoj,出了一些问题,之前的搭建姿势很多已经不适用了,重新整理一下思路,方法二简单粗暴: 方法一: 首先虚拟机安装了Elementory OS (基于Ubuntu的衍生 ...
- Django简易安装
Django简易安装 1,下载 https://www.djangoproject.com/download/ 2, 拷贝至python同级目录 python setup.py install 3,在 ...
- SolidEdge 如何绘制零件图的剖视图
1 点击检视-剖面,然后选择剖切面 2 比如要全剖,则绘制好方框之后点返回,选择方向. 选择剖切深度,然后预览即可 一个零件可以进行多次剖切
- SQL ORDER BY 关键字
SQL ORDER BY 关键字 ORDER BY 关键字用于对结果集进行排序. SQL ORDER BY 关键字 ORDER BY 关键字用于对结果集按照一个列或者多个列进行排序. ORDER BY ...
- vuex 与 redux 的 区别
一:redux和flux的区别 1)redux是flux中的一个实现 2))在redux中我们只能定义一个store,在flux中我们可以定义多个 3)在redux中,store和dispatch都放 ...
- Android Studio——gradle同步出错：MALFORMED
Android Studio之前使用本地的gradle-2.10,而后创建新的工程总是报错,信息如下: Gradle sync failed: MALFORMED 而后在File->Projec ...
- Struts拦截器（转）
xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC &qu ...
- String 字符串基本使用
目录 一.JavaDoc解释 二.基础属性和构造函数 三.基本方法说明 一.JavaDoc解释 String类表示字符串,所有Java程序中的字符串像是"abc"都是此类的实例,字 ...
- Windows7和Ubuntu12.04无法选择系统
Windos7 旗舰版 Ubuntu12.04LTS 64位版本号 硬件挂载两个硬盘 SSD+机械 Windows7和Ubuntu12.04都装在SSD上.眼下先装好了Windows7,打算装Ubun ...