今天给大家介绍的 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在HTML5的世界里，任何文本、图像都可以变得令人难以想象，很多HTML5应用也都已经随着浏览器的升级而变得运行飞速，而且兼容性也越来越好。下面为大家介绍7款效果震憾的HTML5应用组件，HTML5是强大的，是WEB的未来。 1、HTML5实时动态数据图表 HTML5实时动态数据图表，这是一款基于HTML5技术的网页图表插件，该图表插件功能十分强大，支持区域范围选择、鼠标拖动自定义区域、显示坐标点数据等功能。 在线演示 / 图表下载 2、jQuery/CSS3水平图片悬停效果 这是一款基于jQuery和CSS3的图片悬浮特效，鼠标滑过图片后，图片将悬浮突出显示，并且，整个图片相册是自定义滚动条，非常漂亮，支持滚轮。 素材演示 / 素材下载 3、jQuery书本翻页动画效果 这是一款基于jQuery的书本翻页特效，这款翻页插件非常适合你应用在在线阅读上，这个翻页插件可以让用户有真实的阅读感觉。 素材演示 / 素材下载 4、jQuery网页背景自由切换插件justParallax justParallax是一款基于JavaScript的网页背景切换插件，该插件允许你随时切换背景图片，并且可以设置网页滚动时背景的移动方式和移动方向。 素材演示 / 素材下载 5、CSS3/jQuery圆盘时钟 这款CSS3时钟是根据你本地的时间而实时走动的，结合jQuery完美的实现了仿真实圆盘时钟的效果。 在线演示 / 素材下载 6、jQuery翻页插件simplePagination simplePagination是一款基于jQuery的内容分页插件，simplePagination自定义3种不同的风格，你也可以自己定义CSS代码来获取自己风格的分页导航。 在线演示 / 素材下载 7、CSS3鼠标悬停动画按钮 这是一款用纯CSS3制作的鼠标悬停动画按钮，该款CSS3按钮有9组不同的鼠标悬停动画，也分别有9中不同的按钮风格，按钮整体干净大气。 在线演示 / 素材下载 转自：http://www.oschina.net/news/41941/7-html5-apps
View Details