win8 磁贴
今天接到新任務，設計磁貼，新名詞，新領域！
研究了半天，結論：貌似好像本項目只適合用JQERY和CSS解決問題！
eg:http://www.cnblogs.com/redleaf-me/p/3317924.html
http://www.cnblogs.com/lhb25/archive/2013/03/19/windows-8-metro-style-icon-packs.html
源碼：
<!DOCTYPE html><html> <head><meta name="viewport" content="width=device-width" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Metro UI之磁貼（Tile）</title><style type='text/css'> body {font-family: '微軟雅黑';background-color: #8b37f1; }p {color: white; }.tile {display: inline-block;width: 200px;height: 100px;margin: 5px;padding: 0;overflow: hidden;background-color: blue;color: white;font-family: '微軟雅黑';font-size: 30px;vertical-align: middle;cursor: pointer !important;box-shadow: 0px 0px 5px #eee; }.tile label {width: 200px;height: 100px;display: block;}.tile .title {display: inline-block;height: 100px;width: 200px;line-height: 100px;vertical-align: middle;text-align: center;}.tile .content {position: relative;height: 100px;padding: 5px;display: block;word-wrap: break-word;word-break: break-all;font-family: '微軟雅黑';font-size: 14px;}.tile:hover {-moz-box-shadow: 0px 0px 5px #ddd;-webkit-box-shadow: 0px 0px 5px #ddd;box-shadow: 0px 0px 5px #ddd;}.tile:hover .content {margin-top: -100px;}.tile input[type='checkbox'], .tile input[type='radio'] {width: 40px;height: 40px;margin: 0;padding: 0;float: right;position: relative;outline: none !important;border: 0 !important;top: 0;right: 0;display: none;}.tile .symbol {display: inline-block !important;width: 40px;height: 40px;position: relative;top: 2px;right: 2px;float: right;margin-bottom: -40px;z-index: 10000;}.tile input[type='checkbox']:checked ~ .symbol, .tile input[type='radio']:checked ~ .symbol {background-image: url('../Images/tile_selected_symbol.png');}/*顏色*/ .tile-blue {background-color: blue;color: white; }.tile-blue .content {background-color: white;color: blue;}.tile-yellow {background-color: yellow;color: blue; }.tile-yellow .content {background-color: blue;color: yellow;}.tile-green {background-color: green;color: white; }.tile-green .content {background-color: white;color: green;}.tile-pink {background-color: deeppink;color: white; }.tile-pink .content {background-color: white;color: deeppink;}</style> </head> <body><p>Metro UI之磁貼（Tile） <span style="font-style:italic; font-size:12px; color:red;">IE9+</span></p><p>多選（input [ checkbox ]）</p><div class="tile tile-blue"><label><input type="checkbox" /><span class="symbol"> </span><!--這個地方“<span class="symbol"></span>”剛才被編輯器直接過濾掉，也過于“智能”了吧，不是所有的空標簽就真的是沒有用的……好吧，這樣“<span class="symbol">?</span>”，終于把效果效果保住了——這可是關系到鉤鉤的——無鉤怎么火？有”鉤“才火嘛 :) --><span class="title">簡單磁貼</span><span class="content">這是磁貼的內容</span></label></div><div class="tile tile-yellow"><label><input type="checkbox" /><span class="symbol"></span><span class="title">簡單磁貼</span><span class="content">這是磁貼的內容</span></label></div><div class="tile tile-green"><label><input type="checkbox" /><span class="symbol"></span><span class="title">簡單磁貼</span><span class="content">這是磁貼的內容</span></label></div><p>單選（input [ radio ]）</p><div class="tile tile-green"><label><input type="radio" name="tile_radio" /><span class="symbol"></span><span class="title">簡單磁貼</span><span class="content">這是磁貼的內容</span></label></div><div class="tile tile-pink"><label><input type="radio" name="tile_radio" /><span class="symbol"></span><span class="title">簡單磁貼</span><span class="content">這是磁貼的內容</span></label></div><div class="tile tile-blue"><label><input type="radio" name="tile_radio" /><span class="symbol"></span><span class="title">簡單磁貼</span><span class="content">這是磁貼的內容</span></label></div> </body> </html>效果：還有其它收獲：
(1)Windows Phone的磁貼：
http://msdn.microsoft.com/zh-cn/library/hh202979%28v=vs.92%29
(2)關于磁貼的網址：
http://zzk.cnblogs.com/s?w=%E7%A3%81%E8%B4%B4&t=&p=2
http://www.cnblogs.com/redleaf-me/p/3317924.html
(3)WEB前端開發
http://www.cnblogs.com/lhb25/archive/2013/03/25/must-read-links-for-web-designers-and-developers-volume-14.html
總結
- 上一篇： Java学习笔记——Character类
- 下一篇： 04zookeeper场景应用-mast