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)
      
                          }
                      })
                  })
      
    • 相关阅读:
      java学习(4):第一个Java程序(Hello world)
      java学习(3):字符集和字符编码的区别
      java学习(2):二进制、十进制、原码、反码、补码
      Java学习(1):JRE和JDK
      缓存
      关联表查询
      男0女1
      嵌套查询
      定义别名
      增删改查
    • 原文地址:https://www.cnblogs.com/rubylouvre/p/2526623.html
    Copyright © 2011-2022 走看看