Angular指令与Jquery结合

时间：2015-03-28 17:15:22 阅读：196 评论：0 收藏：0 [点我收藏+]

标签：

jQuery.fn.extend({

  weekToInt : function(week){
   if(week === ‘Mon‘){
    return 1;
   }else if(week === ‘Tue‘){
    return 2;
   }else if(week === ‘Wed‘){
    return 3;
   }else if(week === ‘Thu‘){
    return 4;
   }else if(week === ‘Fri‘){
    return 5;
   }else if(week === ‘Sat‘){
    return 6;
   }else if(week == ‘Sun‘){
    return 7;
   }
   return 0;
  },
  fromDate : function(date){
   var rs = {};
   var ds = date.toString().split(" ");
   rs.week = this.weekToInt(ds[0]);
   rs.day = ds[2];
   rs.year = ds[3];
   rs.month = date.getMonth() + 1;
   rs.hour = date.getHours();
   rs.minutes = date.getMinutes();
   rs.seconds = date.getSeconds();
   return rs;
  },

  nextDay : function(date){
   var vals = date.valueOf();
   var day = 24 * 60 * 60 * 1000;
   return new Date(vals + day);
  },

  previousDay : function(date){
   var vals = date.valueOf();
   var day = 24 * 60 * 60 * 1000;
   return new Date(vals - day);
  },

  firstDayOfMonth : function(date){
   var ds = this.fromDate(date);
   return new Date(Date.parse(ds.year + "-" + ds.month + "-01"));
  },

  getProp  : function(config, prop, def){
   if(config != undefined && config != null && config[prop] != undefined && config[prop] != null){
    return config[prop];
   }
   return def;
  },

  datepicker : function(config){

   /*加入显示单元*/
   var $this = this;
   var div = document.createElement("div");
   var table = document.createElement("table");
   var tbody = document.createElement("tbody");
   var isHover = false;
   var row = 6;
   var col = 7;

   $(div).append(table).appendTo($(this).parent()).css({
    position   : ‘absolute‘,
    display   : $this.getProp(config, ‘display‘, ‘none‘),
    top    : $this.position().top + parseInt($this.css(‘height‘)) + 7,
    left   : $this.position().left
   }).mouseleave(function(){
    isHover = false;
    setTimeout(function(){
     if(!isHover){
      $(div).css(‘display‘, ‘none‘);
     }
    }, 1000);
   }).mouseover(function(){
    isHover = true;
   });

   $(table).css({
    width    : $this.getProp(config, ‘width‘, ‘300px‘),
    height   : $this.getProp(config, ‘height‘, ‘200px‘),
    textAlign  : $this.getProp(config, ‘textAlign‘, ‘center‘),
    backgroundColor : $this.getProp(config, ‘backgroundColor‘, ‘#FFF‘),
    font   : $this.getProp(config, ‘font‘, ‘11px 微软雅黑‘),
    color    : $this.getProp(config, ‘color‘, ‘#000‘)
   }).attr({
    cellspacing : ‘0‘,
    cellpadding  : ‘0‘
   }).append($(tbody).css({
    width    : ‘100%‘,
    height   : ‘100%‘
   }));


   for(var i = 0; i < row; i++){
    var tr = document.createElement("tr");
    for(var j = 0; j < col; j++){
     var tag = j;
     if(j == 0){
      tag = col;

     }
     var td = document.createElement("td");
     var hidden = document.createElement("input");
     var span = document.createElement("span");

     $(hidden).attr({
      name : ‘weekTag‘,
      type : ‘hidden‘
     }).val(tag);
     $(td).append(hidden).live(‘click‘, function(){
      $this.val($(this).find(‘span‘).eq(0).html());

     }).css({
      width   : parseInt(parseInt($(table).css(‘width‘)) / col ) - 1 + ‘px‘,
      height  : parseInt(parseInt($(table).css(‘height‘)) / row) - 1 + ‘px‘,
      borderLeft : $this.getProp(config, ‘border‘,‘1px solid‘),
      borderTop : $this.getProp(config, ‘border‘,‘1px solid‘),
      borderColor : $this.getProp(config, ‘borderColor‘, ‘#0EF‘),
      cursor  : $this.getProp(config, ‘cursor‘, ‘pointer‘)
     }).mouseover(function(){
      var fontSize = parseInt($(this).css("fontSize"));
      $(this).css({
       //fontSize  : (fontSize + 6) + ‘px‘
      });
     }).mouseleave(function(){
      var fontSize = parseInt($(this).css("fontSize"));
      $(this).css({
       //fontSize  : (fontSize - 6) + ‘px‘
      });
     }).append($(span).addClass("_day"));

     if(i == (row - 1)){
      $(td).css({
       borderBottom : $this.getProp(config, ‘border‘,‘1px solid‘),
       borderColor  : $this.getProp(config, ‘borderColor‘,‘#0EF‘)
      });
     }
     if(j == (col - 1)){
      $(td).css({
       borderRight  : $this.getProp(config, ‘border‘,‘1px solid‘),
       borderColor  : $this.getProp(config, ‘borderColor‘,‘#0EF‘)
      });
     }
     $(tr).append(td);
    }
    $(tbody).append(tr);
   }



   //修改日期
   var modifyDatePicker = function(date){
    var first = $this.firstDayOfMonth(date);
    var firstDate = $this.fromDate($this.firstDayOfMonth(date));
    var next = $this.nextDay(first);
    var nextDate = $this.fromDate(next);
    var isFoundFirst = false;
    var $trs = $(tbody).find("tr");
    for(var i = 0; i < $trs.length ; i++ ){
     var $tr = $($trs[i]);
     var $tds = $tr.find("td");
     for(var j = 0 ; j < $tds.length; j++){
      var $td = $($tds[j]);
      var weekTag = $td.find("input[name=weekTag]").eq(0).val();
      var span = $td.find(‘._day‘).eq(0);
      if(!isFoundFirst ){
       if(parseInt(firstDate.week) == parseInt(weekTag)){
        $(span).html(firstDate.day);
        isFoundFirst = true;
       }
      }else{
       if(nextDate.month != firstDate.month){
        $(span).css({
         color : ‘gray‘
        });
       }
       $(span).html(nextDate.day);
       next = $this.nextDay(next);
       nextDate = $this.fromDate(next);
      }
     }
    }
   };

   modifyDatePicker(new Date());

   /*处理事件*/
   this.live(‘click‘, function(){
    var display = $(div).css("display");
    if(display == ‘block‘){
     display = ‘none‘;
    }else{
     display = ‘block‘;
    };
    $(div).css({
     display  : display
    });

   }).attr({
    readonly : $this.getProp(config, ‘readonly‘, ‘false‘)
   }).css({
    cursor  : ‘pointer‘
   }).val("1989-09-11");
  }
});

var md = angular.module("myApp",[]);

md.directive(‘ngDate‘, function(){

  return {

   restrict : ‘A‘,
   compile  : function(element,attributes){
    $(element).datepicker({
     borderColor : ‘#0AE‘,
     readonly : false

    });
   }
  }
}).controller("mainController", function($scope){

  $scope.user = {};
  $scope.user.userName = ‘bond‘;
  $scope.user.age = 24;
  $scope.user.birthday = ‘1989-8-12‘;

});

Angular指令与Jquery结合

标签：

原文地址：http://blog.csdn.net/zzd1989812/article/details/44703017

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行