jquery实现metro效果示例代码


Posted in Javascript onSeptember 06, 2013

1.<head>标签需要依此引用metrojs.css、jquery.js、metro.js,代码demo如下

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<link href="http://www.drewgreenwell.com/content/metrojs.css" rel="stylesheet" /> 
<script src="http://code.jquery.com/jquery-1.7.1.js"></script> 
<script src="http://www.drewgreenwell.com/scripts/metrojs.js"></script> 
</head>

下面贴出完整的代码:
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<link href="http://www.drewgreenwell.com/content/metrojs.css" rel="stylesheet" /> 
<script src="http://code.jquery.com/jquery-1.7.1.js"></script> 
<script src="http://www.drewgreenwell.com/scripts/metrojs.js"></script> 
</head> 
<body> 
<h1>简单的metro demo</h1> 
<!--首先是一个div作为metro容器,容器内可以摆放多个liveTile(动态磁贴),class="black"表示用哪种风格,有其他的可以选择,官网现在支持custom了--> 
<div class="blue"> 
<!--下面是第一个liveTile--> 
<!--注意class="live-tile"哦,这个是可以随便改的,但要和下面的js $(".live-tile").liveTile();同步哦--> 
<div class="live-tile"> 
每一个liveTile都应该有两个div,分别作为两个画面 
<div><a href="#">我是第一个liveTile</a></div> 
<div> 
<p>我是第一个liveTile的第二张脸哦.</p> 
</div> 
</div> 
<!--下面是第二个liveTile--> 
<!--默认的宽高是150px,可以改的哦--> 
<div class="live-tile" style="width:300px; height:300px"> 
<div>我是第二个liveTile</div> 
<div> 
<p>下面放张图片试试</p> 
<img src="http://www.baidu.com/img/bdlogo.gif" alt="我是百度哦" /> 
</div> 
</div> 
</div> 
<script type="text/javascript"> 
$(document).ready(function () { 
$(".live-tile").liveTile(); 
}); 
</script> 
</body> 
</html>

想弄个iframe来显示效果,但没办法弄,而且很晚了,困,就不弄了,有兴趣的自己copy下代码吧
Javascript 相关文章推荐
javascript 控制弹出窗口
Apr 10 Javascript
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
jQuery 操作option的实现代码
Mar 03 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
JS去除数组重复值的五种不同方法
Sep 06 #Javascript
JavaScript判断密码强度(自写代码)
Sep 06 #Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 #Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 #Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 #Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 #Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 #Javascript
You might like
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
PHP中常用的转义函数
2014/02/28 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
jQuery后代选择器用法实例
2014/12/23 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
python dict.get()和dict['key']的区别详解
2016/06/30 Python
Django卸载之后重新安装的方法
2017/03/15 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
python实现文件的分割与合并
2019/08/29 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
Python with标签使用方法解析
2020/01/17 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
python打包生成so文件的实现
2020/10/30 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
python爬虫如何解决图片验证码
2021/02/14 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
大学毕业的自我鉴定
2013/10/08 职场文书
查环查孕证明
2014/01/10 职场文书
我的五年职业生涯规划
2014/01/23 职场文书
汽车促销活动方案
2014/03/31 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
单位未婚证明范本
2014/11/25 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
golang为什么要统一错误处理
2022/04/03 Golang