一切福田,不離方寸,從心而覓,感無不通。

为开发者准备的 15 款 Tooltip 工具提示 jQuery 插件

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

龙生   08 Jul 2013
View Details

60 个 Windows Store 的应用设计模版

今天给大家介绍的 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 […]

龙生   08 Jul 2013
View Details

开始3D编程前需注意的十件事

开始3D编程不是一件容易完成的任务。这里有很多新的东西可以发挥作用,从选择语言到选择合适的3d建模软件。当这10个事情完成时,无论你选择何种语言,使用何种建模软件,你都可以认为自己是这方面的半个专家了。 #1:建立自己的图形初始化函数 现在有种类繁多的3d引擎和平台,所以这个任务一般交给它们来完成。我还记得以前的事情,你必须使用windows函数来初始化OpenGL,并管理窗口句柄和资源的加载。了解事情是如何进行内部管理的会让你更深刻理解你现在在干什么,这是非常有用的。 我建议从NEHE的教程开始。在教程的第一章中包含了一个C语言编写的利用Windows API的图形初始化函数。如果这里有很多东西需要你控制,你可以试试C++的相对的函数,或者使用托管语言,像C#、Java或者Python。在网络中有很多例子。 #2:实现自己的相机 您可以从互联网上复制和粘贴摄像头的代码,使用它并没有大的问题, 但它不是自己的相机,直到你从头开始,充分了解一些概念,如向量处理,矩阵变化,角度转换等等。你应该先从一个FPS(第一人称射击)的摄像头开始,它会给你需要的一切并让你为接下来的学习做好准备。 如果你以后想构建自己的游戏,你不能使用它。我建议你阅读这篇文章,以找出最适合您的需求类型的相机。 #3:了解初级的3D概念 当我开始,我就开始听到了很多新词,如抗锯齿,各向异性过滤,阻塞测试,Z-缓冲,alpha测试,着色器语言,凹凸贴图等。如果你是一个玩家,也许你已经在配置游戏的图形设置时看过它们了。请确保你花费一些时间来阅读相关内容,因为这将会给你一个3D编程的概述。 #4:学习所有向量和矩阵的知识 这始终被低估。我强烈建议,为了正确地管理如相机,光线追踪,地形跟踪的东西,你应该知道关于这个的一切。当然,你也需要学会最基础的三角知识。现在我才明白,如果我愿意花几分钟研究这个问题,我的生活本应该很轻松。 #5:编写你自己的3D模型加载器 我建议从使用OBJ文件或STL文件开始,因为他们用一个ASCII格式表示。之后你可以迁移到其他根伟复杂的格式上,比如3DS格式。有了这个,你不仅将了解如何保存3D模型,你还会理解如何绘制三角形,然后你就会明白图形引擎是如何绘制一切的。 #6:成功实现自己的碰撞算法 一个事情是绘制世界,另外一个是管理其他中几何形状。在一个虚拟的3D世界中,这里没有物理定律,所以你必须创建它们。如果你想要一个对象不能穿越墙壁,那么你必须在墙壁中创建一个几何图形并计算所有东西。有几种方法来管理碰撞,我建议从在一个迷宫项目实现两体碰撞开始。试试这个链接,了解更多信息。 #7:实现一个小的粒子引擎 当我发现3D游戏中火焰、烟雾、照明和一些其他令人惊艳的效果是由粒子组成,而那些粒子是由相机面前的贴图组成。你添加更多的粒子,效果看起来更加逼真,但是性能就有所损失了。我的第一个粒子引擎是为火箭的烟雾制作的,而且我这样做的时候还没有不参看粒子引擎教程。后来我意识到了,我已经改造了车轮。通过实现这些东西,你会明白一些诸如粒子发射器、粒子行为等想法。 # 8:了解一个3D建模软件的基本知识 为了修改在你的应用中使用的3D模型,你应该知道基本的操作,比如平移,缩放,旋转,变形,导出为其他格式,并制作简单的模型。如果你不这样做,你在制作第一个游戏时遇到事事依赖别人的情况。我曾用过几个建模软件,我强烈推荐3D MAX或Maya。 #9 :加载和播放动画 我做过的最困难的事情是加载并正确播放动画。我不得不对3D max的XAF文件进行大量的逆向。我不得不学习骨骼层次,矩阵插值等东西。在最后,看到自己的模型自行移动是一件让人相当高兴的事情。我建议从一个机器人动画开始,因为动物模型什么的还需要一种名为蒙皮的技术。 #10 编写2D自定义GUI控件 当我开始使用XNA时,由于XNA没有实现窗体控件,我不得不构建自己的图形用户接口。这也导致了两件事: 第一:我有了构建自定义的GUI控件的能力。 第二:我懂得了一些重要的概念,如事件控制和事件捕捉。 这不是容易的事,我实现的最难的一个控件是listbox,但是一旦做出来了,就可以在很多地方使用了。 结论 在这个过程中你将会遇到很多问题。你不得不花费很多时间来使你的代码可以正常工作,即使你很聪明。但是我可以告诉你的是,从一个程序猿的角度来说,没有什么快乐比的上你看着你的代码能顺利的工作。我仍然不能忘记当我第一次编出OBJ模块加载器时的喜悦。当时,我想要加载个人脸图像,然后数个小时过去了,在凌晨3:50时,突然一个非常诡异的人脸出现在我的屏幕,真是吓死爹了,每当我想起这件事时,就哈哈大笑.. 我确信当你设法完成这10件事后,你可以说你已经了解了3D编程的基础。我写篇文章是因为我花了很多时间来完成它(指走了弯路了),所以我希望每个开始接触3D编程的人,能有一个小小的指南。我的建议是开始做一个小小的游戏,并不断的完善它。我觉得这是一个很好的方式,因为如果只是单纯的去学习而看不到实际的效果的话,积极性不高。一段时间之后,你会觉得游戏对你来说不一样了,因为你会花很多时间来想它们是怎么解决你曾经碰到的技术难点的。以上,我试图使这篇文章结构保持清晰和易懂,如果你喜欢,你可以访问我的 博客来获取更多的这方面的内容。 转自:http://www.oschina.net/translate/ten-things-to-achieve-when-starting-3d-programming

龙生   08 Jul 2013
View Details