一步一腳印工作札記

這個範例為 $.ajax 的簡單應用，其實只要多了解、多使用相信可以體會到 $.ajax 的用法: JQuery: function javascriptFunction( ) { $.ajax({  type: "POST",          url: "TestAjax.aspx/TestFunc",          data: JSON.stringify({}),          contentType: "application/json; charset=utf-8",          async: false,          cache: false,          dataType: "json",          success: function (data) {          var jsonData = $.parseJSON(data.d);  // 記得使用 $.parseJSON 處理 data.d          for (int i=0; i < jsonData.Length; i++)              alert(jsonData[i].Title); C#: // 下面為所需宣告 using System.Web; using System.Web.Script.Services; using System.Web.Script.Serialization; ... public class NewsItem   // 建立一個仿 JSON 類別 {       ...

如果要使用 JQuery 找到相關 checkbox 中被勾選及未勾選的數目，一種方法是使用 :Selector 來處理... 範例如下，照走一遍應該就很有心得了。 HTML:   <label><input type="checkbox" name="check00" />One</label>   <label><input type="checkbox" name="check00" />Two</label>   <label><input type="checkbox" name="check00" />Three</label> JQuery: var num1 = $('input[name=check00] :not(:checked) ').length;  // 取得未勾選數目 var num2 = $('input[name=check00] :checked ').length;         // 取得己勾選數目

網頁版面有相當多種型式(如柵欄型...)，其實只要透過 CSS 中的 float 將不同長度及寛度(width & height) 就可設計出不同的版面。對 float 真的要好好了解，它可算設版的最佳好朋友。 HTML: <body>   <div class="one">1</div>   <div class="one">2</div>   <div class="one">3</div>   <div class="one">4</div>   <div class="one">5</div> </body> CSS: body{   width:1000px;   height:250px;   background-color:#ddeecc;   border:2px solid black; } *{   margin:0;   padding:0;   } div{   display:inline-block;   text-align:center;   font-size:20px;   border:0 solid red;   } div:nth-child(1){   width:25%;   height:100%;     background-color:red;   float:left; } div:nth-child(2){   position:relative;   left:0;   width:50%;   height:30%;   background-color:rgba(0,0,255,0.3);   float:left; } div:nth-child(3){  width:2...

CSS3 常用到動畫效果，最重要就是跟 transform & transition 做好朋友，底下範例相信能對 transition & transform 能有基本的認識及了解才對。 HTML: <div id="wrapper"> <div class="paneNest">   <div class="pane">     <div class="face front">       Big     </div>     <div class="face back">       Small     </div>   </div> </div> </div> CSS: *{   -webkit-transition: all 10s;  // 過度效果及所需時間設定 all 指全部效果都處理   -webkit-backface-visibility:hidden; } #wrapper {   width:564px;   height:164px;   position:absolute;   left:60%;   margin-left:-282px;   top:5%; } .paneNest {   display:inline-block; } .paneNest:nth-child(odd):hover .pane {   -webkit-transform: rotatex(-720deg) rotatey(-720deg) rotatez(-720deg)  scale(0.5,0.5); // transform 可以針對 rotateX rotateY rotateZ 三維做出不同旋轉效果，sacle 則為過度後呈現的大小，0.5是一半，這裡只有對 nt...

這個小小的問題，對許多初學 CSS 的朋友來說，可能是大大的頭痛，剛開始學習 CSS 時也是被一堆 display & position & float ... 等等搞的暈頭轉向.. 就簡單的介紹下兩者的不同吧!! HTML: (先弄出兩個 div 出來做測試) <div id="div1"></div> <div id="div2"></div> CSS:  // 這是基本 div 設定 div{   height:100px;   float:left;   border:2px solid black; } #div1{  background:red;   // div1 背景為紅色 } #div2{  background:green;   // div1 背景為綠色 } 範例一:   ( div1 & div2 都使用relative，使用position，雖然 div2 設定了 left:30px; 但是完全不會有效果，這是由於 div2 使用了 absolution ，div2 會依據 div1 中 width:150px; 來決定位置< 也就是位置永遠定在 150px 了 >，並緊貼在後。) #div1{   width:150px;   position: relative ;   left: 40px ;  } #div2{   width:50px;   position: absolution ;   left: 30px ; } 範例二:  ( div1 & div2 都使用relative，div1則會距離左邊留下 40px ，div2 會依據 div1 中 width:150px; 的位置向左 30px ，這時若修改 div1 的大小 width 為 200px，會發現 div2 位置其實就會跑到 200px 再加 div2 中 left:30px; 變成在距離左邊 230px 囉 ^^ ) ...

今天無意中看到一個 CSS3 屬性 pointer-event 可用來對滑鼠點擊部份做特別處理(底下為 hover)， 也許將來用的到，就先記下來，範例中HTML <svg><rect> 後使用 pointer-events: stroke ; 其它功能屬性還有 visible、visibleFill、painted、all 等等，可參考 OXXO 的 http://www.oxxostudio.tw/articles/201409/pointer-events.html 。 HTML: <svg width="200" height="140">   <rect width="100" height="100" fill="#f00" stroke="#000" stroke-width="10" x="20" y="20" id="test"></rect> </svg> CSS: #test{   pointer-events: stroke ; } #test:hover{   fill:#09f; }

最近工作上用到廣告輪播 (boostrap 中的 carousel)，上面要求要能在底圖上顯示文字，後來發現 carousel 中有個 class 叫做 carousel-cpation 就可以直接上字，只是無法對齊圖片中間位置，尋求 google 大神協助下，CSS提供了二個屬性( display:flex & align-items:center )立馬解了我的燃眉之急，flex 使用了 box-model 並讓所有內容置中(align-items:center)就大功告成.. 那還不快寫下來，就對不起它了。 HTML:        <div>             <div id="myCarousel" class="carousel slide" data-ride="carousel">                 <ol class="carousel-indicators">                     <li data-target="#myCarousel" data-slide-to="0" class="active"></li>                     <li data-target="#myCarousel" data-slide-to="1"></li>                 </ol>                 <!-- Wrapper for slides -->         ...