Angular指令与Jquery结合



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‘;

});

时间: 2024-11-05 10:05:42

Angular指令与Jquery结合的相关文章

Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定

一放假就高产似母猪了. 00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大部分都用的jQuery,而Angular正好是和jQuery的思维是相反的,开发过程中遇到了不少坑.而Angular团队也放弃了1.x开始开发和React神似的2.0版本,唉,真是沧海桑田啊. 01.Angular vs jQuery Angular模块化和解耦的思路确实值得一学,但是相对于成熟的j

自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选&amp;多选下拉框

先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴

jquery函数转为angular指令实现示例

最初像想要实现的是:显示如下的小星星 最初的实现方式是在html页面加JS脚本,但是老外不喜欢这样,一定要我们转为angular指令,所以就试试呗~ 一.最初的实现方式 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta content="IE=edge,chrome=1&quo

angular指令(二)--内置指令

一.基础ng 属性指令: ? ng-href? ng-src? ng-disabled? ng-checked? ng-readonly? ng-selected? ng-class? ng-style 布尔属性的有: ng-disabled.ng-readonly.ng-checked.ng-selected 类布尔属性有: ng-href.ng-src 二.在指令中使用子作用域 ? ng-app ? ng-controller ? ng-include 使用ng-include可以加载.编译

angular指令监听ng-repeat渲染完成后执行自定义事件方法

今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令. 在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,所以可以通过判断$last的值来监听ng-repeat的执行状态, 怎么在遍历过程中拿到$last的值:自定义指令 v

【转】angular指令入坑

独立作用域和函数参数 通过使用本地作用域属性,你可以传递一个外部的函数参数(如定义在控制器$scope中的函数)到指令.这些使用&就可以完成.下面是一个例子,定义一个叫做add的本地作用域属性用来保存传入函数的引用: angular.module('directivesModule').directive('isolatedScopeWithController', function () {    return {        restrict: 'EA',        scope: { 

angular 指令 要点解析

指令可以删繁就简前端的js代码,杜绝重复的js代码和html代码. 下面就对指令的重要属性进行罗列 一.restrict  =  'AEC'  分别指该指令标识位于attribute属性.element元素.class. 二.scope  = true/false/{name:'=/@/&'}    默认为false,如果设置为true 则说明指令内部独立作用域. scope: { lover: '=', name: '@', say: '&' } 1.{name:'@inputName'

angular指令大全

这篇文章的案例都是来自官方,引用的cdn来自bootcss, 因为angular的官方网站被屏了, 所以要翻, 不过我把整个文档下回来了,方便大家下载可以点击: 打开下载英文版 angular的指令 a标签(也就是html的锚标签): angular的所有事件直接绑定在元素的上,而且事件都是以“ng-****”开头,比如ng-click,ng-keydown,ng-keypress,ng-mouseover.... 基本的绑定事件代码, 点击a标签会触发该控制器内部$scope的alert事件;

如何编写Angular指令

[20140917]Angular:如何编写一个指令 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre