zoukankan      html  css  js  c++  java
  • todos 应用实践

    模仿这里的网站,用我的框架实现一遍

      回车添加新的工作清单
      双击工作清单可编辑它
      Created by
      司徒正美.
      Rewritten by: TodoMVC.
             $.require("ready,attr,event,fx,more/ejs",function(){
      
                      $("body").on("keyup","#new-todo", function(e){
                          if( (e.which == 108 || e.which === 13) && this.value){
                              var view =  $.ejs("#item-tmpl",{
                                  done: false,
                                  title: this.value
                              });
                              this.value = "";
                              $.log( $("#todo-list").length)
                              $("#todo-list").prepend(view);
                              $("body").fire("show")
                          }
                      }).on("click","#toggle-all",function(){//全选
                          var check = this.checked;
                          $("#todo-list .toggle").prop("checked", check);
                          $("#todo-list li")[ check ? "removeClass" : "addClass"]("completed")
                          $("body").fire("show")
                      }).on("click", "#todo-list .toggle", function(){//切换自身
                          $("body").fire("show")
                      }).on("dblclick","#todo-list li", function(){//变成可编辑状态
                          $(".editing").removeClass("editing");//每次只编辑一个
                          $(this).addClass("editing").find(".edit").focus();
                      }).on("keyup","#todo-list li", function(e){//回车
                          if( (e.which == 108 || e.which === 13)){
                              var v = $(this).find(".edit").val();
                              var view =  $.ejs("#item-tmpl",{
                                  done: false,
                                  title: v
                              });
                              $(this).replace(view);
                          }
                      }).on("click", "#todo-list .destroy", function(e){
                          $(this).parents("li").remove();
                          $("body").fire("toggle")
                      }).on("click","#clear-completed",function(){
                          $("#todo-list input:checked").parents("li").remove();
                          $("body").fire("toggle")
                      }).on("show",function(){
                          $("#todo-main").show();
                          var input = $("#todo-list .toggle")
                          done = input.filter(":checked").length
                          var view = $.ejs("#stats-tmpl",{
                              remaining: input.length - done,
                              done: done
                          });
                          $("#todo-footer").text(view).show()
                      }).on("toggle", function(){
                          if( $("#todo-list li").length ){
                              $("body").fire("show")
                          }else{
                              $("#todo-main,#todo-footer").hide();
                              $("#toggle-all").prop("checked",false)
      
                          }
                      })
                  })
      
    • 相关阅读:
      cmd ora12560协议适配器错误
      WinPEter制作U盘启动盘
      KERNEL_SECURITY_CHECK_FAILURE
      Linux系统下关闭与启动Oracle11g的顺序与命令
      oracle口令文件在windows和linux系统下的命名和位置
      战士倒下了
      手游中第三方的登陆和支付总结
      诡异的循环
      关于空类的继承的问题
      C++的缺陷指针
    • 原文地址:https://www.cnblogs.com/rubylouvre/p/2526623.html
    Copyright © 2011-2022 走看看