首页风格
门户
博客

Javascript技术

前端代码回放:使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验

前端代码回放:使用Bootstrap3和Ladda UI实现的多种按钮

在这个代码回放中,我们将使用Bootstrap3和Ladda UI设计概念来开发一个超酷的加载中效果,大家可以方便的应用这种设计概念到你的web应用或者网站开发中,希望大家觉得有帮助!

全屏播放地址: http://www.gbtags.com/gb/rtreplayerpreview/9.htm

更多代码回放请访问:极客标签社区

阅读更多

帮助减少JS请求的node.js工具-DynoSrc

帮助减少JS请求的node.js工具-DynoSrc

DynoSrc是一个帮助Node.js服务器应用高效发布JS到客户端的解决方案,使用比对的方式来更新JS相关资源。

好处在于能够最小化HTTP请求,DynoSRC通过HTML响应加载JS文件,并且保存到本地存储。你甚至可以在HTML响应中来调用DynoSRC客户端类库,减少所有JS的请求。

基本通常来说,如果你的网站的JS有任何变化,你的用户需要下载整个文件,即使只是一个部分修改变化。DynoSRC可以帮助你发送变化的部分,而不用下载整个文件。

网站地址: http://dinosrc.it/

标签: nodejs, javascript, DynoSrc

阅读更多

Angular指令示例

Angular指令示例

过去几个月中,我一直在研究Angular框架。我觉得最好用的就是它的"指令"概念,并且我很想把这个功能学好。"指令"可以为你的标记提供语义意义和功能性。有几种方法能实现指令,angular网站上的文档还在不断更新,现在我来与大家分享我是如何使用它的。

目标:创建一个可重用的甜甜圈图表和图例

首先,我们要思考如何把数据输入到图表。我创建了一个快捷模块,它包含一个"生产线",里面有"产品"。这个计划是能够使用单一控制器和视图看到同一个产品的甜甜圈图表和图例,以及完整的生产线。

每个产品都有一个原始货品成本、运输成本、标记数量。单例模式是指生产线能够获得所有产品的聚合数据,用于查看全部种类货品的总体成本。然后我创建了一个服务应用程序来与这个模块进行互动。

由于本教程专注于指令,所以我不会详细介绍其他部分,不过你还可以在 我的github上找到全部源代码。

创建甜甜圈图表指令

我们要做的第一件事情是创建图表指令,如下所示:

myAngularApp.directive('chartDonut',…

标签: angular, 指令提示, 指令示例, jquery, js

阅读更多

【基础篇】JavaScript单元基础测试

【基础篇】JavaScript单元基础测试

无论用JavaScript,还是其他语言编写代码的过程中,都需要关注有效性。当你完成一段代码,肯定期待它能如预期般工作。想象一下,你已编写了几千行代码,它们是否能达到预期的效果?这就不一定了。

通过单元测试,确保编写代码的正确性是非常重要的。

那么,到底什么是单元测试呢?

维基百科中有关单元测试的定义如下:

  • 在 计算机编程中,单元测试(又称为模块测试)是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化 编程中,一个单元就是单个程序、函数、过程等;对于面向对象编程,最小单元就是方法,包括基类、抽象类、或子类中的方法。 

单看概念可能无助于大家理解实时性问题,那么我将上述文字缩减为简单的一句话:

  • 单元测试是一种你可以依赖用于检验一段代码是否有效的方法。

现在,我想你能了解单元测试是用来干什么的了吧。

我们需要测试什么?

JavaScript中,我们需要验证代码有效性,常需要检测的内容包括:

  • 函数返回值
  • DOM元素属性
  • 由闭包操纵的变量值

其实,JavaScript的任意一块内容都能被测试,方法也非常简单。

如何使用单元测试?

有关测试的方法有多种,甚至有诸如JasmineQUnit此类框架可以直接利用。不过本文不会介绍这些框架的使用,而是教大家编写一段简单的断言函数:

/**

标签: javascript, javascript测试, javascript测试基础, 基础

阅读更多

Backbone.js系列教程二:Backbone.js深入解析之基础要求

Backbone.js系列教程二:Backbone.js深入解析之基础要求

在网上关于Backbone的描述很少,现有的关于Backbone的内容五花八门,基本上都不同程度的提到了如何运用Backbone来实现应用程序的创建,当然也有很多的是讨论它是否匹配 Model/View/Whatever。有挺多华而不实的视频教程是讲程序设计的,但其实没有什么太大的价值。我认为关键是缺少了关于Backbone本身的详细介绍,以及对于每行代码的真正用意的细节描述。有篇文档专门讲述 Backbone各部分的功能,在一定程度上解答了上述问题,并且提供带有注释的源代码,还有更多相关Backbone.js的内容介绍。这些虽然远远不够,但最起码,能换个角度带大家了解Backbone的组成部分与功能。

在这套Backbone.js解构系列教程中,我们将从代码层面验证Backbone库的功能。

相关阅读: Backbone.js系列一 - Backbone.js初探

具体而言,在这套教程的前一部分中我们将探讨学习Backbone的基础,介绍单页面应用程序(SPAs)所需一些关键的细节,以便能更好的掌握Backbone的组成与用途。在对SPAs有一定基础之后,我们将系统深入到Backbone代码部分各个细节,包括Backbone.Events、创建Backbone对象、Backbone.Router()Backbone.History()Backbone…

标签: backbones.js, html, javascript, 前端框架

阅读更多

Backbone.js系列一 - Backbone.js初探

kbone.js系列一 - Backbone.js初探

JavaScript在web应用程序开发前端技术和后端技术的逻辑与运行一块占有越来越大的比重.为了帮助维护和循环访问前期逻辑和模块性,MVC模式在近几年中渐渐普及。其中一种运用广泛的MVC框架就是Backbone.js。

Backbone中的Models(模型)、Views(视图)和Collection(集合)

Backbone.js包含以下几个主要功能:

  1. 创建模型(以及模型集合);
  2. 创建视图;
  3. 管理绑定,管理事件兼用不同的模型以及视图与框架其他部分的联系;
  4. 在模型中使用观察者模式,一旦模型触发任何change事件,所有显示此模型数据的视图接受到该change事件通知,从而自动进行事件重新渲染;
  5. 给DOM处理所依赖的jQuery或Zepto提供支持。

第一部分:模型(Models)

创建模型,首先我们创建一个包含数据的Person对象。

Person = Backbone.Model.extend({
// Person实例的构造函数

标签: backbones.js, html, javascript

阅读更多

Javascript视差特效引擎 - Parallax.js

Javascript视差特效引擎 - Parallax.js

在线演示

Parallax.js是一个使用方便的视差效果引擎,可以帮助你实现非常棒的视差效果,并且对移动设备的横竖屏可以自动适应。并且支持自定义的行为,包括使用data属性或者Javascript的API。

网站地址:http://wagerfield.github.io/parallax/

标签: javascript, 视差特效

阅读更多

推荐十款来自极客标签的超棒前端特效[第十四期]

本周我们推荐来自极客标签社区带来的10款超棒前端特效,大家可以在这里免费下载你需要的内容。如果你也有更好的作品,欢迎分享到社区中来,在得到帮助的同时,也能与更多人分享来自你的作品。

运用jQuery and CSS过渡达到垂直展示效果

运用jQuery and CSS过渡达到垂直展示效果

运用jQuery,CSS转换和多媒体元素,创建一个具有响应性往相反方向移动的适应屏幕布局的垂直滑块。

3D缩略图悬停效果

3D缩略图悬停效果

有关如何运用CSS 3D变换和jQuery创建3D缩略图悬停效果。

运用CSS3过渡效果模糊菜单键

运用CSS3过渡效果模糊菜单键

如何运用文字阴影和过渡,以实现模糊菜单的效果,这将应用到菜单上的悬停元素。

带有渐变光泽的按钮

带有渐变光泽的按钮

带有渐变光泽的按钮。

使用CSS变形实现的3D动态书本效果

使用CSS变形实现的3D动态书本效果

主要代码:Hover on效果如下,请大家点击查看。

超棒的免费iOS 7线框图套件

超棒的免费iOS 7线框图套件

来自Blake Perdue的一个非常实用的Adobe Illustrator线框图套件。

免费资源: 200个矢量图标

免费资源: 200个矢量图标

一套超完整的矢量图标免费下载,包含了从科学到娱乐相关的全部图标,相信大家会喜欢滴。

轻量级的前端UI开发框架…

标签: 网页素材, web元素, element, 素材包, 网页元素

阅读更多

帮助自定义选择框样式的Javascript - DropKick.js

DropKick - 自定义你的<select>的样式

在线演示   在线下载

当你想要设计一个页面样式时,没有什么比表单更让人头疼了。而当你设计一个表单的样式时,最让你头疼的就应该非下拉框<select>莫属了。

我们可以使用CSS来给<select>定一个样式,但是只用CSS的话,这里就会有很大的局限性。通常情况下,唯一的可行选择就是用JavaScript来做下拉框的样式。

在这篇文章中,我们使用DropKick - 一个jQuery的插件,来创建我们的下拉列表。它做了什么呢?DropKick <select>列表转换成完全自定义的HTML元素做的下拉列表,而当你选择了一个下拉选项时,这个选项对应的选项值会更新成表单的一部分。好了,现在让我们开始吧!

创建<select>

我们要做的第一件事,是创建一个<select>列表,我们在例子中创建一个一周工作日的列表:

<select id='mySelect'>

标签: jquery插件, html5, css, 自定义样式

阅读更多

推荐十款来自极客标签的超棒前端特效[第十三期]

本周,我们带来了极客社区推荐的10款前端特效,仍然是非常有趣的小动态效果的页面生成。喜欢的可以直接将我们的在线调试代码插入,希望可以带给大家一些更好的帮助和不同以往的更好的体验! 

一款JavaScript实现的迷宫发电机特效

一款JavaScript实现的迷宫发电机特效

发电机特效,超级有趣,希望大家喜欢!

GBdebug在线调试地址:http://www.gbin1.com/gb/debug/40df48a3-2ed1-49fb-a770-9538b2bf1c89.htm

使用CSS实现的光环效应

使用CSS实现的光环效应效

光晕效果,可以自定义色彩和形状,还不赶快来试试。

GBdebug在线调试地址:http://www.gbin1.com/gb/debug/ac53e602-0fd8-4dc9-b2e0-ef25919b950f.htm

超炫立体特效背景

超炫立体特效

使用CSS实现的3D立体特效!色彩鲜艳,

GBdebug在线调试地址:http://www.gbin1.com/gb/debug/f268a334-3605-49af-9c3a-b0684f6d9118.htm

使用CSS实现的视频效果

使用CSS实现的默认皮肤的视频效果

看到测试中的海豚了吗?你有没有一种想和他们一同游泳的感觉!超棒的一款特效!

GBdebug在线调试地址:http://www.gbin1.com/gb/debug/a1b7f194-cb83-4e65-8d7b-19ef8133f960.htm

使用JavaScript实现的光学效应效果

使用CSS实现的视频效果

闪光特效,特别适合高科技技术的背景,喜欢的快来收图啊!…

标签: 特效, effect, special effect, 特殊效果图

阅读更多

推荐十款来自极客标签的超棒前端特效[第十二期]

本周,我们带来了极客社区推荐的10款前端特效,仍然是非常有趣的小动态效果的页面生成。喜欢的可以直接将我们的在线调试代码插入,希望可以带给大家一些更好的帮助和不同以往的更好的体验!

使用CSS和javascript实现的指针式手表效果

使用CSS和javascript实现的指针式手表效果

指针式手表效果,无论是计时还是时间,都是网站非常好的选择!

GBdebug在线调试地址:http://www.gbin1.com/gb/debug/9bf3b87c-9879-4c54-a4a6-f18ebacbae5b.htm

使用CSS实现的卡通宠物效果

使用CSS实现的卡通宠物效果。

这是使用CSS来制作的卡通人物,下载代码,你也同样可以创造出独一无二的人物哦!

GBdebug在线调试地址:http://www.gbin1.com/gb/debug/be85ab71-5310-4f6b-ad35-8a7c8cd150a7.htm

使用JavaScript实现的立体圆效果

使用JavaScript实现的立体圆效果

像一个漂亮的水晶球,或者是一个美丽的星空,总而言之,它真的非常美!值得你收藏!

GBdebug在线调试地址:http://www.gbin1.com/gb/debug/e31eecc0-33c6-4f50-83da-6f80068f1d55.htm

使用CSS实现的孔的立体效果

使用CSS实现的孔的立体效果

深邃的洞穴,有没有想一探究竟的感觉?

GBdebug在线调试地址:http://www.gbin1.com/gb/debug/a0417039-eb65-451f-9851-bbe9a630ecc8.htm

标签: 特效, effect, special effect, 特殊效果图

阅读更多

推荐十款来自极客标签的超棒前端特效[第十一期]

本周,我们带来了极客社区推荐的10款前端特效,仍然是非常有趣的小动态效果的页面生成。喜欢的可以直接将我们的在线调试代码插入,希望可以带给大家一些更好的帮助和不同以往的更好的体验!

使用CSS和JavaScript来实现电介质击穿模型效果

使用CSS和JavaScript来实现电介质击穿模型效果

电介质分解模型是一个宏观数学模型结合扩散限制聚集模型与电场。我们用CSS和Javascript来实现这样一款特效,希望大家喜欢!

GBdebug在线调试地址:http://www.gbin1.com/gb/debug/c81738f5-455a-4a91-9813-9cec9cb11b77.htm

使用CSS实现的加载效果

使用CSS实现的加载的另一种效果

这是一款使用CSS实现的加载特效!希望大家喜欢!

GBdebug在线调试地址:http://www.gbin1.com/gb/debug/9f0fee20-70b8-4815-9913-d9494f980586.htm

使用CSS实现的加载效果

使用CSS实现的加载效果

这是另一款加载特效,它更简单清晰,大家可以直接从下面的在线调试中获取代码!

GBdebug在线调试地址:http://www.gbin1.com/gb/debug/7ab2b7ad-e70a-4376-81d0-5010ea400534.htm

使用CSS和JavaScript实现的电子表效果…

标签: 特效, effect, special effect, 特殊效果图

阅读更多

帮助你快速简单执行定时循环操作的JavaScript类库 - Later.js

帮助你快速简单执行定时循环操作的JavaScript类库 - Later.js

当我们用JavaScript创建按照时间来执行的一系列预定事件时,我们通常在只需要触发一次的事件中使用setTimeout(),而在需要循环触发的事件中使用setInterval()。

Later.js,一个独立的JavaScript类库,提供了循环事件触发的高级应用,可以为项目替换以上两种方法。

通常,我们要完成复杂的时间预定,需要大量的if...else语句。Later.js提供了可连接的API,方便用户创建如下的复杂时间预定:

// 每个月的第一天每两小时执行一次
// and 每个月的最后一天的8:00am和8:00pm
// except 12月
var sched = later.parse.recur()
.every(2).hour().first().dayOfMonth()
.and()
.on(8,20).hour().last().dayOfMonth()
.except()
.on(12).month();

阅读更多

实现Flat UI效果的前端框架 - Furatto

实现Flat UI效果的前端框架 - Furatto

Furatto是一款以BootstrapFoundation作为基础,可以快速开发网站的前端框架。Furatto框架使用了流行的 Flat UI(扁平化界面)且以响应式布局为中心。

除了排版列印和网格,Furatto还有所有的常用元素样式,例如按钮,表格或者表单,各种JavaScript组件,如模态或是提示。Furatto使用 Sass,因此它的颜色和样式设定改变简单,因此它是一款值得收藏的框架,尤其是扁平化设计的爱好者。

网站地址:http://icalialabs.github.io/furatto/index.html

via 极客标签

阅读更多

下一页

喜欢我们的文章请您与朋友分享:

?ü?à

今日推荐