代码改变世界

随笔分类 -  JavaScript

开源:Angularjs示例--Sonar中项目使用语言分布图

2012-12-02 11:24 by 破狼, 4747 阅读, 收藏, 编辑
摘要: 在博客中介绍google的Angularjs 客户端PM模式框架很久了,今天发布一个关于AngularJs使用是简单示例SonarLanguage(示例位于Github:https://github.com/greengerong/SonarLanguage)。本项目只是一个全为客户端的示例项目。项目的初始是我想看看在公司的项目中使用语言的分布比例,看看C#的份额,这一年一直坐着Java项目,却还是喜欢着C#,这只是个人问题,不存在语言之争。公司的项目在持续集成CI后都会传递build数据到Sonar产生报表。所以我可以在Sonar获取到项目和项目使用语言,并且Sonar Restfull . 阅读全文

介绍一个JSONP 跨域访问代理API-yahooapis

2012-12-01 13:55 by 破狼, 4467 阅读, 收藏, 编辑
摘要: 你是否遇到了想利用AJAX访问一些公网API,但是你又不想建立自己的代理服务,因为有时我根本就没打算涉及服务端任何代码,但是讨厌的浏览器的同源策略,阻止了我们的ajax调用。比如我想访问一个天气的restfull api,如果我直接去GET:$.get("http://m.weather.com.cn/data/101010100.html"); 看见这问题相信大家都不会陌生,也会很自然的得到解决方案,但是我这里真的不想touch任何服务端代码,用jsonp吧,但是服务端没实现契约。在这里我是时候引入主角yahoo提供的jsonp代理:http://query.yahooa 阅读全文

angularjs 过滤器filter

2012-10-31 23:36 by 破狼, 43549 阅读, 收藏, 编辑
摘要: 在前面介绍angularjs已经很多了,中途由于工作和一切生活琐事,暂停了很久。今天在这里将继续angularjs讲解,这节我们来看看angularjs的过滤去filter。 在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户。比如时间本地化,或者yyyy-MM-dd HH:mm:ss格式,数字精度格式化,本地化,人名格式化等等。在angularjs中为我们提供了叫filter的指令,让我们能够很轻易就能做到着一些列的功能,angularjs内部为我们提供了number等很多内置的filter。并且我们能够很轻易的自定义自己的领域filter。 如下实例:html:. 阅读全文

angularjs表达式-Expression

2012-09-14 00:28 by 破狼, 25659 阅读, 收藏, 编辑
摘要: 紧接上节谈到再谈angularjs DI(Dependency Injection),在这里介绍关于angularjs的表达式expression。expression指的是javascript的一小片段代码,通常用于绑定(binding)例如:{{ expression }}。在angularjs中是通过$parse service解析。 $parse用法: $parse(expression); 参数:javascript代码片段。 返回值:{function(context, locals)},表达式编译结果: context:嵌入表达式执行的作用于scope。 locals:... 阅读全文

再谈angularjs DI(Dependency Injection)

2012-09-11 19:42 by 破狼, 11410 阅读, 收藏, 编辑
摘要: 在前面已经介绍了关于angularjs,以及扩展了一些jQuery ui的一些组件为angularjs的directive。在这里应进口007 在上篇留言我们来看看在angularjs中的DI特性。 DI:依赖注入,是一种软件设计模式,应DIP依赖倒置原则,描述组件之间高层组件不应该依赖于底层组件。依赖倒置是指实现和接口倒置,采用自顶向下的方式关注所需的底层组件接口,而不是其实现。其应用框架则为IOC,在.net中有很多我们熟悉的IOC框架,如Unity,Castle windsor,Ninject,Autofact等等,其常常分为构造注入,函数注入,属性注。同时在IOC和Service L. 阅读全文

AngularJS Slider指令(directive)扩展

2012-09-05 23:01 by 破狼, 7431 阅读, 收藏, 编辑
摘要: 继上一篇基于jQuery UI Autocomplete的AngularJS 指令(directive)扩展,在这里发布一个AngularJS的Slider扩展。如果你还不了解AngularJS话的情参见AngularJs - Javascript MVC 框架,Angular-Bootstrap和Compiler以及Google-AngularJS官方文档. 下面直接看代码演示吧,借助我们强大的jsfiddle:链接地址http://jsfiddle.net/whitewolf/vNfsm/20/embedded 这里借助于jsfiddle可能加载速度有点慢,请耐心等待。同时有什么问题请.. 阅读全文

基于jQuery UI Autocomplete的AngularJS 指令(directive)扩展

2012-09-02 10:38 by 破狼, 8183 阅读, 收藏, 编辑
摘要: 在前几篇随笔简单介绍了AngularJS,在AngularJS 指令(directive)是重要的概念,主要负责了很大部分的组建样式交互。在前面介绍过directive需要预先的模板编译在返回一个link的函数,注册行为事件交互等等。在这里不多说了,关于指令的介绍将在后续一并补上。在这里我们先看一个利用jQuery UI组件开发的AngularJS Autocomplete指令。代码:jsfiddle在线测试Directive:1varoldSuggest=jQuery.ui.autocomplete.prototype._suggest;2jQuery.ui.autocomplete.p.. 阅读全文

Angular-Bootstrap和Compiler

2012-08-13 23:50 by 破狼, 17567 阅读, 收藏, 编辑
摘要: 在上节简单介绍了Angular js框架,在这节将继续Angular的Bootstrap(引导)和Compiler(编译)机制。一:Bootstrap:Angular的初始化 1:Angular推荐的自动化初始如下:1<!doctypehtml>23<htmlxmlns:ng="http://angularjs.org"ng-app>45<body>67...89<scriptsrc="angular.js">1011</body>1213</html 利用ngapp标示你需要自动引导应用 阅读全文

AngularJs - Javascript MVC 框架

2012-08-12 23:25 by 破狼, 18974 阅读, 收藏, 编辑
摘要: 在6月google发布了AngularJs 1.0稳定版, 并宣称:AngularJS可以让你扩展HTML的语法,以便清晰、简洁地表示应用程序中的组件,并允许将标准的HTML作为你的模板语言,AngularJS可以通过双向数据绑定自动从拥有JavaScript对 象(模型)的UI(视图)中同步数据。 开始接触AngularJs是在4月份来到新项目组,这时AngularJs还处于0.8未稳定版,项目中已经开始使用了,并且这套框架应用到了项目整个UI端,服务端也是未稳定的web api,真心佩服团队的勇气,对于新技术的热情,幸好大家都能很好的驾驭,这是第一次尝试一个充满未稳定技术的项目。 回到正. 阅读全文

Less动态css-演讲稿(ppt)

2012-07-24 23:18 by 破狼, 1960 阅读, 收藏, 编辑
摘要: LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数,混合,守卫,命名空间,字串符插值。 LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。 Less是一个JS库,所以他可以在客户端运行,相对Sass则必须在服务端借助Ruby运行(Sass和Less区别,可以参见LESS介绍,和与Sass的比较)。本演讲稿主要涉及Less程序式特性和Less常见使用方式: 变量 混合 嵌套规则 函数&运算 模式匹配和守卫(Guards ) 字符串插值 ... 阅读全文

JQuery模板插件jquery.tmpl-动态ajax扩展

2011-11-09 20:21 by 破狼, 4431 阅读, 收藏, 编辑
摘要: 在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件。有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据。在我的某个项目中有这个需求,所以特地写成jquery工具函数,加入了本地数据和ajax数据加载模板,数据的方式。参数说明:Tmpl: function(template, data, fun) 1:template:1): url: 为ajax的加载url,ajax当且仅当remote= true时候加载。2):data: 为ajax加载参数3) templateSelector: 为本地模板选择器,当且仅当remote= f. 阅读全文

JQuery模板插件-jquery.tmpl

2011-10-09 20:48 by 破狼, 39565 阅读, 收藏, 编辑
摘要: 在下面介绍一款jQuery的模板插件 tmpl,是由微软想jQuery官方贡献的模板插件,网址:http://api.jquery.com/jquery.tmpl/。 Tmpl提供了几种tag:${}:等同于{{=}},是输出变量,通过了html编码的。{{html}}:输出变量html,但是没有html编码,适合输出html代码。{{if }} {{else}}:提供了分支逻辑。{{each}}:提供循环逻辑,$value访问迭代变量。下面一个简单的模板tmpl实例:(代码最能说明一切)效果: 代码:View Code <%@PageLanguage="C#"Aut 阅读全文

jQuery右键菜单contextMenu实例

2011-09-28 20:53 by 破狼, 38745 阅读, 收藏, 编辑
摘要: 好久没写博客了,今天简单介绍一款jQuery鼠标右键菜单contextMenu,这里首先要感谢 我的漫漫程序之旅(原文http://www.blogjava.net/supercrsky/articles/250091.html)。在最近项目中需要频繁的右键菜单操作。我采用了contextMenu这款jQuery插件。 在下面我们将设计一个场景,表格grid需要在每行实现鼠标右键,增加,删除,保存操作。grid我就用gridview了,随便用微软提供的样式,测试用例不用搞的多好看嘛,我也不是做美工了,哈哈,偷偷懒。先上效果图,是有些同志说的有图才有真相嘛: ui代码:View Code < 阅读全文

jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法

2011-09-26 20:57 by 破狼, 5348 阅读, 收藏, 编辑
摘要: 我们都知道在AjaxPro的方法AjaxPro.Utility.RegisterTypeForAjax(typeof(所在类的类名));会将标记有[Ajax.AjaxMethod]方法注册在客户端。在某项目中,设计模板字段引擎,采用html+jquery实现,这里的数据就难免需要ajax获取,但是团队对于js掌握不一,所以我写了下面辅助类,可以像ajaxpro一样简化ajax的开发。代码-jQueryInvokeMethodAttribute (此处只做标示方法处理,所以为空):[AttributeUsage(AttributeTargets.Method,AllowMultiple=fal. 阅读全文

StringTemplate遇见jQuery的冲突

2011-09-21 21:56 by 破狼, 1106 阅读, 收藏, 编辑
摘要: 最近在做一个流程引擎,现着手于自定义模板的处理。设计在模板中所有的数据都将与字段对应,采用xml结构序列化作为流程持久化机制。字段对于用户的输入则为字段,字段涉及到用户的输入,必定是控件。由于有以前项目word模板转化为在线展示输入经验(这里不仅仅是将word转化为html,还需要提取word书签作为关键字段,关键字段作为用户的输入,根据用户配置转化为文本框,下拉框,数字,货币框,时间等等可扩展控件)。我在本次的模板设计中不再考虑服务器控件,因为服务器控件将生成一大堆难以控制的html标记。所以彻底疯狂了一把,采用完全html+jQuery实现(验证用的也是jQuery validator). 阅读全文

我的jQuery动态表格插件二

2011-04-13 11:46 by 破狼, 5750 阅读, 收藏, 编辑
摘要: 本篇博客是我写在离职后,昨天刚辞职和交接完任务,准备离开。其实我有很多不舍,但是最终还是选择了离开,许多苦楚都埋在我的心底。哎,趁回成都找工作的机会是该好好休息一下了。 在上篇我的jQuery动态表格插件中介绍了插件的基本使用方法.在实际运用的时候出现了一些其他的需求,所以插件再次升级,增加了一些辅助功能.1:EnterToTab:$(“selector”). EnterToTab(),是的selector中的空间可以回车变为tab键使用,方便用户的输入。代码简析:IE:View Code if($.browser.msie){$(host).live("keydown", 阅读全文

我的jQuery动态表格插件

2011-03-25 00:02 by 破狼, 7826 阅读, 收藏, 编辑
摘要: 在我的页面处理中有时需要进行表单处理,需要一个用户可以添加修改多条记录。在这里我们需要控制用户的输入验证,表格的添加删除,用户输入数据的统计聚合,还有相应的计算列比如商品的总价=商品的单价*商品数量,再如,同时在用户提交的时候我还要需要获取提交到后台服务端处理在存储到我们的数据库。本插件则简单的处理了这些繁琐的事情。插件属性说明:1:rowTemplate:这是插入列的模板,在模板中我们的序号这种行号标示的需要rownum 的class。在模板中的需要唯一编号的比如我们的radiobutton的name属性在每个td单元格需要唯一的name组,再如id这种需要唯一的属性,需要{0}的占位符。. 阅读全文

JS的一些扩展:String、StringBuilder、Uri

2010-11-19 09:50 by 破狼, 1020 阅读, 收藏, 编辑
摘要: 在最近一个小屁项目中,没有服务端(其实服务端是人家早已经写好的服务),留给我的就只有一大堆的Html和JS,写的好烦躁,所以就写了几个扩展。多个不说的,这里只是记录,code附上,便以后查询:代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--;St... 阅读全文

jQuery 1.4 版本的十五个新特性-转载

2010-07-27 17:18 by 破狼, 879 阅读, 收藏, 编辑
摘要: jQuery 1.4 最近发布了。 超乎大家的预期,这次并非简单的修修补补,1.4 包含了很多新特性、功能增强和性能提升!本文即向您介绍这些可能对你十分有用的新特性和优化增强。你可以立刻下载jQuery 1.4试用: http://code.jquery.com/jquery-1.4.js1. 传参给 jQuery(…)之前,jQuery可以通过 attr 方法设置元素的属性,既可传属... 阅读全文

jquery:利用jsonp跨域访问--转载

2010-07-27 16:57 by 破狼, 10296 阅读, 收藏, 编辑
摘要: 客户端的跨域访问,可以通过jsonp方式来实现,jquery提供了跨域访问的方法, jQuery.ajax()支持get方式的跨域。当然支持跨域还需要服务器端相应的处理。$.ajax({ async:false, url:'',//跨域URL type:'GET', dataType:'jsonp', jsonp:'jsoncallback',//默认callback data:mydata,/... 阅读全文