搜尋 sa 結果：
HTML:
CSS:
CSS:
display: inline-block;
width: 160px;
}
.bbb li div{
width: 150px;
padding: 5px;
background: #ececec;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.bbb li img{
width: 150px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
Safari OUTPUT:
aaa:
bbb:
<ul class="aaa">
<li><img src="http://placehold.it/150x150" /></li>
</ul>
<ul class="bbb">
<li><div><img src="http://placehold.it/150x150" /></div></li>
</ul>
CSS:
.aaa li{
display: inline-block;
width: 160px;
}
.aaa li img{
width: 150px;
border: 5px solid #ececec;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
CSS:
.bbb li{display: inline-block;
width: 160px;
}
.bbb li div{
width: 150px;
padding: 5px;
background: #ececec;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.bbb li img{
width: 150px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
Safari OUTPUT:
aaa:
bbb:
nelson, 2014/11/10 下午 03:48:03
location.reload()
Chrome 最新的版本
會把 本來的表單重送，所以我在
UW.WU.ShowMessageAndRefresh
更改為
Chrome 最新的版本
會把 本來的表單重送，所以我在
UW.WU.ShowMessageAndRefresh
System.Web.HttpContext.Current.Response.Write("location.reload()" & vbCrLf)
更改為
System.Web.HttpContext.Current.Response.Write("location.href=location.href" & vbCrLf)
瞇瞇, 2014/10/20 下午 03:17:32
使用CSS Media Query可以實現響應式網頁設計（Responsive Web Design）
但是在眾多瀏覽器中唯有IE這個萬惡瀏覽器到 IE9 及之後的版本才支援 CSS Media Query，不過有辦法可以讓 IE6 到 IE8 支援 Media Query 語法，那就是 Respond.js。
要注意的地方是：respond.js要放在css下面(順序有關係)
例：
Demo
下載地址：Respond.js
但是在眾多瀏覽器中唯有IE這個萬惡瀏覽器到 IE9 及之後的版本才支援 CSS Media Query，不過有辦法可以讓 IE6 到 IE8 支援 Media Query 語法，那就是 Respond.js。
要注意的地方是：respond.js要放在css下面(順序有關係)
例：
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="js/respond.min.js"></script>
Demo
下載地址：Respond.js
nelson, 2014/9/26 上午 11:25:45
有的時候jquery會用到取代標籤的方式
有的時候jquery會用到取代標籤的方式
<div id="testId">我是原本文字</div>
以下兩個都是innerHTML
document.getElementById('testId').innerHTML = "我是之後文字";
$('#testId').html("我是之後文字");
以下兩個都是outerHTML
document.getElementById('testId').outerHTML = "<div id="我是原本Id">我是原本文字</div>";
$('#testId').replaceWith("<div id="我是原本Id">我是原本文字</div>");
但是有時候～我們並不是要取代～而是想單純得到html含標籤的內容～
$('#testId').clone().wrap('<div>').parent().html()
document.getElementById('testId').innerHTML = "我是之後文字";
$('#testId').html("我是之後文字");
document.getElementById('testId').outerHTML = "<div id="我是原本Id">我是原本文字</div>";
$('#testId').replaceWith("<div id="我是原本Id">我是原本文字</div>");
但是有時候～我們並不是要取代～而是想單純得到html含標籤的內容～
$('#testId').clone().wrap('<div>').parent().html()
Doug, 2014/8/11 上午 10:50:29
calc()是CSS3的一個計算長度單位的新功能，能使用數學四則運算方式。
1. 使用“+”“-”“*”“/”四則運算；
2. 可以使用百分比、px、em、rem等單位；
3. 可以混合使用各種單位進行計算。
例：
.thing {
width: 90%; /* fallback if needed */
width: calc(100% - 10px);
width: calc((100% - 12px) / 2);
width: calc(100%/3 - 2*1em - 2*1px);
}
4. 使用時，"+" & "-" 兩邊需加空格(一定要加)， "*" & "/"兩邊是不用加空格(要加也是可以)
5. 瀏覽器的支援：IE9+ , Firefox4.0+ , Chrome , Safari , iOS Safari6.0+ , Android Browser 4.4+
寫法： width: -moz-calc((100% - 12px) / 2);
width: -webkit-calc((100% - 12px) / 2);
width: calc((100% - 12px) / 2);
nelson, 2014/7/8 上午 10:23:38
在PC版網站上，由於記憶體很大，background-image的圖，沒有甚麼大小限制，但在手機網站上，由於各家手機記憶體不一，
以iPhone 3GS為例，記憶體只有256mb，所以apple有限制背景圖的大小，以下是原文出處連結
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html
大致上來說，iPhone記憶體若是低於256mb 圖片最大不能超過3百萬畫素(長x寬的總像素)，但實際上測試iPhone 3GS在ios6系統上，若是超過2百萬畫素，就會無法正常顯示，這是iPhone的bug。
以iPhone 3GS為例，記憶體只有256mb，所以apple有限制背景圖的大小，以下是原文出處連結
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html
大致上來說，iPhone記憶體若是低於256mb 圖片最大不能超過3百萬畫素(長x寬的總像素)，但實際上測試iPhone 3GS在ios6系統上，若是超過2百萬畫素，就會無法正常顯示，這是iPhone的bug。
nelson, 2014/7/7 下午 03:35:27
IE8 和 IE9 預設沒有 console 物件，若是在 javascript 中有加入 console.log 時，會卡住，解決辨法是做個假的出來。如下:
//避免 console.log 發生錯誤.
if (typeof console == "undefined") var console = { log: function () { } };
else if (typeof console.log == "undefined") console.log = function () { };
//避免 console.log 發生錯誤.
if (typeof console == "undefined") var console = { log: function () { } };
else if (typeof console.log == "undefined") console.log = function () { };
Bike, 2014/6/26 下午 07:54:10
由於偶爾會有需要在 <body> 最上方塞入一些 html
例如塞入一個要置頂的 div 區塊
目前這個區塊只有 {DebugMessage}
所以在 master.html 增加一個新的項目 叫做 <!--BodyTop-->
UW.TBase 增加一個 Public 變數 strBodyTop
如此一般網頁使用時 就可以置入置頂的內容 注意:是塞入html
使用上 於 PreRender 時
例如塞入一個要置頂的 div 區塊
目前這個區塊只有 {DebugMessage}
所以在 master.html 增加一個新的項目 叫做 <!--BodyTop-->
<body> <!--BodyTop--> {DebugMessage} <a id="anchorGoTop" href="#gotop" class="gotop" style="display: none;"><span><em></em></span></a>
UW.TBase 增加一個 Public 變數 strBodyTop
如此一般網頁使用時 就可以置入置頂的內容 注意:是塞入html
使用上 於 PreRender 時
'購物button區塊置於 <body> 正下方 Me.strBodyTop = Me.otContent.SubTemplate("BuyButtonArea").Result就可以了
darren, 2014/6/20 上午 10:57:30
修改QC檢查站,新增效期檢查功能,因需要在動態產生的產品品項加上效期檢查鈕,每次動態產生的項目都要為按鈕元素綁定
觸發ajax檢查效期事件,原先的作法是每次動態產生的同時,為該元素綁定一次事件,品項有幾項就要做相同的綁定次數,後來在網路上看到另外一種寫法,利用DOM事件會由子元素一路向父元素Bubble Up的特性,在document或特定元素統一掛上事件函數，事件被觸發時再透過選擇器比對事件目標元素是否吻合，決定要不要執行事件邏輯，藉此提升效率，同時還能將"未來才會產生的元素"也納入事件的涵蓋範圍,以下是範例:
在這邊利用事件冒泡的特性,藉由頁面載入完成的同時對父元素作事件委託處理,接下來不管產生幾個動態元素,都可以透過事件監聽判斷該函式是否該執行,原先如果動態產生一百個品項就要綁定一百次的事件,只要頁面載入完成後一次就完成,達到有效率的寫法!!
觸發ajax檢查效期事件,原先的作法是每次動態產生的同時,為該元素綁定一次事件,品項有幾項就要做相同的綁定次數,後來在網路上看到另外一種寫法,利用DOM事件會由子元素一路向父元素Bubble Up的特性,在document或特定元素統一掛上事件函數，事件被觸發時再透過選擇器比對事件目標元素是否吻合，決定要不要執行事件邏輯，藉此提升效率，同時還能將"未來才會產生的元素"也納入事件的涵蓋範圍,以下是範例:
$(document).ready(function () {
//原先的寫法:
$("td").bind("click", function(){
$(this).toggleClass("click");
});
//事件委託:
$("table").delegate("td","click", function(){
$(this).toggleClass("click");
});
})在這邊利用事件冒泡的特性,藉由頁面載入完成的同時對父元素作事件委託處理,接下來不管產生幾個動態元素,都可以透過事件監聽判斷該函式是否該執行,原先如果動態產生一百個品項就要綁定一百次的事件,只要頁面載入完成後一次就完成,達到有效率的寫法!!
jimmy, 2014/4/4 下午 05:04:07