Source: https://github.com/stowball/jQuery-rwdImageMaps

Demo: http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html#bubbles

一個不錯的 Plugin, 只需一行 code 便可令你的 image map responsive, $('img[usemap]').rwdImageMaps();

我們編寫網頁表單時，有時會需要設計一些動態數目的輸入項，在這些情況中，我們通常會使用 jQuery/js 來動態增加輸入框到表單中。可是，今天我卻遇到一個問題，就是用 JS 加入的輸入框的值並沒有送到伺服器端，起初我以為是 JS 的設定錯了，但最終找到原因原來是和 html 的結構有關

以下是 html

<table id="table">
	<form>
	<thead>
		<tr>
			<th>Title</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><input type="text" name="dynamic[]"></td>
		</tr>
	<tbody>
	<tfoot>
		<tr>
			<td><input type="button" id="addmore"></td>
		</tr>
	</tfoot>
	</form>
</table>

JS:

$(document).ready(function() {
	$("#addmore").click(function() { $("tbody",$("#table")).append(''); });
});

令新加的輸入框無法傳送出去的原因是 table 和 form 的次序, 上例中我是把 form 放在 table 的入面, 這樣的情況便會導致提交時表單無法取得新加的輸入框的值, 因為從正確 html 層面上來說, table 中間的內容應該是寫在 td 或 th 中的, 而上例則不規則地在 table 和 td 中間插入 form, 所以便出了錯誤, 解決方法很簡單, 只需將 form 和 table 的次序調轉, 用 form 包住 table 便可以了:

	

		

			

				

					Title
			
		
		

			

				

					
			
		
		

			

				

					
			
		
		

		
	

HTML5 的 placeholder 屬性相信大家都熟悉不過, 但我們常常會很懊惱究竟該不該用他, 事關此屬性直至 IE9 都還未被支援 (相信新出爐的 IE10 應該可以用了吧!! ), 這就意味著所有使用 IE 瀏覽器的用戶都將看不到該提示, 不禁讓我們卻步。

網上有不少人都提供解決方案讓 IE 也能顯示該提示, 而最為常用的方法便是利用 jQuery 將所有 input 的值設定為 placeholder 的內容, 可是這個方法的缺點是提交表單時如果輸入框沒有輸入內容, placeholder 的提示便會被當成內容送出, 這又使得我們不得不多做一重功夫去驗証收到的內容是用戶輸入的內容還是 placeholder 的內容
因此我便在想了一個比較好的方法, 利用 position absolute 的屬性在輸入框上浮著一個提示文字, 當 focus 時便隱藏該提示, 這樣便可做到和 placeholder 一樣的效果又不用設定內容到 input 中了 ．．．．．．．．．．．

jQuery hoverIntent 是一套用以延遲滑鼠 mouseover 和 mouseout 事件的插件, 可有效防止用戶在一個物件上連續觸發多次事件的情況。

傳統的 hover:

$("#layer").hover(function() {
    //mouserover event
},function() {
    //mouserout event
});

使用hoverintent:

$("#layer").hoverIntent({
	interval: 500,
	over: function(){
		//mouserover event
	},
	timeout: 500,
	out: function(){
		//mouserout event
	}
});

當我們使用 jQuery 時, $(document).ready(function() { } ) 幾乎是必經之路。但是, document.ready 是在所有 html 內的元素產生後便會執行, 如果你想要你的網頁在所有元素都完成加載後才顯示出來 ( 即是制作網頁加載中的畫面 ), 那麼你就應該使用 $(window).load(), 它的作用等同於 js 中的 window.onload, 你的代碼將會在所有元素包括圖片及頁框等全部加載後才執行。