首页

关于

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

阅读更多

极客技术专题【009期】:web技术开发小技巧

极客技术专题【009期】:web技术开发小技巧

技术专题:Seajs介绍 (分享人:choaklin

专题演讲稿:SeaJS的交流分享

授课时间:2013/08/27(周二)  20:00-21:00

课程时间:40min

课程大纲:

前端JS开发结合SEAJS的交流分享介绍

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

如何进入课程

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

标签: jQuery, 分享, GB互动技术分享

阅读更多

17种新型的响应式开发框架

对于所有Web开发人员和设计者而言,在建立网站的时候有很多不同资源供他们使用。其中之一便是框架,框架定义为一个普遍的或受规范准则、概念和实 践来解决典型问题。因此,如果它是在网页设计领域的定义,它实际上捆绑的文件夹带有JSS文件,CSS和HTML,还有结构化文件。它主要用于开发初期网 站使用一个共同的结构,并可以重复使用而不用重新编码。下面将介绍17种最新好用的响应式框架,有助于Web开发人员在涉及网站设计的不同进程时使用。你 不需要数学的专门知识或技术知识,运用框架将节省编程时间,使得网站开发过程更容易更快捷。

One% CSS Grid

正如它的名字本身就代表了它的功能,由于它是一个12柱的流场中CSS网格系统,推荐给需要创建一个更好的响应基础的设计者。

MUELLER Grid System

它允许网站开发人员完全控制基线网络,列宽,媒体查询和分割线宽度,还适应于响应和无响应布局。

Profound Grid

它是一个灵活的框架,在不固定或固定的时候都能实现,因为它是通过SCSS建立的。它使得Web开发人员能够增加媒体布局,创建计算列的负利润率。

34…

标签: jQuery, 分享, 网页设计, Foundation前端框架

阅读更多

极客技术专题【008期】:CSS3核心技术:选择器

极客技术专题【008期】:CSS3核心技术:选择器

技术专题介绍

技术专题:CSS3核心技术:选择器

专题演讲稿:CSS3选择器

分享人:知名前端技术博客 - w3cplus.com 博主 - 大漠 (请站内关注分享人)

资 深Web前端工程师,W3CPlus创始人,目前就职于上海携程 (Ctrip)。2010年开始从事 Drupal 主题制作工作,是 Drupal 社区团队最早成员之一。现久居上海,从事 Web 前端工作,关注移动端、CSS3、Sass等最新技术,目前正在撰写一本关于CSS3的中文书籍

授课时间:2013/08/24(周六)  20:00-21:00

课程类型:公开

专题难度:初级

课程时间:60min

课程介绍:

在这节技术分享课中, 大漠将帮助大家深入了解CSS3选择器的奥秘

  • 授课方式:课程平台 - 请选择当前技术分享日期并且点击进入即可
  • 报名方式:社区用户请在课程日历中点击"课程报名"即可,这样会在你的近期课程日历中添加对应课程的报名提示

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

特别提醒:

如果大家想订阅我们的课程时间列表,请任选我们下方的三种方式,我们会在第一时间将课程公布这里。

标签: 分享, CSS3

阅读更多

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

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

技术专题介绍

专题:jQuery初学者入门[第三讲:jQuery Event]

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

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

课程类型:公开

专题难度:初级

课程时间:60min

课程介绍:

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

  • 授课方式:课程平台 - 请选择当前技术分享日期并且点击进入即可
  • 报名方式:社区用户请在课程日历中点击"课程报名"即可,这样会在你的近期课程日历中添加对应课程的报名提示

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

特别提醒:

如果大家想订阅我们的课程时间列表,请任选我们下方的三种方式,我们会在第一时间将课程公布这里。

1.公众微信号 :极客标签社区

2.极客官方微博:www.weibo.com/gbtags

3.QQ社区群的每日看板

极客标签社区会员群1:73850481(已满)

极客标签社区会员群2:105369095

标签: jQuery, 分享, GB互动技术分享

阅读更多

帮助更语义化的显示时间的jQuery插件 - tidyTime.js

帮助更语义化的显示时间的jQuery插件 - tidyTime.js

网站或者web应用开发过程中,难免会遇到需要展示时间的地方,例如,留言时间或者发布帖子的时候,那么大家是不是相关过使用更加符合语义学的方式来显示时间呢?

08:15  显示成  "八点过一刻了"    

05:45  显示成  "醒醒啦,差一刻就早上六点啦"

14:29  显示成  "快到下午两点半啦"

大家是否觉得上面的时间显示更贴近生活呢? 如果自己处理这样的时间显示会稍微有些麻烦,要是有现成的类库是不是更完美?

今天这里我们介绍的jQuery类库 tidyTime.js 就可以帮助你实现更友好的显示时间的功能,你可以简单的配置和使用即可生成以上的时间显示方式。

帮助更语义化的显示时间的jQuery插件 - tidyTime.js

如何使用

导入类库:

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

标签: jQuery, 分享, jQuery插件, tidyTime.js

阅读更多

轻量级的前端UI开发框架 - UIkit

轻量级的前端UI开发框架 - UIkit

UIkit是YOOtheme团队开发的开源的前端UI界面框架,可以帮助你快速的开发和创建前端UI界面。

基于下列开源项目:

  • LESS
  • jQuery
  • normalize.css
  • FontAwesome

主要特性

  • 支持LESS
  • 模块化
  • 支持自定义主题
  • 支持响应式设计

如何使用?

使用UIkit非常简单,下载后,请参考如下的框架代码:

    <!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="uikit.min.css" />
<script src="jquery.js"></script>
<script src="uikit.min.js"></script>

标签: UI, 分享, 响应式设计, 前端框架

阅读更多

CSS3实现的图片加载动画效果

CSS3实现的图片加载动画效果

在线演示

使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强!

HTML

<ul class="grid effect-4" id="grid">
<li><a href="http://drbl.in/fWMM"><img src="images/1.jpg"></a></li>
<li><a href="http://drbl.in/fWPV"><img src="images/2.jpg"></a></li>
<li><a href="http://drbl.in/fWMT"><img…

标签: 分享, CSS3, CSS, 响应式设计

阅读更多

超酷的实时颜色数据跟踪javascript类库 - Tracking.js

超酷的实时颜色数据跟踪javascript类库 - Tracking.js

今天介绍这款超棒的Javascript类库是 - Tracking.js,它能够独立不依赖第三方类库帮助开发人员动态跟踪摄像头输出相关数据。

这些数据包括了颜色或者是人, 这意味着你可以通过特定的颜色或者人物的移动或者脸部来触发javascript事件。 相信如果接触过Kinect或者Wii的朋友肯定能够使用这个类库开发出类似的体感游戏。

整个类库的API非常简单,拥有一些方法和事件,可以完整的满足你开发相关应用。

如果你想了解更多的话,请观看相关的视频。

    var videoCamera = new tracking.VideoCamera().render().renderVideoCanvas();
videoCamera.track({
type: 'color',
color: 'magenta',
onFound: function(track) {
console.log(track.x, track.y, track.z);

标签: 分享, javascript

阅读更多

使用two.js生成的卫星环绕动画效果

使用two.js生成的卫星环绕动画效果

two.js是一个帮助你实现绘图和动画效果的类库,同时支持三种前端绘图实现:

  • webgl
  • svg
  • 2d画布

使用这个类库,可以方便的支持这三种不同的实现,你只需要设置参数:Two.Types.canvas, Two.Types.svg, or Two.Types.webgl

下面是使用two.js生成的一个动画效果:

http://www.gbtags.com/gb/debug/592abb4d-6449-4654-a824-0232c0c3b110.htm

相关JS代码如下:

    var el = document.getElementById("main"),
two = new Two({
width: '800',
height: '600'
});
two.appendTo(el);

var earthAngle = 0,
moonAngle = 0,
distance = 30,
radius = 50,
padding = 100,
orbit…

标签: 分享, canvas, SVG, webgl

阅读更多

JQuery插件:动态列和无间隙网格布局Mason.js

JQuery插件:动态列和无间隙网格布局Mason.js

在线演示

JavaScript提供很多强有力的方案,解决动态列的网格布局(例如:Pinterest)。这些方案很有效,但是,有时候,会造成网格的间隙或粗糙的边缘。 Mason.js是一个jQuery插件,巧妙地填充了这些间隙。

当创建一个网格时候,插件就开始计算这些间隙,然后就使用预定义的元素或是在网格中复制的内容来填充这些间隙。

可以定义用于元素的大小,列/行的大小,断点的大小,或者布局是流动还是固定的。

网站: http://masonjs.com/

via 极客社区

标签: jQuery, 分享

阅读更多

浏览器开发调试工具的秘密 - Secrets of the Browser Developer Tools

浏览器开发调试工具的秘密 - Secrets of the Browser Developer Tools

如果你是一个前端开发人员的话,正确的了解和使用浏览器开发工具是一个必须的技能。

Secrets of the Browser Developer Tools是一个帮助大家了解开发和debug工具的网站,列出了很多不同浏览器下调试和开发工具的相关技巧和说明。

包含浏览器:

  • Firefox
  • IE
  • Chrome
  • Safari
  • Opera
  • firebug

所有的秘密按下面类别来查看:

  • 一般性问题
  • 控制台
  • Inspecting
  • 编辑
  • debugging
  • 性能
  • 移动

你可以选择不同的浏览器或者工具来过滤查看浏览器开发工具的一些技巧和使用。相信作为前端开发的你,一定需要把它添加到你的开发书签中。

网站地址:http://devtoolsecrets.com/

via 极客标签

标签: 分享, web在线工具

阅读更多

超棒的JS移动设备滑动内容幻灯实现 - Swiper

超棒的JS移动设备滑动内容幻灯实现 - Swiper

在线演示

如果你需要一款帮助你实现手机或者移动设备上内容幻灯实现的JS类库的话 , Swiper是一个不错的选择,它不依赖于任何第三方的类库。因此体积非常小,适合运行在移动设备上。拥有非常完整的自定义选项,并且支持很多不同的幻灯展示,在线演示非常全!

主要特性

  • JS实现,不依赖于任何第三方的类库
  • 支持触摸设备上的滑动(swipe)操作
  • 支持水平和垂直的幻灯展示
  • 支持多个元素的幻灯展示(类似carousel)
  • 支持多种不同的自定义选项
  • 支持无限滚动,拥有插入,添加新幻灯页面的API
  • 支持Callback方法
  • 支持桌面浏览器,支持使用鼠标来拖拽

网站地址:http://www.idangero.us/sliders/swiper/

via 极客标签

标签: 分享, javascript, 幻灯特效, 移动幻灯特效

阅读更多

实现单页面导航效果的jQuery插件 - SMINT

实现单页面导航效果的jQuery插件 - SMINT

在线演示

实现单页面导航效果的插件很多,今天这里我们介绍一款比较酷的jQuery插件,可以快速的帮助你实现滚动效果的导航,而且UI设计比较漂亮,适合需要快速实现页面导航的朋友。

主要特性

  • 自动生成贴边式的导航菜单(sticky navigation)
  • 无需自己定义CSS来自定义样式,几乎是ready-to-use
  • 代码简单并且轻量级

如何使用

JS代码如下:

$(document).ready( function() {   $('.subMenu').smint(); });

实现单页面导航效果的jQuery插件 - SMINT

网站地址:http://www.outyear.co.uk/smint/#

via 极客标签

标签: jQuery, 分享, jQuery插件, 导航菜单

阅读更多

帮助自动生成页面任何元素的Label的CSS类库 - Label.css

帮助自动生成页面任何元素的Label的CSS类库 - Label.css

在线演示

如果你需要针对页面任何元素生成说明性文字的话,Label.css是个不错的选择,它是用纯CSS的代码帮助你添加页面元素的说明性文字或者打一个标识。

支持选项包括,显示文字的位置,包括上,下,左,右,中。 并且支持2种显示的动画效果: 淡入淡出和浮动。如果大家需要快速添加类似的效果,这个css是个不错的选择!

请点击在线演示查看效果,这里我们将说明文字放置在中部,试用浮动效果。

代码如下:

<figure class="label inside float middle" data-label="超棒的明星脸芭比娃娃">   <img id="pic" alt="gbtags.com" src="images/gbtags.jpg"> </figure>

网站地址:http://usablica.github.io/label.css

via…

标签: 分享, CSS3, CSS

阅读更多

下一页

标签

© Copywrite by gbin1.com, all rights reserved.