首页

关于

分享一个帮助你自定义标签并且兼容现代浏览器的javascript类库 : X-tag

分享一个帮助你自定义标签并且兼容现代浏览器的javascript类库 : X-tag

今天我们介绍一个能够帮助你自定义标签的js类库:x-tag,使用这个类库可以快速帮助你创建兼容不同浏览器的HTML标签。这个js类库基于W3C Web Components draft,由Mozilla编译和支持。

为什么使用x-tag

如果你需要一个高级的HTML元素,例如,编辑器,标签页,树状图的话,你可能需要如下过程:

  1. 寻找适合的插件
  2. 添加插件到网页
  3. 拷贝元素,或者一块元素到你的页面标签
  4. 创建script脚本,包含需要的代码
  5. 书写js代码
  6. 初始化script
  7. 重复以上过程

但是如果使用x-tag,你需要做的就是:

  1. 定义自己的HTML标签
  2. 作为本地标签使用 
  3. 没有第三步就搞定了

如何使用?

X-tag使用特定的CSS事件机制来监听创建/解析自定义的元素。事件将会被X-tag处理和触发,不管是否在document中。当最初创建的时候,X-tag调用create()方法来创建。也提供了onInsert方法帮助你在每次插入的时候调用,具体可以看一个例子:

xtag.register('accordion',…

标签: 自定义标签js, js类库, x-tag

阅读更多

分享一个独立灵活的Javascript通知类库 - Smoke.js

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

smoke.js

在线演示

今天我们分享一个灵活的超小js类库- Smoke.js ,这个类库可以有效的帮助你生成提示或者通知类型的界面元素,我们可以将它替换缺省的alert提示框或者是信息框。当然它也提供了很多人性化的特性和功能。

主要特性

  • 轻量级,使用简单并且灵活

  • 支持CSS3动画

  • 支持CSS的个性化设定,内建了几种不同的主题:

    • light style (缺省主题) 

    • dark style 

    • 100s style (最漂亮的主题) 

    • tiger style

如何使用?

使用这个类库非常简单,你只需要引入smoke类库,然后直接调用smoke方法:

smoke.signal('welcome to gbin1.com:  goes away for 5 seconds');       
smoke.alert('this is a normal alert');…

标签: javascript, js类库, CSS3, notification, alert, 通知, 消息

阅读更多

帮助你自动生成浏览器特有CSS3属性的Javascript类库 - CSSFx

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

cssFx是一个独立的帮助你插入浏览器指定CSS3属性的javascript类库,它可以帮助生成老版本浏览器或者现代浏览器支持的特有CSS属性。使用这个类库将会帮助你节约大量的时间来处理浏览器特有的CSS问题。你肯定会喜欢!

cssFx

主要特性:

支持属性

  • box shadows

  • border radius

  • multiple columns

  • border image

  • RGBA

  • transforms

  • keyframes

  • transitions (and properties inside transitions)

  • flexible box

  • gradients

  • Other(like opacity, ellipsis, and inline-block).

支持浏览器

  • Firefox 3+

  • Chrome 1+

  • Internet Explorer 6+ 

  • Safari 3+

  • Opera 9+

如何使用?…

标签: javascript, js类库, CSS3, cssFx

阅读更多

帮助你有效处理日期相关功能的Javascript类库 - XDate

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

XDate 是一个超小超新的用来解析,格式化及其处理日期的类库。

xdate

这个类库不基于任何第三方的类库,gziped版本只有2.9kb大小,支持很多实用的方法:

  • 得到日期数值

  • 加减日期

  • 计算日期间隔

  • 帮助你格式化各种输出

  • 广泛的UTC数值支持方法 

来源: 帮助你有效处理日期相关功能的Javascript类库 - XDate

标签: javascript, js类库, 日期处理, xdate

阅读更多

分享一个帮助网站动态显示favicon的js类库 - Tinycon

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

分享一个帮助网站动态显示favicon的js类库 - Tinycon

在线演示1   在线演示2  本地下载

如果你的网站使用favicon的话,这个小js类库 - Tinycon 可以帮助你轻松打造更动态的显示方式,绝对让你的网站在用户打开的所有页面标签中更加显著。

这个类库基于HTML5的画布组件,当然对于不支持HTML5的浏览器也提供了解决方案,将会显示在标题栏中。非常适合用来显示一些数字相关的提示,例如,未读邮件,新的消息或者其它相关的提示。

主要特性

支持主流浏览器:

  • Chrome 15+
  • Firefox 9+
  • Opera 11+ 

Fallback机制

  • 不支持的浏览器将使用标题栏来显示,例如,IE,或者低版本非IE浏览器

如何使用

由于这个类库不支持非数字的显示,所以这里提供一个修改版本,支持显示非数字。

引入类库:

<script src="js/tinycon_gbin1.js"></script>

代码如下:

(function(){

标签: javascript, js类库, tinycon, favicon

阅读更多

分享一个用来添加快捷键组合的javascript类库 - keyboard.js

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

分享一个用来添加快捷键组合的javascript类库 - keyboard.js

在线演示  本地下载

今天分享一款帮助大家在网站或者web应用中添加快捷键组合的类库 - keyboard.js,使用这个类库你可以很方便的捕捉输入键的组合,可以帮助你很好的添加相关快捷键的操作,希望大家喜欢!

主要特性:

  • 独立类库,当然也可以和其它类库组合使用,例如,jQuery
  • 字母或者字母组合绑定
  • 支持Callback回调
  • 多语言支持
  • 支持AMD加载,例如 RequireJS
  • 文档完整

Javascript:

$(document).ready(function(){ 
var gbin1 = ['g', 'b', 'i', 'n', '1'],
google = ['g', 'o', 'o', 'g', 'l', 'e'],
baidu = ['b', 'a', 'i', 'd', 'u'],
kI = 0;
document.addEventListener('keydown', function(){

标签: gbin1, ajax, browser, cms, css-html, design, flash, freebies, gadget, graphic, icon, inspiration, javascript, logo, misc, mobile, mysql, os, photography, photoshop, php, seo, template, tips, tools, trend, tutorial, typography, usability, video, wallpaper, wordpress, javascript类库, js类库, keyboard.js

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.