一个简单的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>&nbsp;&nbsp;&nbsp;&nbsp;
                    <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邮箱)

时间: 2024-10-12 20:58:19

一个简单的backbone实例(基于139邮箱)的相关文章

【CentOS】一个简单的Expect实例详解

Expect是基于Tcl的相对简单的一个免费的基本变成工具语言,用于实现自动和交互式任务程序进行通信,无须人工干预. 一.Expect的安装检查与Linux系统的实验环境 1.Expect的安装 [[email protected]]# rpm -qa expect expect-5.43.0-8.el5 expect-5.43.0-8.el5 #如果未安装expect,可以通过yum进行安装 [[email protected]]# yum install expect -y 2.Linux的

Java Tread多线程(0)一个简单的多线程实例

作者 : 卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/39341887 本文演示,一个简单的多线程实例,并简单分析一下线程. 编程多线程时,一般步骤: 1)继承Thread函数. 2)覆盖run函数. 注意:1)main函数为主线程,main里面存放的是主线程的执行代码: Demo1为子线程,里面的run函数里面存放的是子线程需要执行的代码:其中,本文中主线程和子线程执行的优先级是一样的. 2)启动线程必须用start()启动,

一个简单的WebService实例

WebService在.NET平台下的作用是在不同应用程序间共享数据与数据交换. 要达到这样的目标,Web services要使用两种技术: XML(标准通用标记语言下的一个子集):XML是在web上传送结构化数据的伟大方式,Web services要以一种可靠的自动的方式操作数据,HTML(标准通用标记语言下的一个应用)不会满足要求,而XML可以使web services十分方便的处理数据,它的内容与表示的分离十分理想: SOAP:SOAP使用XML消息调用远程方法,这样web service

Ajax学习(二)—— 一个简单的Ajax实例

通过上篇博客认识Ajax之后,我们通过一个简单的实例来消化消化理论知识,一睹Ajax的庐山真面目. 1.实例功能: 当用户输入用户名,文本框失去焦点后,通过异步调用来判断该用户名是否已经存在.若存在,则在上图中红框处显示提示.当用户名可用时,提交按钮变为可用状态. 2.设计Html页面: <span style="font-family:SimSun;font-size:18px;"><strong><span style="font-famil

从一个简单的小实例分析JSP+Servelt与JSP+Struts2框架的区别

最近在学struts2,struts2相比以前的JSP+Servlet,在处理流程上的更简单,我们就一个小实例来具体分析一下. 实例内容如下: 实现一个简单的注册页面包括:用户名.密码.重复密码.年龄.出生日期.毕业日期 要求如下:用户名的长度在4-6之间密码的长度在4-6之间重复密码与密码相等年龄在10-50之间出生日期在毕业日期之前 输入错误返回原页面,并在原页面的文本框后面显示具体的错误信息.正确输入则跳入下个页面将信息显示出来. 1.JSP+Servlet 1)我们编写注册页面regis

一个简单的AJAX实例

创建一个简单的XMLHttpRequest,从一个TXT文件中返回数据. 来源于菜鸟教程 <!DOCTYPE html><html><head><meta charset="utf-8"><script>function loadXMLDoc(){ var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

$python爬虫系列(1)——一个简单的爬虫实例

本文主要实现一个简单的爬虫,目的是从一个百度贴吧页面下载图片. 1. 概述 本文主要实现一个简单的爬虫,目的是从一个百度贴吧页面下载图片.下载图片的步骤如下: 获取网页html文本内容: 分析html中图片的html标签特征,用正则解析出所有的图片url链接列表: 根据图片的url链接列表将图片下载到本地文件夹中. 2. urllib+re实现 #!/usr/bin/python # coding:utf-8 # 实现一个简单的爬虫,爬取百度贴吧图片 import urllib import r

Struts2开发环境搭建,及一个简单登录功能实例

首先是搭建Struts2环境. 第一步 下载Struts2去Struts官网 http://struts.apache.org/ 下载Struts2组件.截至目前,struts2最新版本为2.3.1.3,下载struts-2.3.16.3-all.zip,解压,放着. 第二步 新建Web Project并导入jar包在MyEclispe中新建Web Project,然后找到解压的Struts2包,在里面apps文件夹下找到struts2-blank.war,解压这个WAR文件,将里面WEB-IN

使用python2与python3创建一个简单的http服务(基于SimpleHTTPServer)

python2与python3基于SimpleHTTPServer创建一个http服务的方法是不同的: 一.在linux服务器上面检查一下自己的python版本:如: [[email protected] ~]# python -V Python 2.7.5 如果是在2.7的环境下创建,则使用如下命令: [[email protected] ~]# python -m SimpleHTTPServer 8880 Serving HTTP on 0.0.0.0 port 8880 ... 后面88