首页风格
门户
博客

GBin1博客视图 - 最近发布的文章-demo

轻量级的超酷时间序列javascript类库 - Morris.js

日期:2012/03/02  来源:GBin1.com

轻量级的超酷时间序列javascript类库 - Morris.js

在线演示  本地下载

是不是寻找一个轻量级的时间序列javascript类库,今天我们将介绍的这个时间序列类库morris.js可能就是你需要的图形利器。希望大家有机会在自己的项目中使用到。如果你喜欢们的文章,请给我们留言!

主要特性

最初morris.js用来开发网站 howmanyleft.co.uk,现在已经成为一个开源项目。

依赖类库:

支持浏览器:

  • IE6+
  • Safari/Chrome/Firefox
  • iOS 3+
  • Android 3+

如何使用?

morris.js的使用很简单,你只需要使用一个方法:

Morris.Line(options)

选项:

  • element(必选): 用来插入图形的元素 (注意:这个元素必须宽度和高度定义在自己的样式表里)
  • data(必选):用来绘图的数据,可以使对象数组,包含了x和y轴属性(注意:排序在这里不重要,你可以按你的需要随意的排序)
  • xkey…

标签: time-series, morris.js, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

一个页面内滚动的jQuery插件 - PageScroller

日期:2012/02/28  来源:GBin1.com

一个页面内滚动的jQuery插件 - PageScroller

在线演示  本地下载

今天介绍一款页面内滚动的jQuery插件-pagescroller,以前我们也介绍过类似的jQuery插件 jQuery的滚动插件Waypoints

主要特性:

  • 支持缺省方式左侧导航
  • 支持向上及其向下滚动图标,支持俩个主题
  • 支持顶端固定导航菜单
  • 支持右侧导航 
  • 支持IE9+,firefox,chrome等浏览器

如何使用?

  1. 倒入相关类库
  2. 定义滚动区域:$('#wrapper').pageScroller()
一个页面内滚动的jQuery插件 - PageScroller

Javascript

$(document).ready(function(){

// instantiate page scroller plugin

var navLabel = new Array('Introduction', 'How It Works', "What's Included?", 'Documentation',…

标签: PageScroller, jquery滚动插件, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

11个灵活可定制的jQuery内容幻灯插件

日期:2012/02/28  来源:GBin1.com

jQuery的图片幻灯实现很多,可能有几百个。如果你有兴趣,可以阅读我们相关文章

这里我们将介绍内容幻灯,和图片幻灯不同,内容幻灯除了图片以外可以展示更多的内容,比如,HTML,内容,视频等等。这里我们挑选了11个不错的jQuery内容幻灯插件,有些在我们以前的插件介绍中也有过介绍,希望大家喜欢!

Orbit

Zurb可能对于大家来说并不陌生,他们使用CSS3创建了很多的相当酷的东西和web体验。这次他们创建了jQuery图片幻灯,可以同时支持图片和内容。而且将它整合到了他们的框架 Foundation中。虽然目前他们不支持这个幻灯了,但是依旧很出色。

Zurb Image Slider

Slidorion

一个图片幻灯和手风琴效果的整合。支持大量的特效,传统幻灯外的一个很不错的选择。

11个灵活可定制的jQuery内容幻灯插件

Slides JS

基于简单实现的jQuery插件。拥有很多有用的特性,例如创建友好的幻灯展示。

11个灵活可定制的jQuery内容幻灯插件

标签: 幻灯, jquery幻灯, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

CSS3属性的快速说明信息图

日期:2012/02/26  来源:GBin1.com

今天分享一张CSS3主要属性的信息图,帮助大家更好的理解和记忆CSS3的关键属性,相信大家一定喜欢!

CSS3属性的快速说明信息图

来源: CSS3属性的快速说明信息图

标签: CSS3属性, CSS3信息图, css3 infographic, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

使用绘图类库flotr2来绘制HTML5的图形和图表

日期:2012/02/26  来源:GBin1.com

使用绘图类库flotr2来绘制HTML5的图形和图表

在线演示  本地下载

今天介绍一个款不错的HTML5绘图和制表类库-flotr2。 它可以有效地帮助你绘制基于HTML5的图表和图形,包括线图,柱状图,饼图,气泡图等等,对于浏览器的兼容性也非常不错。

flotr2主要特性

  • 移动支持
  • 独立框架
  • 可扩展的插件框架
  • 自定义的图表类型
  • FF, Chrome, IE6+, Android, iOS
  • 线装图
  • 柱状图
  • 烛柱图
  • 饼图
  • 气泡图

HTML

<div id="container" class="container"></div>
<div class="controls">
<h3>Function:</h3>
<p>

标签: flotr2, 图表类库, html5图表类库, 绘图类库, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

10款非常有效的帮助你设计超酷响应式布局的jQuery插件

日期:2012/02/24  来源:GBin1.com

10款非常有效的帮助你设计超酷响应式布局的jQuery插件

如果你关注最近几年的web设计,那么响应式布局(responsive layout)设计对于你来说肯定不是一个陌生的词汇。 相对于传统的页面设计来说,今天的设计者需要考虑的用户来源和用户体验对于设计者来说是一个非常大的挑战,因为随着硬件的更新,新设备的出现,你需要能够使得你的网站能够针对不同的设置做出最好显示响应。最初这个名称来自于Ethan Marcotte的文章"Responsive Web Design",设计的理念在于为了有效的利用空间和布局来满足用户阅读过程中产生的不同使用行为,并且及时的做出响应。现在的响应式设计中,我们网站也针对不同的设备的显示尺寸来有效的改变页面布局和样式。如果大家使用过jQuery mobile网站API文档的话,你可以看到它也是用了响应式设计的模式,如果你使用浏览器浏览文档,如果你变化你的浏览器尺寸,显示的内容也会根据浏览器尺寸变化。

今天这里我们将介绍几款非常不错的jQuery插件来帮助你构建你的响应式设计,希望大家喜欢,如果你喜欢我们的文章,请大家去我们微博或者留言区留言,谢谢大家!

相关文章:分享10款帮助你设计自适应布局(Responsive

标签: 响应式布局, responsive design, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

使用jQuery和CSS3实现的超炫3D画廊特效

日期:2012/02/23  来源:GBin1.com

使用jQuery和CSS3实现的超炫3D画廊特效

在线演示  本地下载

今天我们分享一款使用jQuery和CSS3实现的3D环廊展示特效,这个3D特效使用CSS3的3D变化特性实现,简单而非常华丽,希望大家喜欢!

使用3D变化,通过将它们放置于一个三维空间,我们可以让很简单元素变得更加有活力,同时使用CSS的过渡效果,这些元素可以很容易的移动到3D空间中,并且创建一个非常真实的效果。

主要的想法是创建一个轮播式的画廊,我们可以将一个图片放置在中间,旁边放置两个图片。因为我们使用不同的角度,所以看起来两张旁边的图片好像被设置在一个3D空间中,然后我们旋转它们。

注意:这里的效果需要你的浏览器支持3D变化效果

如何工作

<section id="dg-container" class="dg-container">

标签: 3D图片画廊, jQuery图片画廊, 图片画廊, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

一个帮助你提高阅读体验的jQuery页内书签插件 - youRhere

日期:2012/02/23  来源:GBin1.com

一个帮助你提高阅读体验的jQuery页内书签插件 - youRhere

在线演示  本地下载

大家肯定都有这样的体验,正当我们在专注的阅读某位大神的最新大作的时候,一个电话过来,当我们接完电话的时候,发现自己迷失在文章中,于是自己再从某部分开始重新阅读。我相信很多人都有类似的糟糕阅读体验,而今天我们介绍的这款jQuery插件 - youRhere,将能够让你的用户在阅读文章过程中,解决这个继续阅读的问题。希望大家喜欢这个插件,个人觉得很不错!

主要特性

  • 免费开源,自由下载,当然你去youRhere网站看不到jQuery下载地址,可以在本文演示下载地址
  • 使用HTML5的本地存储API,需要你使用现代浏览器
  • 支持"左到右"和"右到左"阅读
  • 初次使用的向导
  • 使用简单
  • 支持多浏览器,IE,Firefox,Chrome,并且支持Chrome插件
  • 10k的javascript,需要jQuery类库支持

如何使用

使用很简单,你可以直接在本文的演示下载地址下载,下载类库后,调用如下:

<script

标签: 阅读, 阅读体验, 用户体验, youRhere, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

分享一个最具有灵活性的jQuery幻灯插件 - Rhinoslider

日期:2012/02/23  来源:GBin1.com

分享一个最具有灵活性的jQuery幻灯插件 - Rhinoslider

在线演示  本地下载

今天我们介绍一款自称为最具灵活性的jQuery幻灯插件 -  Rhinoslider,Rhinoslider是一款新发布的jQuery插件,它不单单提供非常可供选择的过渡效果,同时也允许你添加你自己的样式,效果及其特性。最棒的地方在于它提供了一个辅助工具 - Generator,帮助大家来方便的配置这个幻灯,即使你不熟悉编程,你也同样可以方便的使用这个工具来帮助你生成你需要的幻灯效果及其选项,你只需要拷贝生成的JS代码到你的网站中即可。是不是很体贴用户。希望大家能够喜欢这个jQuery幻灯插件,如果你有什么想法,请给我们留言,谢谢!

如何使用?

如果你只需要使用Generator,那么你只需要在Generator配置好你需要的效果及其选项后,点击应用,然后直接点击右边侧栏的下载(Get…

标签: jQuery幻灯, jQuery幻灯插件, Rhinoslider, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

8个能够有效帮助你提高jQuery代码性能(performance)的技巧

日期:2012/02/22  来源:GBin1.com

8个能够有效帮助你提高jQuery代码性能(performance)的技巧

jQuery越来越流行了,大家可能也会发现,在浏览网站过程中,越来越多的网站开始使用jQuery来构建以前需要使用flash来实现的超酷动态效果,事实上jQuery已经成为前端开发中重要的类库之一,发挥着构建丰富web前端的利器。但是作为一个JS类库,很多人并不是非常清楚如何正确使用 jQuery来达到最佳的性能(Peformacne),如果你觉得代码书写对于性能的影响不会那么巨大,那么我只能告诉你,当你使用 jQuery开发一个复杂的动画和web应用的话,它有可能成为你性能上的终极噩梦。

在这篇文章中,我们将介绍代码书写中,大家应该需要注意的几个性能问题,希望对于大家在书写高性能的web应用中有帮助,大家在书写jQuery的过程中,小阳台注意和避免这些性能的问题,才能写出高质量高性能的web应用,希望大家喜欢这篇文章。谢谢!

选择器Selector的使用

jQuery中的选择器selecor是大家经常使用的强大功能,事实上jQuery提供给我们非常丰富的手段来使用选择器定位DOM元素。但是很少有开发人员会考虑使用不同的选择器来处理性能问题。这里我们将介绍几种常用的选择器,及其它们之间的性能差异。

  • $("#id")

使用id来定位DOM元素无疑是最佳提高性能方式,因为jQuery底层将直接调用本地方法document.getElementbyId(),如果熟悉javascript的朋友应该了解这个方法将直接通过元素id来返回对应的元素。当然,如果这个方式不能直接找到你需要的元素,那么你可以考虑调用.find()方法。如下:

$("#gbid").find("div")

使用以上方法可以有效的缩小你定位的DOM元素。…

标签: jQuery优化性能, jQuery性能, jQuery代码书写, jQuery高性能代码, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

下一页

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

?ü?à

今日推荐