首页风格
门户
博客

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

jQuery导航菜单置顶插件 - stickyUp

jQuery导航菜单置顶插件 - stickyUp

在线演示

stickyUp是一款可以帮助你生成置顶效果的jQuery插件,如果你希望生成一个固定页面顶端的导航效果,可以使用stickUp来快速生成。

主要代码如下:

jQuery(function($) {
    $(document).ready( function() {
    $('.navbar-wrapper').stickUp({
      parts: {
        0:'home',
        1:'features',
        2: 'updates',
        3: 'installation',
        4: 'one-pager',
        5: 'extras',
        6: 'wordpress',
        7: 'contact'
      },
      itemClass: 'menuItem',
      itemHover: 'active',
      topMargin: 'auto'
    });
    });
});

Github:https://github.com/LiranCohen/stickUp

标签: #文章, jQuery插件, 导航菜单

阅读更多

快速提升CSS编码能力的五个必备知识点

快速提升CSS编码能力的五个必备知识点

作为web开发人员,无论你是前端开发或者是后端开发,也无论你是新手还是大神,对于CSS的知识了解都是需要,在这篇文章中,我们将从五个不同的角度帮助大家快速的提升自己的CSS水平,如果你能够在以下五点有所突破的话,CSS的编码能力肯定会有一定的提升。

1. 了解CSS中的定位(position)

快速提升CSS编码能力的五个必备知识点

如果你需要深度的了解CSS如何移动HTML元素,或者控制元素的位置和显示的话,定位是一个不可获取的基本知识,而且除了了解简单和具有普遍性的定位外,你需要了解他们具体的不同。

其实这里包含了5个基本的定位方式,如果你不能直接说出名字来的话,那么你需要好好的了解一下这方便的知识了,包含:

  • static
  • relative
  • absolute
  • inherit
  • fixed

以上五种定位你都需要了解,但是实际最常用的是relative和absolue。

2. 熟练的掌握float

快速提升CSS编码能力的五个必备知识点

当你初次学习CSS的时候,float肯定是最让你头疼的地方,但是一旦你了解了基本的知识,你就慢慢会了解如何处理clear…

标签: css, css3, 编码, php

阅读更多

web开发中需要注意的一些编码习惯

web开发中需要注意的一些编码习惯

有过一定工作经验的朋友们,肯定对于项目开发中的coding标准非常熟悉,不同的团队或者项目,都有不太一样的编码习惯和指导文档。但是对于不同 的编码习惯,大家肯定都希望使用大体上统一的风格,简单来说会使得开发效率更高,阅读速度更快,在这篇文章中,我们将分享一些个人觉得比较有效的编码习惯 和最佳实践,如果你觉得有更多其它的经验,请和我们分享。

以下内容主要使用PHP做为例子,如果使用其它编程语言,编码基本类似,大家可以自己在项目中具体应用。

缩进问题 - Tab或者空格

最简单的问题,大家对于缩进使用的是tab或者space呢?

这个问题没有太多的必要去讨论,因为没有谁拥有完全正确的答案,但是最重要的一点,就是不要混用空格和tab,如果大家使用一些JS的校验工具,比如,jshint的话,你最常看到的问题就是

Mixed Tab and Space

个人推荐使用tab,因为不同的编辑器对于tab的解析也不太一样,如果你需要使用tab的话,可以考虑使用4个空格来代替。

类名称定义

为了在定义中避免重复,尽量使得定义包含一些前缀,并且使首字母大写,这样易于阅读,如下:

class…

标签: web开发, 编码设计, php, js, javascript

阅读更多

绝对应当收藏的10个实用HTML5代码片段

绝对应当收藏的10个实用HTML5代码片段

HTML5是WEB技术发展的重要的里程碑,对于前端开发来说,如果能够找到一些未来大家开发中可能需要经常重复使用的代码的话,相信大家一定不会拒绝,下面是我们精心收集的10多个HTML5代码片段,相信大家一定喜欢!

HTML5的最简单模板

如果你需要开始一个新的HTML5项目的话,大家肯定会需要一个最简单的模板,这里是一个非常简单并且清晰的HTML5模板,相信大家会喜欢!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

标签: html, html5, 代码片段

阅读更多

10款超实用的jQuery即时通知插件

10款超实用的jQuery即时通知插件

如果大家使用Gmail邮件的话,肯定对于它位于顶端的即时通知非 常熟悉,你的所有操作或者操作中出现的错误都会在这里及时的显示并且提醒用户, 和传统的alert风格的提示不一样的地方在于,它不打断当前的用户使用,能够带给用户更好的用户体验,而传统的alert方式,必须让用户点击一下确认 才可以继续操作。

在今天这篇文章中,我们将介绍10款帮助你快速开发即时通知功能的JQuery插件,希望大家喜欢!

相关阅读:

10款精挑细选的jquery插件

推荐9款提高表单用户使用体验的超棒jQuery插件

Noty

Noty是一款使用非常简单的即时通知插件,你可以使用非常简单的代码生成提示效果,并且支持主题设置,自带有几款主题,所有的CSS都被写入了 Javascript中,修改也很方便,支持大量选项,可以方便的生成提示,警告,报错样式,提示的页面位置也可以方便的设置,推荐使用!

在gbtags.com的社区中,使用的也是这款插件

标签: jQuery, jQuery插件, 极客标签

阅读更多

使用CSS开发一个扁平风格的面包屑样式当前位置

使用CSS开发一个扁平风格的面包屑样式当前位置

使用的技巧和前面的动画生成三角形类似,如下:

使用CSS开发一个扁平风格的面包屑样式当前位置

#crumbs ul li a {
  display: block;
  float: left;
  height: 50px;
  background: #3498db;
  text-align: center;
  padding: 30px 40px 0 40px;
  position: relative;
  margin: 0 10px 0 0;     font-size: 20px;
  text-decoration: none;
  color: #fff;
}

使用CSS开发一个扁平风格的面包屑样式当前位置

#crumbs ul li a:after {
  content: "";  
  border-top: 40px solid red;
  border-bottom: 40px solid red;
  border-left: 40px solid blue;
  position: absolute; right: -40px; top: 0;
}

使用CSS开发一个扁平风格的面包屑样式当前位置

border-top: 40px solid transparent;
border-bottom:…

标签: css, css3, 页面设计, 扁平效果

阅读更多

CanvasLoader Creator - 免费的在线工具,生成加载动画

CanvasLoader Creator - 免费的在线工具,生成加载动画

CanvasLoader是一款免费的在线工具,可以帮助你生成加载动画的脚本,它生成的是自旋转的圆圈加载动画,脚本可以用在你的HTML5项目 中。它可以进行一定的客制化,来生成你想要的加载动画,其中包括圆圈的半径,旋转速度,密度,颜色等属性。 你可以下载代码片段,也可以直接下载生成的html文件,应用在你的程序中。

CanvasLoader Creator的操作

它的操作非常简单,只需要在链接中,调整你需要的参数,就可以生成你想要的加载动画样式了。

可设置的属性包括:

  • Diameter: 半径,既圆圈的半径。
  • Density: 密度,既旋转中的竖纹图案的密度。这个属性在你放大了半径之后,可以看得非常清楚。
  • Range: 范围,既旋转时,有颜色的范围占据了整个圆圈的多少比例。
  • FPS: 每秒帧数。
  • Speed: 速度,旋转的速度。
  • Color: 圆圈的颜色。
  • Shapes: 旋转的形状。
  • Background color: 背景颜色。

在设定了属性之后,它会实时生成代码片段,你可以下载整个的html文件,也可以从页面上拷贝代码片段放在你的程序中使用。

CanvasLoader核心代码

如果你打开代码,你可以看到它使用的是加载了一个名为Heartcode…

标签: javascript, html5, canvas, 进度条效果

阅读更多

推荐9款提高表单用户使用体验的超棒jQuery插件

推荐9款提高表单用户使用体验的超棒jQuery插件

作为前端攻城狮的我们,经常需要处理的就是相关表单的一些应用,包括了:

  • 表单美化
  • 表单验证
  • 表单的自动保存
  • 表单功能的增强
  • 等等

如果开发过程中我们没有使用任何的CSS前端框架(例如,Bootstrapfoundation或者pure)的话,我们可能需要自己动手去添加相关的功能,在今天的这篇文章中,我将介绍几款非常实用的JQuery表单插件,帮助你更快更好的完善表单的用户体验,希望大家喜欢!如果你也有相关的表单优化或者用户体验优化的经验,请和我们分享,谢谢!

iCheck

iCheck是一款针对单选框和多选框美化的jQuery插件,你可以使用很简单的代码来完成checkbox和radio的美化,最重要的是它支 持不同皮肤和风格的UI,包括不同颜色的,相对来说,它提供的功能在jQuery插件中来说是非常丰富的,当然,可能有人说了,如果能够针对每一个表单元 素都能提供一个美化解决方案就更好了

jQuery Switchbutton

标签: #文章, jQuery插件

阅读更多

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

阅读更多

创建平滑的HTML5动画

创建平滑的HTML5动画

现代浏览器都内置了专用动画技术,Martin Görner为您展现四种最棒的实例。

创建平滑的HTML5动画

现代移动 操作系统将用户接口动画化,并已达到了电脑端交互的标准--精选流畅的动画,体现出沉浸效果以及支持直观的交互。我们都想当然的认为,可以设置一个列表, 使之带有运动特性,用手指轻轻一推,它就如同有重量和惯性一样运动起来,直到遇到边缘再反弹回来一点。但是,在网络上,我们还达不到这样的效果。

接 受事实吧,现有网上的动画经常被视作UI灾难,还在使用二十年前陈旧的<blink>标签技术。加入Flash有点帮助,不过它缺乏HTML DOM集成,都变成了不美观的800×600分辨率,并且JavaScript DOM操作还有其标志性的5帧/秒(fps)动画率--真是绝望啊!

改变

2013年,现代浏览器内置了专用动画技术,达到60 fps。是时候去忘掉过去,开始构建美妙的UI动画体验了。我将展示四个动画技术,帮助你决定,哪一个更适合你的项目。

CSS3动画--3D

让我们从最简单的声明式技术开始:CSS3。这里不需要JavaScript,存CSS,加上一点现代手段。

CSS通过两种基本属性来声明动画:过渡和动画。过渡属性通知浏览器计算两种状态(由各自CSS定义)间的中间帧。动画通过改变元素CSS触发。比如,当你以编程方式改变它的层,或启动一个:hover…

标签: html, html5, 动画效果, css3动画, css

阅读更多

【基础篇】JavaScript单元基础测试

【基础篇】JavaScript单元基础测试

无论用JavaScript,还是其他语言编写代码的过程中,都需要关注有效性。当你完成一段代码,肯定期待它能如预期般工作。想象一下,你已编写了几千行代码,它们是否能达到预期的效果?这就不一定了。

通过单元测试,确保编写代码的正确性是非常重要的。

那么,到底什么是单元测试呢?

维基百科中有关单元测试的定义如下:

  • 在 计算机编程中,单元测试(又称为模块测试)是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化 编程中,一个单元就是单个程序、函数、过程等;对于面向对象编程,最小单元就是方法,包括基类、抽象类、或子类中的方法。 

单看概念可能无助于大家理解实时性问题,那么我将上述文字缩减为简单的一句话:

  • 单元测试是一种你可以依赖用于检验一段代码是否有效的方法。

现在,我想你能了解单元测试是用来干什么的了吧。

我们需要测试什么?

JavaScript中,我们需要验证代码有效性,常需要检测的内容包括:

  • 函数返回值
  • DOM元素属性
  • 由闭包操纵的变量值

其实,JavaScript的任意一块内容都能被测试,方法也非常简单。

如何使用单元测试?

有关测试的方法有多种,甚至有诸如JasmineQUnit此类框架可以直接利用。不过本文不会介绍这些框架的使用,而是教大家编写一段简单的断言函数:

/**

标签: javascript, javascript测试, javascript测试基础, 基础

阅读更多

如何检测移动设备方向的变化

如何检测移动设备方向的变化

除非你的应用程序限定了只在移动设备直立状态或水平状态下使用,一般情况下,你需要调整一些设定。即便你设计的布局流畅时尚,你可能需要改变某些编程代码。通常有以下一些小的策略用于检测移动设备方向的改变。

orientationchange事件

你等待一个移动API,一个简单的窗口orientationchange事件:

// 监听方向的改变
window.addEventListener("orientationchange", function() {
  // 宣布新方向的数值
  alert(window.orientation);
}, false);

发生改变的时候, window.orientation属性就改变。值为0表示直立, 90表示设备水平旋转到左边, -90表示设备水平旋转到右边。

调整大小事件

有些设备不支持orientationchange事件,但可以触发resize事件:

// 监听调整大小的改变
window.addEventListener("resize",…

标签: 移动设备, css3, javascript, web最佳实践, 检测移动设备方向的变化

阅读更多

CSS中有关圆圈的趣味设计

CSS中有关圆圈的趣味设计

曾被设计师抛弃的圆圈元素,现在又卷土重来了。圆形并不会像其他矩形那样堆叠,所以可以营造出不一样的整体感觉。圆圈的形状是完美的,无论从哪个角度看它都一样。圆圈是完整的,与自然相和谐的--想想有多少自然元素都是以圆形为基调的。让我们来看看用圆圈能做些什么吧!

基础的圆形

圆圈对于我们来说是既熟悉又安全的图形。圆圈里面的物质被保护起来,圆圈外围的物质无法影响到圈内。这种形状非常有趣,很有特点。将圆形应用到设计中去是经 过深思熟虑的。但是处理圆形也是具有挑战的,因为这种奇怪的形状可能与其他设计元素无法融合。以圆圈为主题的设计方案必须经过详细计划、设计和执行。

在现代设计作品里,除了传统意义上的圆圈之外,我们通常还能见到更多的圆状元素。椭圆形、拥有显著弧形边缘的类似矩形等等,这类元素都带有各自的设计风格。今天我们专注于标准的圆形图案,讨论近期火热的设计作品。

圆圈体现的内容

CSS中有关圆圈的趣味设计

圆圈可以带有很多关联性。它们是流体的,与运行和移动联系在一起(想想车轮)。由于圆形是大自然中一种基础图案--月亮,花朵,水果--所以圆形代表的图案能够表达真实与生活。此外,圆形的弧度还可以与能源,力量,和谐,无限联系起来。

作为设计师,我们经常见到带有颜色的轮子形状,它是最易于辨认的圆圈。这种运用很成功,因为结合了上述特征,创造了一个传递信息的对象,这是一种简单,有力,和谐的方式。圆形是完整的,用于突出强调。

网页设计中的圆圈

CSS中有关圆圈的趣味设计

圆圈,曾经很少用于网页设计中,如今却成为一种主流。很多年前,在CSS中很难创建圆形图案,但现在情况不同了。那么一个很棒的带有圆圈的网站设计包括哪些特点呢?通常有以下五种展示形式:

作为占主导地位的形状或框架

比起矩形图案,一些设计师更愿意使用圆圈。圆圈可能被用于标志或按钮。圆圈能够增加趣味性,把图案"困"在圈内。图案是否适合圆形呢(相机拍的照片就不是圆…

标签: css, design, 设计, 趣味设计, 网页设计

阅读更多

上一页 | 下一页

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

?ü?à

今日推荐