SockJS 是一个浏览器上运行的 JavaScript 库，如果浏览器不支持 WebSocket，该库可以模拟对 WebSocket 的支持，实现浏览器和 Web 服务器之间低延迟、全双工、跨域的通讯通道。 SockJS family: SockJS-client JavaScript client library SockJS-node Node.js server SockJS-erlang Erlang server SockJS-tornado Python/Tornado server SockJS-twisted Python/Twisted server vert.x Java/vert.x server Work in progress: SockJS-ruby SockJS-netty SockJS-gevent (SockJS-gevent fork) pyramid-SockJS wildcloud-websockets SockJS-cyclone wai-SockJS SockJS-perl SockJS-go 转自:http://www.oschina.net/p/sockjs
View Details当你开发网站和 Web 应用时，使用合适的工具可以节省大量的时间。本文我将收集一些非常有用的 CSS 编码工具，希望对你有帮助。 Pure CSS Pure 是来自雅虎的 CSS 框架，使用 Normalize.CSS 无需任何 JavaScript 代码。框架基于响应式设计，提供多种样式的组件，包括表格、表单、按钮、表、导航等。标识使用非常简单，整个框架非常轻量级，压缩后只有 5.7k。 主页: http://purecss.io/ CSS only responsive navigation 在今天响应式排版已经非常流行了，这里包含一些可下载和可重用的响应式导航菜单，只需要 CSS 足以。 主页: http://valdelama.com/css-responsive-navigation CSS Trashman 当我们在开发一个大项目时，很难让 CSS 代码保持短小精干，但无需担心，CSS Trashman 可以帮你不少忙。这是一个很有用的在线工具用来检测你的网站，压缩样式，并最终下载最精简的 CSS 文件。 主页: http://www.csstrashman.com/ Glue 加载大量的图片，还是将这些图片变成一张大图片一次性加载，当然是后者更好，降低浏览器和服务器的交互。这样的技术成为 CSS Sprites。Glue 是一个简单的命令行工具可以让你轻松的将图片合并到一张大突破，然后通过 CSS 来使用这些图片。 主页: https://github.com/jorgebastida/glue Helium CSS Helium 是一个前端响应式 Web 框架，用于使用 HTML5 + CSS3 快速制作原型以及开发产品。Helium 很像 Twitter Bootstrap 和 ZURB Foundation，事实上 Helium 使用了二者不少的代码。但与这两个框架不同的是，Helium 设计更加轻量级，而且更容易修改。Helium 只有30k 左右，而 Bootstrap 有 100k 之多，ZURB 有两百多k。 主页: https://github.com/geuis/helium-css Topcoat Topcoat 是一个 CSS 框架用于快速创建简单、简洁的 Web 应用。 主页: http://topcoat.io/ .Fitgrd .Fitgrd 是一个用来构建响应式网站的基础 主页: […]
View DetailsAll Around – jQuery Content Slider / Carousel All in one Slider jQuery Banner Rotator / Content Slider Full Width Slider 2 Layer Slider (Must see parallax effects) Lush – Content Slider Parallax Slider – Responsive jQuery Plugin RoyalSlider – Touch-Enabled jQuery Image Gallery Showbiz Pro Responsive Teaser jQuery Slider Plugin Bubble Slideshow Effect with jQuery CIRCULAR CONTENT CAROUSEL WITH JQUERY FlexSlider Lateral On-Scroll Sliding with jQuery Responsive Image Gallery with Thumbnail Carousel Agile Carousel Awkward Showcase jQuery Plugin Coda Slider Effect Content Slider with jQuery UI Dynamic-Carousel […]
View DetailsRendera 如果你希望有个环境可以测试、浏览和体验各种不同的 CSS/HTML 和 JavaScript 代码，Rendera 为你提供了实时的运行结果。类似 RunJS。 Patternizer 从名字可看出该工具可以创建真正的调色板，包括各种线条和条文，可编辑线宽、颜色、角度和间隙，特别适合用来创建背景图片。 CanvasLoader Creator 通过这个工具可以定制你的加载器，创建更吸引眼球的访问体验，无需任何编码 On/Off Flipswitch HTML5/CSS3 Generator 用来创建各种滑动开关效果 Font Dragr 用来测试字体是否适合你的网页，只需拖放即可操作 Sprite Box It enables adding life in sprite images by adding them with HTML5, CSS3, or JavaScript codes. Sketch Toy 这是一个简单的工具，通过鼠标可轻松创建各种素描艺术效果 Adobe Edge Animate 用来创建兼容各种浏览器的动画效果 Initializr Initializr 提供模板化工具来快速创建 HTML 网站 HTML KickStart 同上，快速的网站创建工具，允许通过简单点击编辑按钮、列表、表格和排版 Adobe Typekit 该工具帮你选择合适的字体，并可进行实时效果预览 Webdirections Webdirections 可方便的测试、浏览和体验代码，通过简单的点击进行 HTML、CSS 的操作 Liveweave 另外一个类似 RunJS 的在线工具 MRI MRI 可以让你测试各种选择器 LimeJS LimeJS 是一个 JavaScript 游戏开发框架，允许开发者创建基于 HTML5 的游戏，支持主流浏览器包括iOS。 The HTML5 Test 用来测试浏览器对 HTML5 的支持程度 Moqups Moqups 是一款HTML5在线的WEB框架、模型、UI设计并创建的网络应用程序。 Stitches Stitches 是一个 […]
View Details免费响应式模版 FlexApp Demo || Download zGallering – Free Responsive Html5 Theme Demo || Download Responsive HTML5/CSS3 template Demo || Download VividPhoto HTML5 and CSS3 Template Demo || Download ResponseEve HTML Template Demo || Download Brownie Responsive HTML5 Template Demo || Download Retina – Free Responsive HTML5 Template Demo || Download Digy Demo || Download Obscura – Free Responsive HTML Template Demo || Download ImCreative HTML5 Template Demo || Download Simple Responsive Template Demo || Download Keyners HTML5/CSS3 Responsive Template Demo || Download zParalexy – Free Responsive Html5 Theme […]
View Detailstooltip或者infotip或者hint，是一种常见的图形用户界面元素。它用于连同一个光标，通常是一个鼠标光标。当用户将鼠标悬停在一个特定的地方，无需点击，就会出现一个包含关于悬停到这个地方的一些信息的tooltip或小的悬浮框。 jQuery tooltip是应该考虑在网页设计和开发中利用的最好的构件之一。Tooltip提供了额外的功能和通用型，可以被视为大多数网站的最重要的一个用户界面组件。 本文中我收集了15个最好的jquery tooltip插件，这些可以帮助你创建创新的和有创造性的网页设计，同时也可以帮助你来实现你的web项目所需要的结果。我希望这个jquery tooltip插件的列表对你即将到来或已经开始的web项目提供了便利并且是确实有用的。如果你知道一些其他的jquery tooltip插件请通过在评论区跟帖让我知道，非常期待。请享受本文！ 1. Tooltipster Tooltipster是一个jQuery插件，用来快速创建HTML5验证的灵活的提示工具。这个插件很小（4.8kb大小），工作很快并且可以很容易的被定制。外观可以随意改变CSS（支持主题）和鼠标箭头的位置，展现的延迟/时间都可以被定义。 Source 2. Toolbar.js Toolbar.js允许你快速创建用于web应用程序和网站的提供工具类型的工具栏。这个工具栏可以很容易的用twitter启动图标定制，还提供自适应的环绕在工具栏周围显示一些图标。 Source 3.qTip2 qTip2是第二代先进的qTip插件，这是一个曾经很流行的jQuery框架。在1.0版本的友好的用户和丰富的功能的基础上，qTip2提供了一些增强的功能，比如气泡提示、影像映射等等。它是完全免费的，许可是MIT/GPLv2。 Source 4. Poshy Tip jQuery Plugin Poshy Tip jQuery Plugin是一个提示框插件，允许轻松创建时尚的提示框。通过Poshy Tip你可以把提示相对于鼠标光标或目标元素来定位，并可以将它们横向或纵向展示。 Source 5. Grumble.js Grumble.js提供了一个没有东西南北定位限制的特殊的提示框。它可以从360度的任何角度环绕一个给定的元素，可以指定任意的距离。 Source 6. Joyride Joyride是一个jQuery的插件，简化了指导用户发现一个网站的特点的过程。通过定义一个有序的步骤，可以在任何HTML元素附近通过提示框显示需要的信息。 Source 7. ImageMapster ImageMapster是一个可以通过添加更多地功能给旧图片来让它们更有生气的jQuery插件。使用这个插件，可以通过各种方式突出显示、选择（单个或多个区域）和操纵任何的图像。提示工具可以显示用户友好的可以与该图像互动的信息。 Source 8. Tooltipsy Tooltipsy是一个提供了创建提示工具的灵活基础的jQuery插件。它有最小的默认样式或动画，你都可以完全控制它们。它可以按你希望的方式来定位，外观和感觉均可以通过CSS来定制，任何类型的动画都可以被实现。 Source 9. jQuery Bubble Popup jQuery Bubble Popup是一个用来帮助创建容易控制的别致Tooltip的最流行的JS框架的插件。Tooltip通过淡入淡出的方式显示/隐藏，里面也可以显示任何的HTML内容。它们可以附加到任何一边的一个元素中，也可以获取Tooltip的状态（开/关，创建，最后一次修改或最后一次显示的时期时间）而采取相应的动作。 Source 10. Beauty Tips BeautyTips是一个使用canvas元素来实时绘制Tooltip的jQuery插件。每一个Tooltip默认显示在一个元素的有足够空间的一边，但是这个位置也可以强制放到一边。内容可以硬编码进去，或者从一个属性获取或者通过一次Ajax请求获取。 Source 11. Simpletip Simpletip是一个新生的轻量级的创建灵活的Tooltip的jQuery插件。Tooltip可以附加到任何的元素 & 轻松风格的演示 & 定位。Tooltip可以是静态的、动态的或者通过Ajax加载的。另外，可以应用任何组合的效果来使它们更有吸引力。 Source 12. Colortip 它将在你页面中元素的title属性转换为一系列丰富多彩的Tooltip。共有六个可用的颜色主题，所以你可以很容易的匹配你的设计。你也可以轻松地通过添加三个额外的样式类到你的stylesheet和在colortip-1.0-jquery.js中的支持颜色数组中添加一个元素来创建你自己的Tooltip。 Source 13.TipTip TipTip是一个非常轻量级和智能的自定义Tooltip的jQuery插件。它使用零图像，并且是通过CSS完全可定制的。TipTip会检测浏览器窗口的边缘以确保tooltip停留在当前窗口的大小。因此Tooltip将调整自身来显示在要使用TipTip的元素的上下左右，这取决于要保持在浏览器窗口中的哪些是必要的。 Source 14. (Mb) Tooltip (mb)Tooltip是为你的使用jQuery的页面提供的一个美丽的tooltip。只需很简单的将你的内容作为title属性的值，然后你就可以用这个聪明的漂亮的tooltip代替那丑陋的默认tooltip了。你也可以随时禁用或启用(mb)Tooltip。 Source 15. Hovercard 这是一个免费的轻量级jQuery插件，可以让你使用悬停的label、link或任何你选择的html元素来显示相关联的信息。hovercard可以用在显示个人简历、书籍作者和价格，通过Ajax加载相关联的信息，直接编辑等场景下。你也可以添加你的自定义数据源，使用已有的card格式来显示分析的数据。 Source 转自：http://www.oschina.net/translate/jquery-tooltip-plugins-for-developers
View Details今天给大家介绍的 60 个应用模版，全部是关于 Windows 8 设计相关的，它们很适合在 Windows 8 的平板上使用。如果你接下来想开发 Windows 8 应用，相信对你会有很大帮助。 而且这些模版都是放在 CodePlex 上。 点击图片进入模版页面 Block Style Color template will help if you want to build an app which needs a Variable Size Content display block. The Block Style Color template contains placeholders for Category and Detail Page. You can leverage this style if your implementation scenario is closest to this template. Block Style Pic template is an emulation of a data storage app with placeholders for category and details data. Brick Style template will help if […]
View Details★a标签的四个伪类的意义及排序： 在支持css的各个浏览器中，a标签链接的不同状态都能以不同的方式显示，这些状态包括：未被访问状态、已被访问状态、鼠标悬停状态和激活状态。 a:link|a:visited|a:hover|a:active这是a标签的排列顺序，这样排列是有一定因素的：a、技术层面：a的这四个伪类，分别表示了a的四种状态，要注意的是，a可以只具有一种状态(:link)，或者同时具有两种或者三种状态，任何具有href属性的a标签，在没有对它进行操作之前就已经具备了:link的条件了；b、css优先级角度：从css优先级来看，当排列顺序发生变化时，后者会覆盖前者的表现样式，所以一般来说，我们要按照正确的顺序来排列a标签的四个伪类，可以简写为love、hate； 在实际应用中，很少会出现4个伪类同时使用的情况，有时我们只用到一个a:hover的效果，而不再对四个伪类都设置一遍，但是如果有其他伪类的需求，就必须按照4个伪类的正确顺序来设置，需要注意的是，除a标签以外，其他标签也都具备伪类，但是在IE6不支持a标签以外的标签的伪类； 转自：http://hi.baidu.com/haohaizhaozhao/item/96570e34ef28f5bfb80c03d9
View Details所谓JavaScript库就是预先写好的可以简化基于JavaScript的应用程序开发的,尤其是Ajax和其它以web为中心的技术的JavaScript代码集。JavaScript主要用于写内嵌于HTML页面并和文档对象模型（DOM）进行打交道的各种函数(Function)。 一些JavaScript库很容易的和其它Web技术行进整合，譬如CSS, PHP, Ruby和Java。许多库可以检测不同的运行环境，并且消除应用程序为了兼容不一致而需要写的代码。 本文搜集了20个 JavaScript 库，它们能理清你遇到的开发相关的问题，让你的网站在竞争中领先一步。我们希望你能发现这个JavaScript库的列表对你的开发工作方便有用。尽情享受吧！ 1. Tracking.js Tracking.js 是一个独立的JavaScript库，用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色，也可以是人，也就是说我们可以通过检测到某特定颜色，或者检测一个人体/脸的出现与移动，来触发JavaScript 事件。它是非常易于使用的API，具有数个方法和事件（足够使用了）。 Source 2. Aristochart Aristochart 是一个不依赖于其他库的 JavaScript 库，其功能是绘制二维的静态线图，使用 Canvas 绘制。该库特点是可定制，提供大量选项来更改设计、标签等等。 Source 3. Hitch Hitch是一个轻量级的JavaScript库,它添加了CSS文件表现能力。它拥有CSS前缀或者变量强大的预处理能力,但也有一些其它的东西。这个类库出现了多个现成的选择器,比如"anyof, allof, has.."同时允许我们去定义任何新的(叫做 hitches)。 Source 4. Cesium Cesium,一个基于WebGL的 JavaScript 绘图库， 通过其内部机制提供了这个能力。它支持3种不同的视图: 3D globe, 2D map,和 2.5D Columbus View ，从一种到另一种转换只需要一行代码。 画任何类型的形状，突出显示特定的地区以及使用鼠标或触摸与地图交互，都相当简单。Cesium只有一个 JS 文件，可在包括手机在内的所有主流浏览器运行。 Source 5. Two.js Two.js 是一个令人激动的JavaScript库。它为SVG,Canvas和WebG提供二维和单一绘图API。这个类库目前仅仅支持形状(没有文字或图像)。它允许引入SVG数据。有用的地方在于它能够聚合多种元素,当需要将他们转化在一起。有一个内置的动画循环,方法去绘制知名的形状和多种选择去自定义它们。 Source 6. Sequel.js Squel.js 是一个轻量级的JavaScript库。通过面对对象的API,它很容易就帮助我们建立SQL查询字符串。 它工作在所有的浏览器上(不被建议,因为查询可见)。通过node.js的帮助,它能够支持标准的SQL查询(它能够被定制去操作非标准的查询) Source 7. Draggabilly Draggabilly使得jQuery UI的拖拽交互变得容易了。它是一个独立的，轻量级的JavaScript库，元素的拖动可以限制在一个有此特性的容器当中，并且拖拽过程中每个事件（开始、移动、结束）都存在回调函数，它们也可以返回该元素的位置。 Source 8. Zebra Zebra是一个JavaScript库，带有一批用来创建类似桌面效果布局的富用户界面组件。UI元素通过HTML5 canvas创建，由CSS着色，预期在所有现代浏览器中渲染出相同的效果。有30+ UI 组件，包括grid, tabs, menu, form elements, menu 等许多许多. Source 9. Formula.js Formula.js 是一个JavaScript类库。对web开发者而言,它实现大部分公式。列出了公式的多个分类例如日期/时间,文本,逻辑,金额等。此外,客户端它需要和node.js(即将被发布)工作。 Source 10. Chart.js Chart.js 是一个令人印象深刻的图表类库,建立在HTM5 canvas之上。目前,它支持6种图表类型 (折线图,条形图,雷达图,饼图,柱状图和极地区域区)。而且这是一个独立的包,大小小于5kb。颜色，字体，边框和它们的尺寸都可以定制，图表可以动画的形式加载，非常炫。 Source […]
View Details1.区别IE和非IE浏览器代码如下:#tip {background:blue;background:red \9;}2.区别IE6,IE7,IE8,FF【区别符号】：「\9」、「*」、「_」【示例】：代码如下:#tip {background:blue;background:red \9;*background:black;_background:orange;}【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。3.区别IE6、IE7、Firefox (方法 1)【区别符号】：「*」、「_」【示例】：代码如下:#tip {background:blue;*background:black;_background:orange;}【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读取「_」，至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox4.区别IE6、IE7、Firefox (方法 2)【区别符号】：「*」、「!important」【示例】：代码如下:#tip {background:blue;*background:green !important;*background:orange;}【说明】：IE7可以辨识「*」和「!important」，但是IE6只可以辨识「*」，却无法辨识「!important」，至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。5.区别IE7、Firefox【区别符号】：「*」、「!important」【示例】：代码如下:#tip {background:blue;*background:green !important;}【说明】：因为Firefox可以辨识「!important」但却无法辨识「*」，而IE7则可以同时看懂「*」、「!important」，因此可以两个辨识符号来区隔IE7和Firefox。6.区别IE6、IE7 (方法 1)【区别符号】：「*」、「_」【示例】：代码如下:#tip {*background:black;_background:orange;}【说明】：IE7和IE6都可以辨识「*」(米字号)，但IE6可以辨识「_」(底线)，IE7却无法辨识，透过IE7无法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差异。7.区别IE6、IE7 (方法 2)【区别符号】：「!important」【示例】：代码如下:#tip {background:black !important;background:orange;}【说明】：因为IE7可读取「!important;」但IE6却不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS，所以背景色会呈现橘色。8.区别IE6、Firefox【区别符号】：「_」【示例】：代码如下:#tip {background:black;_background:orange;}【说明】：因为IE6可以辨识「_」(底线)，但是Firefox却不行，因此可以透过这样的差异来区隔Firefox和IE6，有效达成CSS hack。 区别不同浏览器，CSS hack写法： 区别IE6与FF： background:orange;*background:blue; 区别IE6与IE7： background:green !important;background:blue; 区别IE7与FF： background:orange; *background:green; 区别FF，IE7，IE6： background:orange;*background:green !important;*background:blue; 注： IE都能识别*;标准浏览器(如FF)不能识别*； IE6能识别*，但不能识别 !important, IE7能识别*，也能识别!important; FF不能识别*，但能识别!important; 另外再补充一个，下划线"_", IE6支持下划线，IE7和firefox均不支持下划线。 于是大家还可以这样来区分IE6，IE7，firefox background:orange;*background:green;_background:blue; —————————————- HACK对照表 —————————————- IE6 IE7 FF _ √ × × * √ √ × !important × √ √ —————————————- 注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。
View Details