首页风格
门户
博客

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

10款精挑细选的jquery插件

10款精挑细选的jquery插件

1. Perimeter.js

可以在指定的元素周围生成一个区域,帮助你触发特定的动画,例如,用户鼠标接近某一个按钮的时候,提示语变化或者出现特定的效果

10款精挑细选的jquery插件

2. Ezdz [izy-dizy]

一个帮助你将任何标准输入框类型变成可拖拽的区域的jquery插件,并且带有验证和预览效果

10款精挑细选的jquery插件

3. Validetta

一个帮助你做客户端表单验证的jquery插件, 帮助你降低使用验证功能的难度。

10款精挑细选的jquery插件

4. jQuery Selectric

帮助你处理样式和选择器的jquery插件

10款精挑细选的jquery插件

5. Device.js

基于不同操作系统,横竖屏和设备类型来帮助你快速书写条件CSS或者javascript的js类库

10款精挑细选的jquery插件

6. Flat Shadow by Pete R.

帮助生成flat UI元素阴影的jquery插件

10款精挑细选的jquery插件

7. Garlic.js

保存表单数据到本地,直到你成功递交表单

10款精挑细选的jquery插件

8. Zebra_Datepicker

帮助自动针对输入框生成日期选择器的jquery插件

10款精挑细选的jquery插件

9. Pikachoose

轻量级的一个jquery幻灯插件,拥有丰富的选项

10款精挑细选的jquery插件

10.…

标签: jquery, jquery插件, jquery plugin, 插件

阅读更多

Angular指令示例

Angular指令示例

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

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

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

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

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

创建甜甜圈图表指令

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

myAngularApp.directive('chartDonut',…

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

阅读更多

创建具有固定导航功能的滑动单页面布局网站

创建具有固定导航功能的滑动单页面布局网站

在线演示    在线下载

建立简单网页时,倾向于将内容放在同一布局中,而非多个页面。这类单页面网站非常适用于在线展示一个小型项目或者作品集。如果把内容分割为几个整洁的部分,那么访问者可以使用滑动导航以便快速浏览页面。

本教程展示如何利用jQuery建立典型的滑动导航,有多种可替代的插件都可以实现同样的功能,并且很省时。但我们这次只使用了jQuery,然后用scrollTo插件优化了性能。点击下面的链接查看在线动画演示吧。

Demo与源代码 下载 

入手

首先下载jQuery的本地副本,并与其他脚本文件放在一起。还需要 jQuery.scrollTo插件副本,它是一个单一的.js文件。我创建了两个替换文件index.html styles.css,用于存放页面架构。我们首先来分析主要的内容。

<!doctype html>
<html lang="en-US">
<head>

标签: 导航功能, 页面布局, javascript, 滑动页面, jquery

阅读更多

利用HTML5与jQuery技术创建一个简单的自动表单完成

利用HTML5与jQuery技术创建一个简单的自动表单完成

在线演示 在线下载

谷歌快速搜索自带大量自动完成插件--库中甚至还有一个附带的jQuery UI共享选项。然而今天我要寻找一个替代的解决方案。由DevBridge开发的 jQuery Autocomplete插件有确切的功能,我觉得非常有吸引力。你在打字的时候,结果将出现在下拉菜单底部,自动突出显示的词语。本教程简单介绍了通过加载JavaScript数组的内容运行这个插件。从后端文件加载Ajax内容或者从数据库中加载文本内容都是可行的,在本教程中,更容易使用本地数据。查看以下演示,了解这个插件 吧。

在线演示--下载源代码

利用HTML5与jQuery技术创建一个简单的自动表单完成

创建页面

首先下载 jQuery Autocomplete插件,这里使用的是压缩后的版本,以及最新的jQuery脚本的副本。因为我在JavaScript数组里保留了所有选择项,于是将自定义脚本移动到了另一个单独的文件中。

<!doctype html>
<html lang="en-US">
<head>

标签: html5, jquery, 自动表单, 网站模板, 表单

阅读更多

极客技术专题【010期】:jQuery初学者入门 - jQuery effects

jQuery初学者入门 - jQuery effects

技术专题:jQuery初学者入门【第四讲:jQuery effects】

分享人:极客标签技术编辑 - Nelly (请站内关注分享人)

授课时间:2013/08/29(周四)  20:00-21:00

课程类型:公开

专题难度:初级

课程时间:60min

课程大纲:

上周我们介绍了jquery的Event操作,本周我们将继续了解-- jquery effects

"课程平台"使用帮助:如何使用极客社区"在线课程平台"?

如何进入课程

  • 已报名用户:进入课程日历后底端有工具条提示,可提前进入指定课程
  • 未报名用户:需要等待课程开始时间后,进入课程日历后,点击对应日历项进入课程

标签: CSS3, jquery, gb互动技术分享, 初学入门, 免费在线课程

阅读更多

创建CSS3警示框渐变动画

创建CSS3警示框渐变动画

在线演示 在线下载

现代的网页设计技术已经允许开发人员在大多数浏览器中快速实现所支持的动画,其中消息警示是非常普遍的。由于默认的JavaScript警示框往往设计不佳和过于侵入式,这导致开发人员想到找出一个更友好的用户界面解决方案。在本教程中,我会解释如何可以将CSS3警示框放在页面主体的顶部,然后, 用户可以通过点击让警示框消失,最终从DOM中删除。作为一个有趣的附加功能,我还提供了按钮,在这里你可以点击到页面顶部追加新的警示框。查看以下示例 演示,进一步了解我们的设计概念。

在线演示--下载源代码

创建CSS3警示框渐变动画

创建页面

首先我们需要命名"index.html"和"style.css"两个文件夹,我引用了由谷歌代码内容分发网络承载的最新 jQuery库。HTML相当简单,因为我们只需要创建一些虚拟文本警示框。所有的JavaScript已添加到页面底部,以减少HTTP请求。

<!doctype html>
<html…

标签: css, jquery, css3, 网页设计, 动画效果

阅读更多

web页面内容优化管理与性能技巧

web页面内容优化管理与性能技巧

回想一下,以前我们不得不花费大量时间去优化页面内容(图片、CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪 存文件,里面包含的有视频或者图片。然而,随着移动开发的兴起,我们又回到了过去的窘状。网站优化是十分重要的,需要下载的内容少,反应速度快,就能使我 们加载应用程序更快速。

图片:控制在合适的尺寸大小

很多时候我们在不同的网站使用同样的图像,例如一个网上商店,所有产品都 有一个概览图片。打个比方,有三个页面描述产品,第一个页面显示产品清单,第二个页面显示产品细节图,第三个页面显示产品原始大小图。因此,我们需要三种 不同大小的图片。如果使用一个文件放到不同的三个页面上,那么浏览器会自动加载完整大小的图片,就连清单页也是,实际上清单页只需要200×200尺寸的 图片。如果原始文件大小在1MB左右,每页上有十个产品介绍,那么用户就要下载10MB大小的资源。这样做效果不好。如果可以的话,尽量为你的网站不同位…

标签: web页面优化, 页面优化, javascript, web页面, css, jquery

阅读更多

15个CSS3和jQuery的超棒页面过渡效果教程

15个CSS3和jQuery页面转换教程

CSS3jQuery从根本上改变了网页设计和程序开发。通过CSS3jQuery,设计员和开发者不需要太多的精力或编码,就可以创造出非常 美丽令人叹惊的效果,同时还可以令你快速完成任务。CSS3jQuery最大的方便之处在于网上有大量的不同元素效果的展示教程,这一点使得学习新技巧 和创造一些很棒的内容更加轻松。网上有很多页面过渡效果展示教程,给页面转换添加漂亮的过渡效果。这些转换效果可以相当夸张和花俏,也可以非常简单朴实。 这些效果会使得你的网页更加漂亮醒目。本章我们将展示一些运用CSS3jQuery制作出非常棒的页面转换效果,看看吧,选择自己最喜欢的加以运用,为 自己创造点什么吧。

1、全屏布局页转换DownloadDemo

一种简单响应的好看的页面转换。做法是首先显示四个项目然后加以扩展,给内置项添加进页面。

 15个CSS3和jQuery页面转换教程

 2、页面转换DownloadDemo

使用CSS动画达到网页过渡特效的展示图集。

 15个CSS3和jQuery页面转换教程

3、Pesudo动画和过渡…

标签: css3, jquery, 布局特效, 页面转换, 教程, 过渡效果

阅读更多

分享10个超实用的jQuery代码片段

分享10个超实用的jQuery代码片段

jQuery以其强大的功能和简单的使用成为了前端开发者最喜欢的JS类库,在这里我们分享一组实用的jQuery代码片段,希望大家喜欢!

jQuery平滑回到顶端效果

$(document).ready(function() {

  $("a.topLink").click(function() {
    $("html, body").animate({
      scrollTop: $($(this).attr("href")).offset().top + "px"
    }, {
      duration: 500,
      easing: "swing"
    });
    return false;
  });

});

运行代码:

GBdebug在线调试地址:http://www.gbin1.com/gb/debug/20864b59-a995-4318-a242-b3038f83f2c3.htm

jQuery处理图片尺寸

$(window).bind("load",…

标签: 代码片段, jquery, javascript

阅读更多

超棒的旋转式幻灯jQuery插件 - Roundabout

超棒的旋转式幻灯jQuery插件 - Roundabout

在线演示

相关阅读:

分享40多个新鲜的jQuery图片和内容幻灯插件 

分享一款强大的jQuery旋转轮播式插件 - CarouFredSel 

可能大家都厌倦了千篇一律的平面幻灯特效,在这篇文章中我们将介绍一款超棒的立体动态旋转式的jQuery幻灯插件 - Roundabout。

使用这款jQuery插件可以帮助你快速的生成一个旋转式的幻灯效果,相信如果你能够很好的整合到你的网站或者web应用中去,肯定会给你的网站增色不少!

主要特性

  • 支持jQuery1.2以上
  • 高度可自定义,甚至拥有扩展的API
  • 除了点击操作,也支持拖拽操作
  • 除了宣传式的幻灯,你可以开发其它运动方式的幻灯
  • 支持现代浏览器及其一些老的浏览器

如何使用

HTML

<ul>
<li><img src="images/firefox.png" alt="firefox" /></li>

标签: jquery, jquery plugin, 旋转式幻灯插件, jquery插件, 幻灯插件

阅读更多

介绍一个快速导航插件:Windy

介绍一个快速导航插件:Windy

在线演示

windy 是一个jQuery插件,使用CSS 3D变换和转换来略过一堆物品从而实现快速导航。连续导航的效果就是提醒一副牌或表单快点飞走,因此得名Windy。这个插件的想法是受CSS着色器示例 的影响。使用这个插件时需要一个无序列表的class:"wi-container"

<ul id="wi-el" class="wi-container">
<li>
<img src="images/demo1/1.jpg" alt="image1"/>
<h4>Coco Loko</h4>
<p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p>
</li>

标签: jquery, jquery plugin, 导航插件, jquery插件, 导航

阅读更多

开发小技巧:jQuery来循环控制一系列的元素对象的行为

开发小技巧:jQuery来循环控制一系列的元素对象的行为

在线演示

在jQuery开发中,我们往往需要循环的控制一些元素的行为,比如,动画,或者隐藏/显示,通常我们可以使用jQuery的delay()方法或者Javascript的setTimeout方式来处理。

相关文章可以阅读: 如何使用jQuery让一组HTML对象一个一个淡出?

在这篇小技巧中,我们使用arguments.callee这个javascript的属性来完成类似上面的效果,代码如下:

    var item = $('#nav li'),count =0;
    (function() {
    $(item[count++]).animate({top: 40*count, opacity:0.8}, 500, arguments.callee);
    })();

首先定义需要添加效果的元素系列,然后使用匿名方法来定义动画效果,并且使用argument.callee来回调函数方法。

HTML代码

    <ul id="nav">

标签: jquery, 开发小技巧, jquery技巧

阅读更多

开发小技巧:jQuery处理自适应内容高度的iframe

开发小技巧:jQuery处理自适应内容高度的iframe

在线演示 

之前我们发表过另一篇开发小技巧的文章 :开发小技巧:超简单的"回到顶端"按钮实现,喜欢的朋友可以点击来看。

前端开发中,我们往往需要处理iframe,可能有的时候希望iframe根据内容自适应高度以便不出现令人烦心的滚动条,下面这段代码可以帮助你实现类似功能。

$(document).ready(function()
{
// Set specific variable to represent all iframe tags.
var iFrames = document.getElementsByTagName('iframe');

// Resize heights.
function iResize()
{
// Iterate through all iframes in the page.
for (var i = 0, j = iFrames.length; i < j; i++)
{
// Set inline style to equal the…

标签: jquery, iframe, 开发小技巧, jquery小技巧

阅读更多

开发小技巧:超简单的“回到顶端”按钮实现

开发小技巧:超简单的

在线演示

之前的文章中我们曾发表过另外一个back to top的插件 :jQuery Back to Top,喜欢的朋友可以点击来看。

开发小技巧:超简单的

今天我们介绍的这篇web开发小技巧将使用jQuery实现一个超简单的滚动到页面顶端的功能,代码如下:

$(document).ready(function() {
// 滚动窗口来判断按钮显示或隐藏
$(window).scroll(function() {
if ($(this).scrollTop() > 150) {
$('.back-to-top').fadeIn(100);
} else {
$('.back-to-top').fadeOut(100);
}
});

// jQuery实现动画滚动
$('.back-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0},…

标签: jquery, 开发小技巧, jquery小技巧, back to top, 回到顶端

阅读更多

超简洁的响应式幻灯 - unslider

响应式幻灯

在线演示

Unslider是一款超迷你的响应式幻灯,如果你需要找到一款纯粹的幻灯插件的话。unslider就是你的不错选择,支持响应式,并且支持触摸设备。没有多余的功能,纯粹的幻灯实现。主要特性:

  • 支持不同浏览器
  • 支持键盘导航支持
  • 自动修改图片高度
  • 支持响应式
  • 如果需要支持触摸设备的话,可以使用jQuery.event.swipe插件

如何使用?

导入类库:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://unslider.com/unslider.js"></script>

HTML代码:

<div class="banner">
<ul>
<li>This…

标签: 响应式幻灯, jquery, unslider, jquery插件

阅读更多

下一页

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

?ü?à

今日推荐