jquery實(shí)現(xiàn)metro效果示例代碼
更新時間：2013年09月06日 17:37:42 作者：
metro效果想必大家并不陌生吧，下面為大家講解下在jquery中時如何實(shí)現(xiàn)的，新手朋友們可不要錯過了
1.<head>標(biāo)簽需要依此引用metrojs.css、jquery.js、metro.js，代碼demo如下
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link 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 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容器，容器內(nèi)可以擺放多個liveTile（動態(tài)磁貼），class="black"表示用哪種風(fēng)格，有其他的可以選擇，官網(wǎng)現(xiàn)在支持custom了-->
<div class="blue">
<!--下面是第一個liveTile-->
<!--注意class="live-tile"哦，這個是可以隨便改的，但要和下面的js $(".live-tile").liveTile();同步哦-->
<div class="live-tile">
每一個liveTile都應(yīng)該有兩個div，分別作為兩個畫面
<div><a href="#">我是第一個liveTile</a></div>
<div>
<p>我是第一個liveTile的第二張臉哦.</p>
</div>
</div>
<!--下面是第二個liveTile-->
<!--默認(rèn)的寬高是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下代碼吧
復(fù)制代碼 代碼如下:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link 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>
下面貼出完整的代碼：
復(fù)制代碼 代碼如下:
<!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 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容器，容器內(nèi)可以擺放多個liveTile（動態(tài)磁貼），class="black"表示用哪種風(fēng)格，有其他的可以選擇，官網(wǎng)現(xiàn)在支持custom了-->
<div class="blue">
<!--下面是第一個liveTile-->
<!--注意class="live-tile"哦，這個是可以隨便改的，但要和下面的js $(".live-tile").liveTile();同步哦-->
<div class="live-tile">
每一個liveTile都應(yīng)該有兩個div，分別作為兩個畫面
<div><a href="#">我是第一個liveTile</a></div>
<div>
<p>我是第一個liveTile的第二張臉哦.</p>
</div>
</div>
<!--下面是第二個liveTile-->
<!--默認(rèn)的寬高是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下代碼吧
相關(guān)文章
這篇文章主要介紹了jQuery事件綁定用法,結(jié)合多個實(shí)例較為詳細(xì)的分析了常見的jQuery事件綁定實(shí)現(xiàn)技巧與使用方法,需要的朋友可以參考下2016-09-09
jQuery實(shí)現(xiàn)checkbox的簡單操作
這篇文章主要介紹了jQuery實(shí)現(xiàn)checkbox的簡單操作，對復(fù)選框組的全選、全不選、不全選，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
Jquery UI實(shí)現(xiàn)一次拖拽多個選中的元素操作
這篇文章主要介紹了Jquery UI實(shí)現(xiàn)一次拖拽多個選中的元素操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了jQuery獲取單擊節(jié)點(diǎn)對象的方法,涉及jQuery操作鼠標(biāo)事件與頁面元素的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
jquery validate poshytip 自定義樣式
項目中做了一個jquery.validate氣泡提示在新版的jquery.validate中，有這個功能，但在我這里不怎么好用，所以自己加了一個，找了一些插件qtip2的樣式不錯，需要的朋友可以參考下2012-11-11
將JavaScript的jQuery庫中表單轉(zhuǎn)化為JSON對象的方法
這篇文章主要介紹了將JavaScript的jQuery庫中表單轉(zhuǎn)化為JSON對象的方法,包括對序列化時空格問題的處理方法,需要的朋友可以參考下2015-11-11
jQuery實(shí)現(xiàn)防止提交按鈕被雙擊的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)防止提交按鈕被雙擊的方法,涉及jQuery針對鼠標(biāo)按鍵的操作技巧以及preventDefault方法對元素默認(rèn)行為的修改技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
關(guān)于jQuery新的事件綁定機(jī)制on()的使用技巧
本篇文章介紹了，關(guān)于jQuery新的事件綁定機(jī)制on()的使用技巧。需要的朋友參考下2013-04-04
jquery創(chuàng)建一個ajax關(guān)鍵詞數(shù)據(jù)搜索實(shí)現(xiàn)思路
我們經(jīng)常需要在前臺頁面輸入關(guān)鍵詞進(jìn)行數(shù)據(jù)的搜索這已經(jīng)成為了一種習(xí)慣今天給大家分享一下如何使用 jQuery，MySQL和Ajax創(chuàng)建簡單和有吸引力的Ajax搜索,感興趣的你可不要錯過了哈2013-02-02
使用jQuery監(jiān)聽掃碼槍輸入并禁止手動輸入的實(shí)現(xiàn)方法(推薦)
基于jQuery的掃碼槍監(jiān)聽。如果只是想實(shí)現(xiàn)監(jiān)聽獲取條碼掃碼信息，可以直接拿來使用，如果有更多的條碼判斷處理邏輯需要自己擴(kuò)展哦2017-03-03