zoukankan      html  css  js  c++  java
  • 黄聪:360浏览器、chrome开发扩展插件教程(2)为html添加行为

    转载:http://www.cnblogs.com/walkingp/archive/2011/04/02/2002668.html

    上一节我们已经讲了Chrome扩展的基础知识,并构建了基础的html,这一节我们将就html DOM添加部分添加脚本,即脚本在我们的popup页面中进行的操作,页面所产生的变化。

    正常情况下数据处理加载完成状态,这些数据是从本地数据读取的。

    点击“添加新项”,出现输入框,输入文字后回车提交数据:

    添加完成后将数据存储,同时添加DOM元素:

    考虑到功能最简化处理,点击已标为完成的任务,将提示“删除或重置为未完成”:

    以上功能为最核心功能,可以在此基础上进行扩展,比如任务分组,修改任务,任务提醒,网络同步数据等等。

    下面开始相应的脚本内容。

    为了避免全局变量,使用匿名函数方式,所有事件处理及数据绑定均在此函数中进行,同时定义与jQuery中的$()类似的函数:

    (function(){
        var $=function(id){return document.getElementById(id);}
    })();

    建立Tasks对象,定义show()函数和hide()函数,同时存储几个常用的DOM对象。

    var Tasks = {
      show:function(obj){
        obj.className='';
        return this;
      },
      hide:function(obj){
        obj.className='hide';
        return this;
      },
      //存储dom
      $addItemDiv:$('addItemDiv'),
      $addItemInput:$('addItemInput'),
      $txtTaskTitle:$('txtTaskTitle'),
      $taskItemList:$('taskItemList')
    }

    其中show()函数和hide()函数均使用了链式调用,每次执行此函数均会返回对象本身,这样对象就可以使用形如类似jQuery书写方式来使用此函数。

    然后注册事件:

    //.....
    //初始化
    init:function(){
        /*注册事件*/
        //打开添加文本框
        Tasks.$addItemDiv.addEventListener('click',function(){
            Tasks.show(Tasks.$addItemInput).hide(Tasks.$addItemDiv);
            Tasks.$txtTaskTitle.focus();
        },true);
        //回车添加
        Tasks.$txtTaskTitle.addEventListener('keyup',function(ev){
            var ev=ev || window.event;
            if(ev.keyCode==13){
                //TODO:写入本地数据
                Tasks.AppendHtml(task);
                Tasks.$txtTaskTitle.value='';
                Tasks.hide(Tasks.$addItemInput).show(Tasks.$addItemDiv);
            }
            ev.preventDefault();
        },true);
        //取消
        Tasks.$txtTaskTitle.addEventListener('blur',function(){
            Tasks.$txtTaskTitle.value='';
            Tasks.hide(Tasks.$addItemInput).show(Tasks.$addItemDiv);
        },true);
        //TODO:初始化数据,加载本地数据,生成html         
    },
    //....

    其中待完成部分为我们下一节将重点计到的html5的本地存储功能。再定义数据操作部分,先写上空白函数:

    //....
    //增加
    Add:function(){
        //TODO
    },
    //修改
    Edit:function(){
        //TODO
    },
    //删除
    Del:function(){
        //TODO
    },
    //...

    还需要初始化此函数使其执行并让匿名函数执行:

    (function(){
        var Tasks = {
    //***
        }
        Tasks.init();
    })();

    好吧,以下就是本节中所要提到的全部代码:

    (function(){
        var $=function(id){return document.getElementById(id);}
        var Tasks = {
            show:function(obj){
                obj.className='';
                return this;
            },
            hide:function(obj){
                obj.className='hide';
                return this;
            },
            //存储dom
            $addItemDiv:$('addItemDiv'),
            $addItemInput:$('addItemInput'),
            $txtTaskTitle:$('txtTaskTitle'),
            $taskItemList:$('taskItemList'),
            //初始化
            init:function(){
                /*注册事件*/
                //打开添加文本框
                Tasks.$addItemDiv.addEventListener('click',function(){
                    Tasks.show(Tasks.$addItemInput).hide(Tasks.$addItemDiv);
                    Tasks.$txtTaskTitle.focus();
                },true);
                //回车添加
                Tasks.$txtTaskTitle.addEventListener('keyup',function(ev){
                    var ev=ev || window.event;
                    if(ev.keyCode==13){
                        //TODO:写入本地数据
                        Tasks.AppendHtml(Tasks.$txtTaskTitle.value);
                        Tasks.$txtTaskTitle.value='';
                        Tasks.hide(Tasks.$addItemInput).show(Tasks.$addItemDiv);
                    }
                    ev.preventDefault();
                },true);
                //取消
                Tasks.$txtTaskTitle.addEventListener('blur',function(){
                    Tasks.$txtTaskTitle.value='';
                    Tasks.hide(Tasks.$addItemInput).show(Tasks.$addItemDiv);
                },true);
                //TODO:初始化数据,加载本地数据,生成html         
            },
            //增加
            Add:function(){
                //TODO
            },
            //修改
            Edit:function(){
                //TODO
            },
            //删除
            Del:function(){
                //TODO
            },
            AppendHtml:function(title){
                var oDiv=document.createElement('div');
                oDiv.className='taskItem';
                var oLabel=document.createElement('label');
                oLabel.className= 'on';
                var oSpan=document.createElement('span');
                oSpan.className='taskTitle';
                var oText=document.createTextNode(title);
                oSpan.appendChild(oText);
                oDiv.appendChild(oLabel);
                oDiv.appendChild(oSpan);
                //注册事件
                oDiv.addEventListener('click',function(){
                    //TODO
                },true);
                Tasks.$taskItemList.appendChild(oDiv); 
            },
            RemoveHtml:function(){
                //TODO
            }
        }
        Tasks.init();
    })();

    代码中尚未实现的部分,我们将会在下节详细讲解其实现。

  • 相关阅读:
    台州 OJ 3847 Mowing the Lawn 线性DP 单调队列
    洛谷 OJ P1417 烹调方案 01背包
    快速幂取模
    台州 OJ 2649 More is better 并查集
    UVa 1640
    UVa 11971
    UVa 10900
    UVa 11346
    UVa 10288
    UVa 1639
  • 原文地址:https://www.cnblogs.com/huangcong/p/3531725.html
Copyright © 2011-2022 走看看