首页

关于

前端代码回放:jQuery实现的dribbble最受欢迎作品集瀑布流效果

前端代码回放:jQuery实现的dribbble最受欢迎作品集瀑布流效果

使用jQuery,isotope,jdribbble实现的一个瀑布流效果,文字教程请参考: 响应式的dribbble作品集魔术布局展示效果

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

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

阅读更多

创建一个jQuery UI的垂直进度条效果

创建一个jQuery UI的垂直进度条效果

在线演示

缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题。

这里我们扩展缺省的option,添加一个orientation的参数,实现一个垂直滚动调效果,代码如下:

    /*
* jQuery UI Progressbar 1.8.2
*
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* http://docs.jquery.com/UI/Progressbar
*
* Depends:
* jquery.ui.core.js
* jquery.ui.widget.js
*/
(function( $ ) {

$.widget( "ui.progressbar", {
options: {
value: 0,
orientation : "horizontal"
},
_create: function() {
this.element
.addClass(…

阅读更多

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

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

在线演示    在线下载

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

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

Demo与源代码 下载 

入手

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

<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type"…

阅读更多

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

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

在线演示 在线下载

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

在线演示--下载源代码

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

创建页面

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

<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

阅读更多

使用jQuery创建模态窗口登陆效果

使用jQuery创建模态窗口登陆效果

在线演示 在线下载

隐藏模态窗口技术是一种很好的解决方案,用于处理不是特有必要出现在网页上的界面元素。社交网络可以使用模态窗口传达私人讯息以及只针对会员才能看 到的表单。在博客和杂志网站也适用于与主网站分开的作者登陆页面,模态窗口比在JavaScript中创建新窗口更容易,因为使用HTML标记显示,所有 的东西能都呈现在同一个窗口中。

我将演示如何利用jQuery插件leanModal建立一个常规模态窗口。如果你有MIT general license,那么这个插件是完全开源和免费的,我很喜欢这个插件,用起来相当方便,还能自行添加CSS,达到自定义的效果。

在线演示--下载源代码

使用jQuery创建模态窗口登陆效果

开始

首先创建两个命名为"index.html"和"style.css"的文件,在同一个目录中,创建另一个文件夹命名为/js/,包含进刚才两个文件。第一个是微型jQuery库,第二个是leanModal插件,命名为jquery.leanModal.min.js。

<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type"…

阅读更多

目录

© Copywrite by gbin1.com, all rights reserved.