什麼是響應式設計？

拜行動裝置上網普及，因此目前 Responsive Web Design 響應式設計 這個 Web 設計方式很熱門，而要做到這個設計，必須要先認識CSS3 Media Queries，這個可以讓你根據裝置或瀏覽器的長寬不同，而可以有不同的CSS呈現，比方，當夠寬的時候，會呈現三個Column（不是真的欄，是排版的欄）。縮小的時候，可能剩下兩個或甚至一個，而原本有橫向的多個選項，也可能被合併成一個按鈕或LIST，點了才會展開，......等等

所以，什麼是響應式設計呢？就是會彈性的根據你裝置的尺寸不同，呈現不同的外觀，相同的內容，並讓使用者在最適當的、最少需要用手指放大滑動的一種設計概念。

更改 JQuery UI Dialog 的標題 Title （在已經 Create 了之後）

第一時間想到的是更改該 Div 的 Title 屬性，但是，不是這樣用的，也就是說


<div class = "Div_Message" title = "我是訊息對話框" >

</div>

這個對話框在經過以下建立過程之後

$( '.Div_Message' ).dialog( 
{
autoOpen: false,
resizable: false,
width:500,
height:300,
modal: true
         } );

被$('.Div_Message').dialog( 'open' );把視窗叫出來之前
即便用了$( '.Div_Message' ).prop( "title",  "我把訊息改掉" );也沒有用



因為語法不是這樣用的
被$('.Div_Message').dialog( 'open' );把視窗叫出來之前
應該要$('.Div_Message').dialog('option', 'title', '我把訊息改掉'); 才對

2 3 4 5

// getter var title = $( ".selector" ).dialog( "option", "title" ); // setter $( ".selector" ).dialog( "option", "title", "Dialog Title" );

網頁的ComboBox的使用方式

基本上，已經有人寫了非常完整又圖文並茂的介紹了，我就不用再贅述了，請看下拉選單ComboBox詳細介紹文但是怕那天原文刪除，或其他因素，所以我還是會在底下稍微的更簡單的說明一下語法。


1.怎麼做出下拉選單，如下利用HTML語法，可做出三個選項的下拉選單：

 <select id = "ComboBxMonth" >
       <option value = "1" >1月份</option>
       <option value = "2" selected = true >2月份</option>
       <option value = "3" >3月份</option>
 </select>
           

2.下拉選單如何設定預選項目到某一個選項，以及怎麼讓某個項目看得到但是不能選？如下，就會讓1月份無法被選，以及預設選擇2月份：

 <select id = "ComboBxMonth" >
       <option value = "1" disabled="disabled" >1月份</option>
       <option value = "2" selected = "true">2月份</option>
       <option value = "3" >3月份</option>
 </select>
           

3.選取目前下拉選單的選取值，或選項文字：

$('#ComboBxMonth option:selected').val();                                      // 取得數值

$('#ComboBxMonth option:selected').text();                                    // 取得文字


4.指定或取得目前下拉選單元件選到第幾個選項：
$('#ComboBxMonth option:[index=3]').attr('selected', true);      // 設定
$('#ComboBxMonth option:selected').index();                                // 取得


5.增加一個選項：（第一種寫法的JQuery Selector目前還看不懂）
$('#ComboBxMonth).append( $('<option></option>').val('9').text('Test') );

$('#ComboBxMonth).append( '<option value = "9" >Test</option>' );


6.增加一個選項到特定位置：
$('#ComboBxMonth option:eq(2) ).after( $('<option></option>').val('9').text('Test') );

$('#ComboBxMonth option:eq(2) ).after( '<option value = "9" >Test</option>' );


7.如果有某個資料跟下拉選單相符合，則把元件選到該選項：
$('#ComboBxMonth option[ value = ' + "2月份" + ']' ).prop( "selected", "true" );

紅色的部分，非常容易寫錯，因為夾雜了變數進去串

8.清除所有選項：
$('#ComboBxMonth option').remove();

9.清除第幾個選項：
$('#ComboBxMonth option:eq(2)').remove();

10.清除特定Value的那個選項：
$('#ComboBxMonth option[ value = 2 ]').remove();


11.想清除符合某個文字的選項？目前找到沒有方便的作法....

網頁上要透過JS取得物件的left或top，請先讓他出現在畫面上

如果該物件（比方div、img、h4）的狀態是被hide起來，並沒有顯示在畫面上
那麼透過JQuery去取得該物件的位置，比方$(this).position().left將會得到0
你一定要先讓物件show()在畫面上，才能去取得或設定他的位置。

jquery-1.10.2.min.map not found

最近更新了JQuery的使用版本，從1.7改用到1.9、1.10
發現了一些影響不大的DEBUG的訊息
比方：「 jquery-1.10.2.min.map not found 」

上網查詢了一下
這是因為我有漏（或是亂刪）該存在的檔案
而這個.map的檔案，是用來讓DEBUG的時候可以看懂JQuery的程式碼，因為通常jquery-1.10.2.min.js這種.min.js的JQuery的JS檔是經過壓縮的，而.map檔案就是紀錄著被壓縮的TAG的位置，這可以讓Chrome瀏覽器可以使用這個檔案，把被壓成了沒有籪行的、無法識別的亂碼在DEBUG模式之下還能看到程式的原有格式。

$.browser這個物件在JQuery 1.9版過後就被拿掉了

$.browser這個物件在JQuery 1.9版過後就被拿掉了，變成以其他的Plug-in的方式存在，有人提到，這可能是一種建議，希望避免開發者去偵測判斷瀏覽器。

如果引用了JQuery 1.9版之後的版本，在瀏覽器（特別指Chrome）執行並偵錯時，會看到以下錯誤的。
$.browser.msie cannot read property 'msie' of undefined

$(function() 是甚麼意思？

之前一直看不懂$(function() ，所以很多JQuery UI也都沒有在用，現在終於瞭解了，$(function() 等同於$(document).ready()


$(function() 
{
    $( "#datepicker" ).datepicker();
});

等同於

$(document).ready(function() 
{
    $( "#datepicker" ).datepicker();
});

也就是網頁好了之後，立刻執行的Function。

如何讓一個DIV包含另外一個DIV ------ 如何控制網頁元素（Tag element）讓元素從原本的位置（指的是親子位置）變更到其他位置

我在設計網頁的時候，經常會需要用一個Design的DIV來試著排版，但這內容可能在一開始得隱藏，並且之後是在按下按鈕之後才出現在PAGE的主要DIV當中，所以得用JS來動態的在按鈕事件中將物件元素搬移或加入到另外一個DIV中。

原本以為會用到的是 JQuery 的 add()，但是跟想像的有所差異

add()是用來把指定的元素加入自己所在的集合，然後一起去做什麼事情。比方說
這個例子，他是把所有的DIV加上邊框，之後包含著<P>元素來做把背景變成黃色。然而，<P>元素本身並不會變更其親子關係，也就是<P>元素如果在其他DIV中，這個關係不會變。




應該要用 JQuery 的 append(), prepend(), after(), before()來做，才是真正的把元素加到某個元素中。差異說明（請先下載範例）：




畫面被分割成上、中、下：Div_Header、Div_Content、Div_Footer三個區塊，每個區塊各自放了一些方塊，而「我會被搬走」這個方塊則是在按下上方的按鈕之後，會被移動，可從上方的藍色框線看出Div_Header的範圍，進而判斷出是否DivAdd01在Div_Header之中。

1.比方我要把DivAdd01這個ID的DIV放到Div_Header中，則該使用append(),跟prepend(),兩個函式，會把DivAdd01加到Div_Header中，並決定放置在最後或最前面的位置。

2.另外，after(), before()則是會把DivAdd01加到Div_Header的父親層，讓DivAdd01跟Div_Header處於同一層，然後差異也在於放在之前或之後。

3.按下add按鈕，則會把left連同Top_left，具有這兩個class的元素都會被設定為被景色白色。

AJAX簡單說

介紹一下最簡單的AJAX模式，看前端如何跟後端溝通，然後讓前端只更新部分畫面，而不會重刷（Reflash），作法很簡單，請先下載範例程式。從client.html中可以看到裡面很簡單，有個按鈕，會觸發JS的function，去做AJAX，而那個JS的function可以從client.js當中看出來，他有一個JQuery提供的,ajax特定格式跟語法。知道了之後，就非常簡單。

利用JQuery提供的,ajax()函式，寫好url : ，告訴程式要呼叫後端哪個PHP，error : 當Ajax失敗，則執行這個函式，看要怎麼顯示給使用者都可以。success : 則是當數值傳回來時要怎麼運作，比方這裡是把#msg那個DIV所包含的子元件替換成PHP回傳的數值：Hello Ajax字串。這樣就不會整頁重刷，而只是更新某些元件，也就即時的更新整個頁面的某一小塊罷了。

還能透過JQuery所提供的 fade in 跟 fade out特效，來達成更完美的更新。

Html下拉選單ComboBox的Width不精準的問題

這是個目前沒有好解法的問題，這相信一般人碰到機會或許不到，因為現在大多數的人排版網頁應該會用相對位置，而非絕對位置，也不太會有老闆跟我老闆一樣，要你一個Pixel也不能歪掉的對齊。（拿尺在螢幕上量是家常便飯）不過既然發生了，我就記錄一下，以免後來忘記。


ComboBox下拉式選單在HTML4的語法是這樣

<select name="thelist" class="Language">
  <option>English</option>
  <option>繁體中文</option>
  <option>簡体中文</option>
</select> 

在HTML5的語法是這樣

<input type=text list=browsers >
<datalist id=browsers >
   <option> Google
   <option> IE9
</datalist>

而HTML5的作法相當彈性，如果按照這個初始值來設定，出來的下拉選單會非常的陽春，而且只是個DropDown元件，可編輯，外觀看起來又像是TextInput元件，所以我採用HTML4的作法。

而我做出這個元件之後，由於要對齊於背景圖，採用絕對位置，所以我需要在JavaScript去計算Left位置，所以我需要去透過JQuery去抓Language這個select元件的寬度，一抓，發現各家瀏覽器抓出來的數值差很大，Chrome跟IE比較接近，但稍有幾個Pixels的誤差，而Safari差的可多了，造成計算位置大錯誤。
解法：

我原本是不設定此物件的寬度，由文字個數跟Font-Size來決定寬度就好，而上述的抓寬度出來的數值錯誤，只好改為，我在CSS當中自己先設定了Width，（當然，這裡要實驗個幾次，在各瀏覽器確實都能正確顯示，這寬度才合適），然後在JavaScript就不用透過JQuery去抓寬度，而是直接用剛剛的固定寬度來計算就好，這樣才能得到正確的位置。

JQUERY引入時的兩三事

JQuery真的很方便，不過，引用的時候有時候會忘記小細節
比方底下的案例：

<script type="text/javascript" src="sample.js"></script>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

如果你的 jquery-1.7.1.min.js （如果以後有更新版本，那數字部分可能不相同）並非第一個引入，那你在sample.js想用JQuery的語法，就會被告知： '$' 未經定義

大多數人應該不會犯這樣的錯誤
但是偶而如果發現，寫好的涵式、事件沒有被正確觸發，而DEBUG的時候發現這樣的訊息，應該第一個可以研判，是引入的順序有錯了。