Tagged

javascript

A collection of 26 posts

webapps

iSlider 移动端 Webapp 滑动的最优解决方案

iSlider是一个表现出众,无任何依赖的mobile设备滑动组件。 iSlider 的项目地址 https://github.com/BE-FE/iSlider iSlider 的例子http://be-fe.github.io/iSlider/demo/ 如果你身旁有手机,不妨扫一下看看我们炫酷的例子: 如果你觉得喜欢这个项目,或是这个项目能够帮助到你,欢迎来github 给我们 star,这会鼓励我们持续开发出更多fancy 的功能。 取名叫 iSlider 是为了像iScroll致敬,iSlider是移动的滑动组件的最佳解决方案。在WEB 轮播图已经变得小儿科的现在,很多人会质疑重新写个移动端的价值?其实移动端与web的环境有很多不同,用户习惯,行为也有很大的差异,而且移动端的浏览器,应用场景和web 端也差别很大。总结一下区别: 移动端用户行为习惯区别(移动端多的是touch 事件,更注重手指与触摸屏的互动) 移动端屏幕(移动的屏幕大多小于C端,为了在更小的屏幕展示同样的内容,内容滑动已然成为用户操作习惯) 移动端多设备性(ipad、iphone、

Chrome

通过使用Chrome的开发者工具来学习JavaScript

本文作者是Peter Rybin,Chrome开发者工具团队成员. 本文中,我们将通过使用Chrome的开发者工具,来学习JavaScript中的两个重要概念”闭包”和”内部属性”. 闭包 首先要讲的是闭包(closure) – JavaScript中最有名的东西之一.一个闭包就是一个使用了外部变量的函数.查看下面的例子: function A(a, b, c) { var ar = [a, b, c]; return function B(i) { return ar[i]; }; } var b = A('Here', 'I', 'am'); console.log( b(1) ); 函数声明之后的第一条语句调用了函数A,函数A创建了一个值为数组[a,b,c]的局部变量ar,返回了一个函数B(存储在了变量b中)

javascript

10个超棒jQuery表单操作代码片段

jQuery绝对是一个伟大的开源javascript类库,是帮助我们快速和高效开发前端应用的利器。可能大家在日常的开发过程中常常会处理表单相关的javascript,在今天这篇代码片段分享文章中,这里收集了10个超棒超实用的jQuery表单处理代码,希望能够在大家的开发过程中帮助大家更好更快的处理表单相关问题,希望大家喜欢!如果你也有相关的代码,请大家积极分享! 代码片段1: 在表单中禁用“回车键” 大家可能在表单的操作中需要防止用户意外的提交表单,那么下面这段代码肯定非常有帮助: 在线调试  在线演示 $("#form").keypress(function(e) { if (e.which == 13) { return false; } }); 代码片段2: 清除所有的表单数据 可能针对不同的表单形式,你需要调用不同类型的清楚方法,不过使用下面这个现成方法,绝对能让你省不少功夫。 在线调试  在线演示 function clearForm(form) { // iterate over all of the inputs for the form // element that

codetank

Javascript对战游戏——CodeTank介绍

欢迎来到 CodeTank 的世界,将会带你进入一个神奇而充满挑战的代码机器人的世界! CodeTank(代码坦克)是全世界首个Javascript程序员的在线编程对战游戏,是由 腾讯 AlloyTeam 和HTML5 梦工场联合出品的在线坦克仿真游戏平台,CodeTank 采用 HTML5、Javascript、CSS3、NodeJS、MongoDB 等全新 Web 技术来构建一个基于互联网的在线智能坦克机器人战斗仿真引擎(所以需要支持HTML5的浏览器来运行)。 {编程游戏}也叫{代码游戏},有许多软件是基于这种思想的,著名的 Robocode 就是来源于机器人大战Robot Battle 这款软件。Robocode是2001年7月在美国IBM 的Web alphaWorks上发布的坦克机器人战斗仿真引擎。不过随时互联网的飞速发展,Robocode 已经开始变得落后。所以,现在有了Javascript语言的基于互联网的在线编程对战游戏——CodeTank 代码坦克! 相信每一个男人的内心深处,都有一份对坦克的特殊情结,而用Javascript代码来直接控制坦克进行战斗更是会让广大程序员热血沸腾的事情!欢迎大家访问我们的游戏网址:Http://CodeTank.AlloyTeam.com

javascript

与moment.js整合使用的日期选择期 - Pikaday

在线演示 Pikaday是一款超轻量级的javascript日期选择器,并且支持模块化的CSS,可以帮助你更加简单的配置样式。目前虽然处于开发状态,但是看起来已经很不错了。 和重量级别的jQueryUI 日期选择器相比,Pikaday更轻量级,压缩版本只有5kb。当然,如果你使用jQuery类库的话,同时也提供了jQuery插件,相信大家一定会喜欢。 如果你需要处理日期或者时间相关格式的问题,你可以考虑使用moment.js来帮助你处理,这个超棒的时间,日期处理类库在以前的文章中我们曾经介绍过: 不容错过的超棒Javascript日期处理类库-Moment.js 如此小巧并且功能完整的日期选择器还是不多见的,希望大家喜欢!

cloud

超酷的javascript文字云/标签云效果 - D3 Cloud

在线演示 如果你想创建漂亮的文字云或者标签云效果的话,你可以考虑使用**D3-Cloud,这是一个超棒的开源字体云效果javascript类库,基于知名的 D3.js**,能够帮助你生成类似wordle.com风格的字体或者标签云效果。 这个类库使用HTML5画布来生成字体效果,整个布局算法可以异步实现,只需要设置时间块大小。并且支持动画特效。整体性能非常不错。 文字,字体和字体大小,旋转和边框距离都可以自定义。包含两个事件: word – 当每一个文字添加后触发 end – 当全部文字添加后触发 当然,支持web字体,你可以使用@font-face来设置字体风格。如果你能够应用到自己的网站中,肯定能够给你的网站增色不少! 来源:超酷的javascript文字云/标签云效果 – D3 Cloud

javascript

使用数据库方式访问JSON数据的javascript类库-TaffyDB

在线演示  本地下载 是不是有过这样的想法,如果能够像处理数据库方法一样来处理JSON对象数据的话,是不是会非常方便?今天我们介绍一款超棒的javascript类库-TaffyDB,它能够帮助你实现处理数据库一样的方式来处理JSON对象。 主要特性 类库非常小,性能不错 强大的数据选择引擎 支持不同的数据库操作,例如,插入,更新,删除 支持各大浏览器 兼容其它JS类库 可以方便的开发扩展应用 支持链式操作,超酷超方便 来源:帮助你使用数据库方式访问JSON数据的javascript类库-TaffyDB

javascript

另外一款超棒的响应式布局jQuery插件 - Freetile.js

在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果。相信大家一定会喜欢! 主要特性 Freetie来自于Assemblage 和 Assemblage Plus的内建布局引擎,设计灵感来自于Masonry,VGrid和Wookmark,但是和他们相比较,拥有以下独特的地方: 允许包含任何尺寸的元素,并且不要求一个固定的列宽度,因此你不需要指定列宽度来迎合你的元素大小 内建算法允许你很容易的自定义插入的位置,满足不同喜好的展示方式。例如,向左或者向右对齐,或者接近特定元素。 智能的动画方式能够很好的判断是否需要动画特效。例如,刚加入的元素和不可见的元素。 只要使用Assemblage 和 Assemblage Plus模板的网站都在使用它,所以说非常稳定。 如何使用 基本使用方式: $('#container').freetile(); 启用动画特效: $('#container').freetile({ animate: true, elementDelay: 30 }); 指定一个自定义的元素选择器: $('#container').freetile(

javascript

如何选择Javascript模板引擎(javascript template engine)?

随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: 你的到了一个JSON对象,如下: var data={   email: 'terry.li@gbin1.com,   gender: 'male'  } 然后你需要将json数据组织成页面内容,如下: var email, gender; email= '' + data.email+ '; gender= '' + data.gender + '; $('#contentwrapper‘).append(content).append(gender); 代码执行功能非常简单,将json数据生成web页面中的内容,如下: terry.li@gbin1.com Male 如果只是简单代码组合可能还好一些,但是如果页面大量使用类似的结构的话,除非一直是同一个程序员维护,否则后期的管理成本会相对非常的高。 为 了解决这个问题,

javascript

帮助你生成翻页效果的jQuery插件 - bookblock

在线演示  本地下载 今天我们介绍一个漂亮的jQuery翻页效果插件 – bookblock,使用它可以创建动态的类似书本翻页效果的幻灯。希望大家喜欢! 这个插件依赖于jQuery++,这个类库是一个jQuery的扩展类库,这里使用了它的swipe事件。 HTML代码 主要html代码如下,生成需要展示的图片内容: <div id="bb-bookblock" class="bb-bookblock"> <div class="bb-item"> <a href="http://www.gbin1.com"><img src="images/animals/a.jpg" alt=

javascript

使用javascript生成PDF的类库 - jsPDF

在线演示 曾经生成PDF都是服务器端代码的专利,在今天的这篇文章中,我们将介绍一个javascript类库 – jsPDF,使用它能够帮助你使用前端脚本生成PDF文件,是不是很棒,试试吧! jsPDF支持不同类型的PDF文件格式,包括:文本,数字,图形,图片,同时你可以自由的编辑标题或者其它类型元素。 支持互动的内容制作,例如,你可以输入文字或者数字,然后jsPDF帮助生成最后的PDF内容。 支持现代浏览器,如果是老式浏览器的话,可以很好的使用flash来实现兼容。不过貌似支持Firefox不是很好,如果要查看演示,使用Chrome吧! 类库依赖:无 网站地址:http://jspdf.com/ 下载地址:https://github.com/MrRio/jsPDF 来源:使用javascript生成PDF的类库 – jsPDF

javascript

轻量级的jQuery表单验证插件 - HAPPY.js

在线演示  本地下载 功能强大的表单验证插件很多,以前我们介绍过validation engine,但是如果你希望使用简单轻量级的表单验证插件的话,你可以考虑使用HAPPY.js。 主要特性 支持jQuery和Zepto.js 使用简单,支持日期,数字,电子邮件,最大/最小数和手机号码等验证 拥有很多自定义的选项 支持IE6-8,FF3.6,Chrome7和safari5 如何使用 HTML代码: <form id="login" action="index.html"> <div class="loginPic"> <input id="loginEmail" class=

javascript

使用jQuery开发超酷波浪动画背景的单页面网站导航菜单

在线演示  本地下载 在今天的教程中,我们将使用jQuery开发一个单页面的网站,并且添加超酷的波浪动画背景效果到导航菜单上,希望大家能够喜欢! 主要开发使用插件: jQuery one page nav:用来生成单页面网站典型的滚动效果 jQuery scrollTo.js:单页面插件依赖类库 jQuery background position:用来生成动画背景效果 jquery.animate-shadow-min.js:用来生成背景阴影效果 jQuery easing 1.3.js:用来添加更多生成动画效果 Cufon-yui.js:cufon类库,用来生成更加漂亮的字体 fixie.js:用来辅助自动生成网站中的文字 本篇文章最后将生成一个单页面的网站设计,并且生成漂亮的动态导航按钮,调试环境firefox和Chrome,如果你使用其它的浏览器,可能无法工作。请自己调试。 如何生成按钮的背景波浪动画特效? 在这里,我们将使用动画背景图片来生成波浪的动画效果,在之前的“使用jQuery background-position插件来创建超酷的导航条效果教程”中,

javascript

2012年度最新免费web开发设计资源荟萃

免费的设计和开发资源大家肯定都喜欢,在这篇文章中我们收集了7月到8月的最新免费开发设计资源,包含PSD UI套件,图标javascript,jQuery插件等等,绝对是web开发设计人员必备,如果你也喜欢,过来看看吧! 1. Smart Time Ago(jQuery插件) 2. 使用javascript开发超棒的动画文字书写效果 3. Magnifying Glass for Image Zoom (jQuery/CSS3) 4. Settings Panel (PSD) 5. iOS Icon Template 6. Blitz PSD UI Kit 7. PSD Retro Text Effect Vol. 2 8. Beer Bottle PSD Mockup Template

javascript

帮助你自动生成已经过去时间的jQuery插件 - Smart Time Ago

在线演示  本地下载 如果大家经常开发web应用的话,肯定会遇到需要计算相对现在过去的时间的情况,在今天的jQuery插件介绍中,我们将介绍一个方便的jQuery插件 – Smart Time Ago。使用这个插件可以自动帮助你生成类似:“3小时之前”,“2分钟之前”的相对时间格式。希望大家喜欢! 主要特性 自动的计算相对时间 基于另外一个插件: http://timeago.yarp.com/. 支持国际化和本地化 如何使用 在node.js下使用,调用如下命令: $ npm install -g smart-time-ago 可以作为jQuery插件,设置为全局: $('body').timeago(); 或者指定范围: <div> <time datetime="2012-07-18T07:51:50Z">about 8 hours

javascript

【简报】使用oriDomi折纸效果的HTML元素

oriDomi是一款超酷的JavaScript类库,可以把页面中任何HTML元素生成折叠效果。此类库不依赖于任何JavaScript框架(但对于jQuery可以有选择性支持)并使用CSS 3D创建过渡效果。 在线演示  本地下载 主要特性 图片小于15K 可选择性支持jQuery/Ender 可以在iOS环境下工作 支持折叠效果,页面字体和动画图片 这里有一些动画演示的折叠效果,包括横向/竖向折叠、切片式,阴影等,并且所有的内容都可以自定义。此款特效还包括:手风琴、卷曲、折叠、缩放等。oriDomi兼容所有现代浏览器(包括移动设备) 如何使用 HTML <div> <h1>Hello.</h1> <h4>my name is oriDomi.</h4>

javascript

用In.js颗粒化管理、加载你的Javascript模块

近一年来,国内外都十分热衷于异步加载的研究,为了加快页面的载入速度,无阻塞加载Javascript的方法和框架成为了前端开发的焦点和亮点之一。 国外的像基于jQuery的RequireJs,YUI Loader,LabJs,RunJs,国内也有淘宝的SeaJs,豆瓣的DoJs等,这些都是一些十分优秀的模块加载器。但是本文将会向大家介绍一个新的开源的轻量级“多线程”异步模块加载器In.js,In的开发借鉴了Do的一些思路和使用习惯,在此期间感谢@kejun同我的耐心交流,In.js压缩后只有4.77k,不仅小巧而且十分好用。 优点: 按需加载 无阻塞加载 依赖关系管理 颗粒化模块管理 如何使用? A.引入In.js 只需要在页面顶部引入in.js即可,这里有两个参数需要注意: autoload: 是否在加载in.js的时候加载底层核心库 – {可选参数 – true|false} core: 底层核心库的路径 – {可选参数 – url} 如果同时设置了core,并且autoload=true,则在引入In.js的同时加载core到页面中。

javascript

JavaScript的私有成员

对象 Javascript 根本上是和对象相关的。数组是对象。函数是对象。对象是对象。那什么是对象呢?对象是名-值对的集合。名是字符串,值可以是字符串,数字,布尔值或者对象(包括数组和函数)。通常对象是像哈希表一样执行地,这样便于值地快速检索。 如果值是函数,我们可以认为这是一个方法。当一个对象地方法被调用的时候,this 变量就设置为这个对象。方法就可以通过 this 变量来访问实例变量。 对象可以由用来初始化对象的构造函数生成。构造函数提供了其他语言中类所提供的特性,包括静态变量和方法。 公共 对象的成员全部是公共成员。任何函数都可以访问、修改或者删除这些成员,或者增加新成员。有两种向新对象中添加成员的方法: 在构造函数中添加 这个技术通常用于初始化公共实例变量。使用构造函数的 this 变量向对象中添加成员。 function Container(param){ this.member = param; } 这样,如果我们创建一个新对象: var myContainer = new Container('abc')

上传

非常有用的文件上传脚本收集

在现代网站设计中,特别是相册、网盘和SNS网站中,我们常常见到文件上传功能,相信在我们的项目中也会经常遇到类似的任务。这里收集一些很有用的文件上传组件,这些组件都是很成熟的,而且是免费供你使用的。 当然,如果你见到了某些比较好的,而我们这里没有列出的上传组件,欢迎通过评论与前端观察的其他读者共享。 1. SWFUpload SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统<input type=”file” />标签的文件上传模式。 SWFUpload的主要优点: 可以同时上传多个文件; 类似AJAX的无刷新上传; 可以显示上传进度; 良好的浏览器兼容性; 兼容其他JavaScript库 (例如:jQuery, Prototype等); 支持Flash 8和Flash 9; 2. YUI上传组件 YUI Uploader 提供超越基本的基于浏览器的方法的文件上传功能。值得一提的是,YUI Uploader 允许通过一个单独的“打开文件”对话框进行多文件选择,通过文件扩展过滤器来减少用户的操作,跟踪文件上传进度,可以比较快速的上传文件。

javascript

有用的Ajax自动提示脚本收集

本文收集了一些有趣并很有用的自动提示脚本,他们无论对于初学者还是专业前端开发人员都是适用的。这些脚本包括标准的自动提示效果、仿del.icio.us效果、仿Googel效果以及使用自动提示的高级数据表过滤效果。 使用一个合适的自动提示脚本有效的提升你的网站的用户体验。 1. Ajax Auto Suggest v.2 AutoSuggest 类添加一个包含提示内容的下拉菜单到一个文本框中。用户可以直接点击相应的提示条目,也可以输入到文本框中,或者使用向上和向下的方向键来浏览列表,然后使用回车键选择某个条目。提示列表的条目由一个XML文件提供,或者使用JSON (通过一个PHP脚本,或类似脚本)。这个自动提示脚本非常容易定制并应用到你的网站中。查看演示。 2. Woork PHP 组件: Autosuggest Woork Autosuggest 是一个简单的”PHP 组件” ,可用来用PHP和MySQL来实现自动提示功能。这个组件是轻量的(只有8Kb) ,而且可以使用某些定制的参数。 3. Spry 自动完成组件 (Adobe 实验室提供)使用Adobe Spry 框架来在文本框中实现自动提示功能。这是一个使用了Spry地区列表和非破坏性过滤器来创建自动提示组件的实例。那些提示可以用HTML结构显示。

javascript

10个最好的免费Javascript图表生成方案

这篇文章收集了用 Javascript 生成图表的一些有趣的库及脚本。 Flot Flot 是 针对 jQuery 的一个纯 Javascript 的图表库。它在客户端生成任意数据集的图形图表。优点是使用简单(所有设定都可选),优雅的样式以及类似缩放和鼠标追踪等的交互特性。 Flotr JavaScript Plotting Library Float r是一个受Flot(作者为 Ole Laursen)启发并且基于 Prototype(目前版本是1.6.0.2)Javascript 框架的 Javascrip t图表库。使用Floatr可以用易于学习的语法在大多数现代浏览器中画出漂亮的图形。它具有图标支持,负值支持,鼠标追踪,选区支持,缩放支持,事件挂钩,css样式支持等多种特性。 JS charts JS Charts 是一个无需编码或只需少量编码的基于 Javascript 的图表生成器。使用

css

用NiceForms创建漂亮的表单

Niceforms是一个脚本,它用个性设计的内容替代最常用的表单元素。您可以使用Niceforms提供的默认的主题,你也可以以最小的工作量来开发自己的界面。 Niceforms将从本质上改变古板的表单样式: ![regular form](//www.qianduan.net/img/2008/12/105735fzr.gif "regular form")regular form变成这样: ![niceforms result](//www.qianduan.net/img/2008/12/1057361cm.gif "niceforms")niceforms**NiceForms是怎么工作的?** 原理很简单: 因为普通的输入栏(包括单选按钮,复选框,文本区域等)只能用样式控制一点点,所以他们必须被隐藏,而且它们的视觉表现要被类似的全新的完全个性化的结构替换。从理论上讲,这看起来并不复杂。但是,从理论到实践还有很长的路要走。 从基本的XHTML代码的网页表单开始, Niceforms分析DOM树,得到所有的输入栏,隐藏他们,在相应的位置替换他们的新的图形表现。所有这一切都在保持数据转换和正常表单的选择属性的情况下完成。

api

【转】JavaScript 函数库的未来

过去的几年里,函数库为JavaScript的突然风靡做出了巨大的贡献。JavaScript开发者因此而解决了难题,而且开发者在为感兴趣的问题开发解决方案的同时,又可以将这些应用到商业领域。 我一直在思考JavaScript函数库的未来是怎样的,其中我很希望引擎从API中分离出来。 选择器引擎(Selector Engine)的轻便性 函数库选择引擎的速度问题引来的争论实在不少,但前提是得看你怎么用它。所以我所谓的选择器引擎的轻便性指的是根据我的应用来自定义:可以根据从事的项目不断地更改选择器引擎。 例如: 构建一个完全的桌面web应用——我想使用尽可能全的选择器引擎; 为iPhone构建一个site版本——那我仅需要querySelectorAll因为它可以被支持; 构建一个移动设备可以连接的轻便版本,我会通过ID将JavaScript局限到目标元素以保持其紧凑性。 现在选择器引擎有越来越多的选择,尤其是当你知道如何自定义你的应用的时候。 我想看到的情况是: 我们是否能写出将新引擎导入库(如jQuery, Prototype, Mootools)的插件; 未来主流的函数库版本是否能支持可插型查询引擎(query engine)。 总之,开发者能够根据应用的具体需求而选择选择器引擎。 API的选择 一旦API与选择器引擎分离,函数库的选择就只是个人爱好的问题了。而且这种分离使得更多的公司能够创建基于现有引擎或APIs的个性函数库。例如,BBC创建Glow——他们自己的JavaScript函数库,是因为jQuery不支持Safari 1。 挑战 是否能有主流函数库的插件,能够让我们在函数库中接入新的选择器引擎?这是个挑战。我不是Prototype 和Mootools,

javascript

十个最佳Ajax/Javascript实例与演示网站

在这篇资源收集中,你将会找到十个提供高质量Ajax和Javascript实例与教程的网站或博客. 1. Ajax Rain AjaxRain有一些有插图的漂亮的网页效果,这些可以通过组合AJAX、CSS、DHTML或JavaScript 实现。一些演示是绝对值得一看,即使你不是网页设计师/程序员。 Ajax/Javascript 实例 EXT JS Date Picker jQuery Feed Menu jGrowl FastFind Menu – Jquery Spiffy Accordion 2. Ajax Daddy 一个大型的漂亮的web 2.0工具收集。一个很灵活的特性是在你决定把例子放到你的网站上之前,你可以在线调试这些实例。 Ajax/Javascript 实例 Flickr Like edit MooTools Autocomplete SlideShow Viewer Prototype window Shoutbox