jquery实现metro效果示例代码
2023-06-13 09:15:05 时间
1.<head>标签需要依此引用metrojs.css、jquery.js、metro.js,代码demo如下
复制代码代码如下:
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<linkhref="http://www.drewgreenwell.com/content/metrojs.css"rel="stylesheet"/>
<scriptsrc="http://code.jquery.com/jquery-1.7.1.js"></script>
<scriptsrc="http://www.drewgreenwell.com/scripts/metrojs.js"></script>
</head>
下面贴出完整的代码:
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<linkhref="http://www.drewgreenwell.com/content/metrojs.css"rel="stylesheet"/>
<scriptsrc="http://code.jquery.com/jquery-1.7.1.js"></script>
<scriptsrc="http://www.drewgreenwell.com/scripts/metrojs.js"></script>
</head>
<body>
<h1>简单的metrodemo</h1>
<!--首先是一个div作为metro容器,容器内可以摆放多个liveTile(动态磁贴),class="black"表示用哪种风格,有其他的可以选择,官网现在支持custom了-->
<divclass="blue">
<!--下面是第一个liveTile-->
<!--注意class="live-tile"哦,这个是可以随便改的,但要和下面的js$(".live-tile").liveTile();同步哦-->
<divclass="live-tile">
每一个liveTile都应该有两个div,分别作为两个画面
<div><ahref="#">我是第一个liveTile</a></div>
<div>
<p>我是第一个liveTile的第二张脸哦.</p>
</div>
</div>
<!--下面是第二个liveTile-->
<!--默认的宽高是150px,可以改的哦-->
<divclass="live-tile"style="width:300px;height:300px">
<div>我是第二个liveTile</div>
<div>
<p>下面放张图片试试</p>
<imgsrc="http://www.baidu.com/img/bdlogo.gif"alt="我是百度哦"/>
</div>
</div>
</div>
<scripttype="text/javascript">
$(document).ready(function(){
$(".live-tile").liveTile();
});
</script>
</body>
</html>
想弄个iframe来显示效果,但没办法弄,而且很晚了,困,就不弄了,有兴趣的自己copy下代码吧
相关文章
- jquery实现轮播图_用jquery实现图片轮播图代码
- html左侧浮动广告代码,jQuery 浮动广告实现代码[通俗易懂]
- jquery validation engine ajax验证,jQuery Validation Engine 表单验证「建议收藏」
- jquery简单导航实现代码
- Jquery实现无刷新DropDownList联动实现代码
- 用JQuery调用Session的实现代码
- 基于jQuery的仿flash的广告轮播代码
- jquery查找select,并触发事件的实现代码
- jquery刷新页面的实现代码(局部及全页面刷新)
- jquery.pagination+JSON动态无刷新分页实现代码
- jquery限制输入字数,并提示剩余字数实现代码
- jQuery判断密码强度实现思路及代码
- JQuery操作/获取table具体代码
- jquery实现多级下拉菜单的实例代码
- jQuery自定义事件的简单实现代码
- Jquery点击按钮自动高亮实现原理及代码