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 相关文章推荐
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
AngularJS的表单使用详解
Jun 17 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
Vue.js 踩坑记之双向绑定
May 03 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
Yii的Srbac插件用法详解
2016/07/14 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
python标准日志模块logging的使用方法
2013/11/01 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
python绘制封闭多边形教程
2020/02/18 Python
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
九月份红领巾广播稿
2014/01/22 职场文书
离婚协议书范本样本
2014/08/19 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android
MySQL 条件查询的常用操作
2022/04/28 MySQL
python双向链表实例详解
2022/05/25 Python