首页风格
门户
博客

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

jQuery类库新手使用指南之AJAX方法 - 第四部分

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

在前面几篇文章中,我们介绍了jQuery的诸多AJAX方法,今天我们将介绍如何使用jQuery来执行ajax跨域调用,因为在AJAX调用中因为安全问 题,我们无法直接使用javascript来调用当前域名以外的资源,如果你将前面几篇文章的例子保存到本地,然后执行,你会发现无法得到数据。为了解决 这个问题,这里我们引入了JSONP这个概念。如果你不清楚什么是JSONP,JSONP能够帮助我们解决什么问题,那么推荐你阅读一下这篇文章:

使用$.getJSON()来访问其它域名或者网站下的JSON数据

为了有效的整合网络资源,有些时候我们需要取得其它网站或者应用提供的资源,这个时候,如果对应的网站提供JSON数据格式的直接访问,那么我们就可以使用$.getJSON()这个方法来有效执行跨域的数据访问,如下:

var…

标签: jQuery, AJAX, jQuery AJAX, AJAX API, JSONP, ajax跨域, jQuery类库, ajax方法

阅读更多

jQuery类库新手使用指南之AJAX方法 - 第三部分

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

继续昨天的介绍,我们将介绍最后一个AJAX调用方法及其相关的其它辅助方法帮助你使用jQuery构建AJAX应用。

使用$.ajax()来创建一个一般性的AJAX请求

前 俩篇文章我们介绍了一些上层的ajax方法例 如,$.get(),$.post(),$.load(),$.getJSON(),$.getScript(),今天我们将介绍一个底层的ajax方法 - $.ajax()。前面的方法你可以看做是$.ajax()方法的便捷使用。大多数的情况下都可以很好的满足你对http请求的处理,但是可能有些时候你 需要更底层的去自己处理相关的请求,这个时候你需要自己来调用$.ajax(),而不是使用上层的便捷方法例如,$.get()等。如下:

$.ajax(url, [setting]);

对于以上代码非常好理解,url代表了你请求的服务器地址,setting则用来配置你的选项,这些参数并不是必须的,你可以自己选择使用。通过这些参数你可以很方便的控制ajax的请求。下面是你可以设定的一些选项:

  • accepts:…

标签: jQuery, AJAX, jQuery AJAX, AJAX API, jQuery类库, ajax方法

阅读更多

jQuery类库新手使用指南之AJAX方法 - 第二部分

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

继续昨天的AJAX方法,今天我们将介绍另外几种常用AJAX请求方法:

使用$.post()方法来创建POST请求

和$.get() 方法类似,$.post()可以帮助你创建HTTP的POST请求。它的语法和$.get()方法非常类似,唯一的区别就在于POST使用HTTP POST方法来传递。如果你不清楚HTTP POST和GET的区别,简单来说,GET传递过程中的参数会直接附在URL上,并且发送的参数数据长度有限制。而POST则没有这些限制,比较典型的使 用,例如,如果你使用表单开发登录窗口的话,最好使用POST,因为使用GET会泄露你的密码。

$.post()的使用如下:

$.post( "http://gbin1.com/index.jsp", gbdata, myCallback, "json" ); 

在前一篇文章中的演示,我们也可以使用$.post()方法来实现,如下:

在线演示…

标签: jQuery, AJAX, jQuery AJAX, AJAX API, jQuery类库, ajax方法

阅读更多

jQuery类库新手使用指南之AJAX方法 - 第一部分

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

jQuery类库新手使用指南之AJAX方法

最近几年很多网站,事实上基本所有的网站都使用一个技术 - AJAX来提供流畅并且高效的用户体验。无论是出名的Google Maps还是Gmail,或者是流行的javascript框架-jQuery Mobile,都使用AJAX来获取后台数据,并且实时更新用户浏览页面。

使用javascript代码来构建一个AJAX应用可能需要技巧。但是,很多的javascript类库,包括jQuery都已经内建支持AJAX,这样使得开发一个AJAX驱动的网站或者应用变得非常简单。

在这个教程中,我们将学习使用jQuery来执行基本的AJAX请求操作。 你将会学习:

  • AJAX是什么?工作原理是什么?为什么AJAX是一个好东西?
  • 如何使用jQuery来调用各种AJAX请求 
  • 使用AJAX请求来发送数据
  • 处理服务器端的AJAX请求,获取返回的数据
  • 如何自定义jQuery的AJAX处理及其参数设置
  • AJAX的高级使用

注意:本文主要介绍javascript端的使用,如何你需要了解后台,请参考你所使用的语言。

AJAX是什么?工作原理是什么?为什么AJAX是一个好东西?

简单说,AJAX是一个帮助你的浏览器和服务器异步通讯的javascript技巧。是Asynchronous…

标签: jQuery, AJAX, jQuery AJAX, AJAX API, jQuery类库, ajax方法

阅读更多

如何在链式操作中使用hide(), delay()和show()?

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

jQuery开发中最快速的编程方式就是链式操作,在开发一个简单的定制加载页面过程中,我需要能够让一个页面元素出现,延时1000毫秒,最后消失,本来这个过程非常简单,我觉得直接使用如下代码即可搞定:

$("#gbin1-text").show().delay(1000).hide();

但是,让我费解的是,这个代码即不出错,也不显示我希望出现的元素,然后消失。

本身这个代码没有任何问题,如果大家尝试使用下面的代码,可以正常工作。

$('#gbin1-text').slideUp(300).delay(800).fadeIn(400);

本身这俩行代码没有太多区别啊,但是上面代码就是无法正常工作,无奈之下,Google了一下,发现原因了。

如果你将以上代码修改为

$("#gbin1-text").show(0).delay(1000).hide(0);

标签: delay(), hide(), show(), Javascript, AJAX, jQuery, jQuery技术网站, jQuery学习网站, jQuery教程, jQuery小测验, jQuery Quiz, jQuery测试, jQuery在线检测

阅读更多

分享一款能充分挖掘设计者想象力的jQuery幻灯插件 - Sequence

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

分享一款能充分挖掘设计者想象力的jQuery幻灯插件 - Sequence

在线演示  本地下载

今天我们要介绍一款非常特别的jQuery幻灯插件 - Sequence ,之所有称之特别,是因为它并没有特定的主题显示方式,所有的显示都可以由开发者自己控制和实现。任何类型的内容都可以有效地显示在幻灯中。

因为使用CSS3特效,所以,你需要使用现代浏览器来查看特效,但是也可以很好的支持老版本的留言其,同时它支持responsive布局及其触摸类设备,例如,ipad等。

主要特性:

  • 使用CSS3实现的独特过渡效果
  • 支持所有现代浏览器
  • 很优雅的支持老版本浏览器
  • 支持responsive布局
  • 支持触摸设备和swiping
  • 很多开发特性
  • 使用语义并且使用简单的标签
  • 开源

如何使用?

倒入类库:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script…

标签: jquery幻灯插件, sequence.js, HTML/HTML5, CSS/CSS3, Javascript, AJAX, jQuery, jQuery API, jQuery plugin, jQuery UI, jQuery Mobile, jQuery插件, jQuery特效, jQuery教程, jQuery技术网站, jQuery学习网站, jQuery教程, jQuery小测验, UI, 设计, 工具素材, Photoshop, 互联网, 人物, 移动

阅读更多

分享8个帮助你学习快速编程的实用网站

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

作为一个合格的前端开发人员,我们不得不学习很多最新的技术和实现,不论是html5,CSS,CSS3, javascript,还是后台的最新数据库技术nosql。如果你不能有效的学习这些生存技能,意味着你随时被市场抛弃。

为了能够有效而高效的学习各种技术和编程,找到几个非常不错的网站还是很有必要的。,这里我们推荐8个非常不错的技术网站,帮助你有效的快速学习编程,他们带给你的不单单是学习的内容,还有学习的乐趣,enjoy!

Javasript学习: LifeHacker Learn to code

这个网站通过4个课程学习javascript。每一个都配有video并且也提供相关的文章

分享8个帮助你学习快速编程的实用网站

Javasript学习:CodeCademy

一个互动的方式来学习javascript。为了更加有趣,每次你完成一个课程,你可以得到徽章和点数。

分享8个帮助你学习快速编程的实用网站

CSS,CSS3,HTML,HTML5学习:TeamTreeHouse

一个在线付费的学习服务网站,包含了很多最新的技术

分享8个帮助你学习快速编程的实用网站

标签: 学习网站, 学习教程, 编程学习, 编程教程, js教程, html教程, HTML/HTML5, CSS/CSS3, Javascript, AJAX, jQuery, jQuery API, jQuery plugin, jQuery UI, jQuery Mobile, jQuery插件, jQuery特效, jQuery教程, jQuery技术网站, jQuery学习网站, jQuery教程, jQuery小测验, UI, 设计, 工具素材, Photoshop, 互联网, 人物, 移动

阅读更多

使用jQuery插件开发一个完整验证功能的超酷动态留言版系统

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

使用jQuery插件开发一个完整验证功能的超酷动态留言版系统

在线演示  本地下载

今天是情人节,这里我们将创建一个超酷的动态留言板来帮助大家度过这个情人节,可能大家使用过很多的评论或者留言系统,基本都是静态输入的形式,今天我们创建的这个留言板灵感来自于一些超棒的网页设计,在用户输入过程中,会动态的显示输入框,产生类似flash的效果。提高用户的体验。希望大家喜欢!

注:由于使用了Cufon英文字体美化UI界面,所有不支持中文输入,如果你需要输入中文,请将Cufon相关代码移除即可。

jQuery插件

1. jQuery validation engine plugin  -  表单验证插件

2. jQuery placehoder plugin  -  输入提示插件

3. jQuery pretty form plugin  -  美化表单插件

4. Cufon …

标签: HTML/HTML5, CSS/CSS3, Javascript, AJAX, jQuery, jQuery API, jQuery plugin, jQuery UI, jQuery Mobile, jQuery插件, jQuery特效, jQuery教程, jQuery技术网站, jQuery学习网站, jQuery教程, jQuery小测验, UI, 动态留言, 超酷留言, 表单验证, 表单验证插件, cufon, placehoder, 输入提示

阅读更多

分享一个超酷javascript全屏幻灯导航(fullscreen slide navigation)

日期:2012/01/21  来源:GBin1.com

分享一个超酷javascript全屏幻灯导航(fullscreen slide navigation) gbin1.com

在线演示  在线下载

这篇文章介绍了如何使用幻灯方式来进行全屏幕页面导航,包括了16个幻灯,4个一行,一共4行。并且通过了CSS3箭头添加了动画导航效果。而且提供一个迷你的导航条能够帮助用户记录访问过的幻灯页面。希望大家喜欢!

HTML标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Fullscreen Javascript Slide navigation | Script Tutorials</title>
<link href="css/layout.css" type="text/css" rel="stylesheet">

标签: HTML/HTML5, CSS/CSS3, Javascript, AJAX, jQuery, jQuery API, jQuery plugin, jQuery UI, jQuery Mobile, jQuery插件, jQuery特效, jQuery教程, 幻灯导航, 全屏幕幻灯导航, js幻灯导航

阅读更多

使用CSS3实现的超酷幻灯图片效果

日期:2012/01/19  来源:GBin1.com

使用CSS3实现的超酷幻灯图片效果

在线演示  本地下载

这个教程将介绍如何使用纯CSS创建一个干净的幻灯图片面板。主要想法是在面板中使用背景图片,然后在点击标签后使之动画。

HTML标签

HTML主要包括了3个主要部分:radio按钮和标签,容器,及其标题,如下:

<section class="cr-container">    

<!-- radio buttons and labels -->
<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
<label for="select-img-1" class="cr-label-img-1">1</label>

标签: HTML/HTML5, CSS/CSS3, Javascript, AJAX, jQuery, jQuery API, jQuery plugin, jQuery UI, jQuery Mobile, jQuery插件, jQuery特效, CSS幻灯呢个效果, 纯CSS幻灯

阅读更多

分享6个令人印象深刻的幻灯和演讲稿javascript插件

日期:2012/01/15  来源:GBin1.com

使用HTML,CSS和Javascript来做一个演讲不再是一个不可能的任务。使用现代浏览器支持的CSS3开发幻灯变化不再局限于淡入淡出,滑动等。它允许我们完成非常酷的特效例如旋转,3D变形和变换。

以下我们将介绍6个JS插件将帮助大家完成上面的特效。有一些可以帮助你生成你自己的作品集网站。我个人对于impress.js印象特别深刻。你可以用它来创建不同的幻灯而不依赖于桌面的工具。

impress.js

impress.js是一个演讲工具,灵感来自于prezi.com ,基于CSS3的变形和变换。不是一个简单的演讲稿幻灯。实际上第一次看到时,我不禁感叹太酷了,非常不错的脚本。

分享6个令人印象深刻的幻灯和演讲稿javascript插件 gbin1.com

deck.js

deck.js是一个js类库用来创建一个现代的HTML演讲稿。deck.js非常的灵活,允许高级的CSS和JS的人员创建自定义的样式,但是也为HTML新手提供了模板和主题来创建一个标准的幻灯。

分享6个令人印象深刻的幻灯和演讲稿javascript插件 gbin1.com

reveal.js

一个CSS…

标签: HTML/HTML5, CSS/CSS3, Javascript, AJAX, jQuery, jQuery plugin, javascript演讲类库, js presentation, javascript slideshow

阅读更多

分享超酷的jQuery相册插件 - fotorama

日期:2012/01/14  来源:GBin1.com

分享超酷的jQuery相册插件 - fotorama gbin1.com

在线演示  本地下载

今天我们介绍一款jQuery的相册插件- fotorama,它是一款使用创新控制元素的图片库插件。支持桌面和移动设备例如,iphone及其其它的移动设备。使用简单,并且免费使用。

HTML标签

<div id="fotorama">
<img src="images/1.jpg" alt="photo #1" />
<img src="images/2.jpg" alt="photo #2" />
<img src="images/3.jpg" alt="photo…

标签: HTML/HTML5, CSS/CSS3, Javascript, AJAX, jQuery, jQuery API, jQuery plugin, 图片库幻灯, 图片库插件, 相册插件, jquery相册插件, jquery图片库

阅读更多

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

日期:2012/01/11  来源:GBin1.com

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

在线演示  本地下载

今天我们介绍一款使用简单,支持自定义样式并且灵活健壮的jQuery旋转轮播插件:CarouFredSel ,能够帮助你迅速的构建一个轮播式的幻灯展示,使用简单,功能强大,希望大家喜欢!

主要特性:

  • 支持完整自定义和皮肤
  • 支持responsive/fluid/liquid,保证各种客户端的显示
  • 支持可变的显示项目个数
  • 支持键盘和鼠标导航
  • 7个内建的效果: none, scroll, directscroll, fade, crossfade, cover and uncover.
  • 内建自定义的智能事件和加载选项
  • 定义的高和宽中保证显示项目对齐(左/中/右).
  • 支持动态添加和删除显示项目
  • 幻灯创建后也可以支持获取,重置或者设置配置选项

如何使用?

以下是基本使用代码范例,如果大家有兴趣,可以参考CarouFredSel网站上的其它例子

HTML代码:

<div…

标签: HTML/HTML5, CSS/CSS3, Javascript, AJAX, jQuery, jQuery API, jQuery plugin, CarouFredSel, 旋转播放插件, carousel, jquery, plugin, infinite, circular, circulair, carousel, caroufredsel, scroll, fade, crossfade, cover, uncover, imagescroller, contentslider, jcarousel, cycle, 旋转, 轮播, 轮播幻灯

阅读更多

下一页

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

?ü?à

今日推荐