首页

关于

使用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, 页面设计, 扁平效果

阅读更多

推荐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

阅读更多

【基础篇】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, 设计, 趣味设计, 网页设计

阅读更多

动画迷你小教程:如何使用CSS生成一个三角形?

传统的网站或者web应用中,如果我们需要创建一个提示的话,通常使用图片来生成小三角,今天这里我们分享一个动画小教程,帮助你快速学习如何使用纯CSS来生成一个三角形。

提示:请使用Firefox或者Chrome查看下面在线调试演示

阅读更多

创建一个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",…

标签: 分享, jQuery-UI

阅读更多

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

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

在线演示    在线下载

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

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

Demo与源代码 下载 

入手

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

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

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

阅读更多

Backbone.js系列教程二:Backbone.js深入解析之基础要求

Backbone.js系列教程二:Backbone.js深入解析之基础要求

在网上关于Backbone的描述很少,现有的关于Backbone的内容五花八门,基本上都不同程度的提到了如何运用Backbone来实现应用程序的创建,当然也有很多的是讨论它是否匹配 Model/View/Whatever。有挺多华而不实的视频教程是讲程序设计的,但其实没有什么太大的价值。我认为关键是缺少了关于Backbone本身的详细介绍,以及对于每行代码的真正用意的细节描述。有篇文档专门讲述 Backbone各部分的功能,在一定程度上解答了上述问题,并且提供带有注释的源代码,还有更多相关Backbone.js的内容介绍。这些虽然远远不够,但最起码,能换个角度带大家了解Backbone的组成部分与功能。

在这套Backbone.js解构系列教程中,我们将从代码层面验证Backbone库的功能。

相关阅读: Backbone.js系列一 - Backbone.js初探

具体而言,在这套教程的前一部分中我们将探讨学习Backbone的基础,介绍单页面应用程序(SPAs)所需一些关键的细节,以便能更好的掌握Backbone的组成与用途。在对SPAs有一定基础之后,我们将系统深入到Backbone代码部分各个细节,包括Backbone.Events、创建Backbone对象、Backbone.Router()Backbone.History()Backbone…

标签: backbones.js, html, javascript, 前端框架

阅读更多

Backbone.js系列一 - Backbone.js初探

kbone.js系列一 - Backbone.js初探

JavaScript在web应用程序开发前端技术和后端技术的逻辑与运行一块占有越来越大的比重.为了帮助维护和循环访问前期逻辑和模块性,MVC模式在近几年中渐渐普及。其中一种运用广泛的MVC框架就是Backbone.js。

Backbone中的Models(模型)、Views(视图)和Collection(集合)

Backbone.js包含以下几个主要功能:

  1. 创建模型(以及模型集合);
  2. 创建视图;
  3. 管理绑定,管理事件兼用不同的模型以及视图与框架其他部分的联系;
  4. 在模型中使用观察者模式,一旦模型触发任何change事件,所有显示此模型数据的视图接受到该change事件通知,从而自动进行事件重新渲染;
  5. 给DOM处理所依赖的jQuery或Zepto提供支持。

第一部分:模型(Models)

创建模型,首先我们创建一个包含数据的Person对象。

Person = Backbone.Model.extend({
// Person实例的构造函数

标签: backbones.js, html, javascript

阅读更多

Javascript视差特效引擎 - Parallax.js

Javascript视差特效引擎 - Parallax.js

在线演示

Parallax.js是一个使用方便的视差效果引擎,可以帮助你实现非常棒的视差效果,并且对移动设备的横竖屏可以自动适应。并且支持自定义的行为,包括使用data属性或者Javascript的API。

网站地址:http://wagerfield.github.io/parallax/

标签: javascript, 视差特效

阅读更多

推荐十款来自极客标签的超棒前端特效[第十四期]

本周我们推荐来自极客标签社区带来的10款超棒前端特效,大家可以在这里免费下载你需要的内容。如果你也有更好的作品,欢迎分享到社区中来,在得到帮助的同时,也能与更多人分享来自你的作品。

运用jQuery and CSS过渡达到垂直展示效果

运用jQuery and CSS过渡达到垂直展示效果

运用jQuery,CSS转换和多媒体元素,创建一个具有响应性往相反方向移动的适应屏幕布局的垂直滑块。

3D缩略图悬停效果

3D缩略图悬停效果

有关如何运用CSS 3D变换和jQuery创建3D缩略图悬停效果。

运用CSS3过渡效果模糊菜单键

运用CSS3过渡效果模糊菜单键

如何运用文字阴影和过渡,以实现模糊菜单的效果,这将应用到菜单上的悬停元素。

带有渐变光泽的按钮

带有渐变光泽的按钮

带有渐变光泽的按钮。

使用CSS变形实现的3D动态书本效果

使用CSS变形实现的3D动态书本效果

主要代码:Hover on效果如下,请大家点击查看。

超棒的免费iOS 7线框图套件

超棒的免费iOS 7线框图套件

来自Blake Perdue的一个非常实用的Adobe Illustrator线框图套件。

免费资源: 200个矢量图标

免费资源: 200个矢量图标

一套超完整的矢量图标免费下载,包含了从科学到娱乐相关的全部图标,相信大家会喜欢滴。

轻量级的前端UI开发框架…

标签: 网页素材, web元素, element, 素材包, 网页元素

阅读更多

用Sass创建MetaFizzy效果

用Sass创建MetaFizzy效果

Hugo发现了一个绚丽的css效果应用于web中并教会你如何聪明的重建和使用它。两天前,我看见笔者Hugo在css帮助下重写MetaFizzy的效果,Hugo帮助我们找到了一个用于理解Sass的JavaScript源代码。但我认为他的代码仍有可改之处,它比原版本的css多出了许多重复代码,我们找到了一种方法使其更加效率。重点:这是一个实验,如果你想要实验,请使用JavaScriptcss版本需要500个线程,占用很多的CPU。所以这是一个Sass实验,只是为了好玩。

你从哪儿开始

对于这个问题如果一开始没有Hugo的Demo我还不知道从哪儿开始。以下是我们需要做的。给我们的文本一个长长的影子,渐变到黑色。岁颜色的阴影随着时间的变化盘旋,快速的彩虹动画,最后我们需要做以下几点,一个动画光影,一个动画鼠标悬停,一个列表的颜色鼠标悬停差不多就是这样。

平滑阴影

用Sass创建MetaFizzy效果

数据帧

我们会做简单的光影效果,我们做的是让文本阴影颜色逐渐变黑。然后我们需要一个动画,随着时间改变颜色,这个效果需要hsl().因为我们希望Sass代码成为可能。我们将使用一个叫做mixin的关键帧在处理这些文本阴影。首先,纲要。

@mixin…

标签: sass, css, javascript, metafizzy, 效果

阅读更多

上一页 | 下一页

目录

© Copywrite by gbin1.com, all rights reserved.