首页

关于

一个帮助你在触摸设备上使用jQuery UI的JS类库 - jQuery UI Touch Punch

一个帮助你在触摸设备上使用jQuery UI的JS类库 - jQuery UI Touch Punch

在线演示

jQuery UI是我们前台开发常用的UI前端类库,但是目前的jQuery UI用户界面类库在互动和widget上并不支持touch事件。这意味着你在桌面上设计的优雅的UI可能在触摸设备,例如,ipad,iphone和Android上并不能正常工作。因为jQuery UI监听的是mouseover,mousemove和mouseout事件,不是触摸事件,touchstart,touchmove和touched。

为了解决这个问题,这里我们介绍jQuery UI Touch Punch类库,它通过模拟事件来将鼠标事件匹配touch事件 。你只需要简单的添加相关类库即可。非常简答,容易使用。

支持设备

  • iPad
  • iPhone
  • Android
  • 其它基于触摸的移动设备

如何使用

类库使用非常简单,引入,jQuery,jQueryUI和 jQuery UI Touch Punch类库,如下:

<script src="http://code.jquery.com/jquery.min.js"></script>
<script…

标签: jqueryUI触摸设备支持, jQuery UI Touch Punch, jQuery UI

阅读更多

使用jQuery tag handler开发一个带有标签功能的文章发布系统

使用jQuery tag handler开发一个带有标签功能的文章发布系统

在线演示1  在线演示2  本地下载

网站和web开发中我们常常需要处理类似标签添加功能的模块,以前我们也介绍过相关的jQuery插件 - textext,可以方便的添加标签增减和自动补齐相关功能。今天这里我们将使用另外一个非常轻量级的jQuery插件来实现漂亮的标签处理功能,这里我们将使用以前的超酷留言板系统为基础来实现一个完整功能的留言发布系统,希望大家喜欢!

主要使用插件

注意:jQuery UI的autocomplete在Firefox下处理中文自动补齐功能有个bug,你需要自己解决,解决方法如下:

找到jQueryUI中的如下代码:

标签: jQuery, jQuery UI, jQuery Tag plugin, jQuery标签插件, jQuery tag handler

阅读更多

轻量级的超酷时间序列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, 图标, 模板

阅读更多

下一页

标签

© Copywrite by gbin1.com, all rights reserved.