一步一腳印工作札記

發表文章

目前顯示的是 7月, 2016的文章

使用AJAX 與 C# WebMethod 互通並傳回 JSON 內容

這個範例為 $.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 類別 { public string Title{ get; set; } public string Content{ get; set; } } [System.Web.Services.WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public static string TestFunc() { // 載入內容 NewsItem[] nItems = n

閱讀完整內容

判斷Checkbox中被勾選及未被勾選的數目

如果要使用 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; // 取得己勾選數目

閱讀完整內容

DIV版面配置

網頁版面有相當多種型式(如柵欄型...)，其實只要透過 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:25%; height:100%; background-color:#887766; float:right; } div:nth-child(4){ widt

閱讀完整內容

簡單玩弄 transform & transition

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是一半，這裡只有對 nth-child(odd) 也就是單數 div 做處理，如果想要兩張圖一直換，那就加上處理 nth-child(even) 就行囉 } .pane{ width:15

閱讀完整內容