tooltip或者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 DetailsX-Tag 是一个对浏览器默认的HTML元素外观进行重写的UI框架。 在线演示：http://mozilla.github.com/x-tag/demo.html 官网:http://x-tags.org/
View DetailsDojo Mobile 框架是一套移动终端的Web应用开发框架，是 Dojo 的一个子项目。Dojo Mobile主要面向手持设备上的Web富客服端应用开发，提供了iPhone和android两套主题，使得基于iPhone或者Android的Web应用具有手机本地应用的外观和效果，而同时也给了开发者更多的主导权。下面是在Android下基于Dojo Mobile开发的Web应用Demo图，如果不是看得到地址栏，可能会以为是iPhone和Android的原生程序呢。 Dojo Mobile开发框架有这么几个特点： 1.轻量级，dojo mobile框架在压缩之后仅有100k，在同类js框架中算是体积相当小的，对移动设备来说十分合适。2.大量使用CSS3实现iPhone和Android本地程序的特效，动画效果流畅3.跨浏览器平台，dojo mobile同时也支持非webkit内核的手机浏览器，使用dojo自带的dojo.animateProperty与dojox.gfx模拟特效 Dojo Mobile 的标准网页模板
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1 ,maximum-scale=1,minimum-scale=1,user-scalable=no"> <meta name="apple-mobie-web-app-capable" content="yes"> <title>My Dojo Mobile App</title> <script src="dojo-toolkit/dojo/dojo.js" djConfig="parseOnLoad: true"></script> <script> dojo.require("dojox.mobile.parser"); dojo.require("dojox.mobile"); dojo.require("dojox.mobile.compat"); dojo.require("dojox.mobile.deviceTheme"); </script> </head> <body> <!-- Dojo Widgets Go Here --> </body> </html> |
官网:http://dojotoolkit.org/features/mobile
View Detailsdeal forms，这个表单美化架构简单，基于jQuery框架，能够帮助web开发人员快速创建漂亮和界面友好的表单组件。 这个框架将普通的<input>表单元素改变为圆角的外观，并且加入非常吸引人的特效。并且其它的单选框和多选框也可以方便的定制。 这些特效没有使用任何图片，只需要简单的HTML并且完全可以定制CSS，架构本身自带3个主题可供选择。 官网:http://elclanrs.github.io/jq-idealforms/
View DetailsMobello 是一个高性能的 JavaScript 框架用于构建基于 HTML5 的移动应用。你可以构建跟本地App外观无异的HTML5 应用程序，支持智能手机和平板。Mobello 是一个可伸缩的可靠的框架用来创建富用户界面。并提供一个集成开发环境Mobello Studio。 官网:http://mobello.github.io
View DetailsJunior 是一个前端的框架，用来构建 HTML5 的移动 Web 应用，外观跟原生应用一致，特点： 为移动性能优化的 CSS3 转换 使用 flickable.js 的可滑动旋转效果 集成 backbone.js 视图和路由 CSS UI 组件 官网:http://justspamjustin.github.io/junior/#home
View Details