一步一腳印工作札記

這裡利用 forEach 及加入 function  toggleOpen  來改變所有子元素字體大小顏色，只要一旦在文字上按下，字體會變大及改變顏色。 HTML: <div class="panels">   <div class="panel panel1">123</div>   <div class="panel panel2">123</div>   <div class="panel panel3">123</div>   <div class="panel panel4">123</div>   <div class="panel panel5">123</div> </div> CSS: . tyy {  color: red;   font-size:80px; } JavaScript: const panels = document.querySelectorAll('.panel'); function toggleOpen () {   this.classList.toggle('tyy');   // 或可以直接寫成   this.style.color = "red";   this.style.fontSize = "80px";   this.style.backgroundColor = "green"; } panels.forEach(panel => panel.addEventListener('click', toggleOpen ));

CSS3 裡面在版面配置中，提供了最新 display:flex 裡面可用的參數屬性相當多，今天無意中發現了比較不同的東西，在這裡記錄下來供大家參考: HTML: <section class="sn">   <header>Header</header>   <main>Main</header>   <nav>Nav</nav>   <footer>H</footer> </section> CSS:   section{          display: flex;           flex-wrap : wrap;   // 支援 flex 自動換行   }   section > * {     padding: 1em;     box-sizing : border-box;   // 使用 border-box 模式   }   header{       flex-basis : 100%;    //  佔滿一整行       order: 1;                   //   order 用來顯示呈現畫面的順序，序號由 1 開始   }   main{       flex-grow : 1;    //  讓 main 佔據  1/4 (4 是由 main & nav 合起來計算)       order: 2;   }   nav{        flex-grow : 3;     //  讓 nav 佔據  3/4 (4 是由 main & nav 合起來計算)       order: 3;  }  footer{       flex-basis: 100%;       order: 4; }

利用不同的 JS 元件來製作有如動畫效果的圖片，下面範例介紹一款好用的動畫效果的 js framework (GreenSock)，GreenSock 裡面常用到 4種: TweenMax 、 TweenLite 、 TimelineLite 還有 TimelineMax ， 底下利用 TweenMax 來做介紹(先講最後的效果就是當圖被點繫到時，會自動從大圖縮到小圖).. 1. 首先引用 cdn 來載入 Tween(沒引入那就GG了 ...): https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js 2. 加入程式碼: HTML: <p style="text-align:center"><img id= "pic" src="https://i.zzz.com/xxx.jpg" onClick="scaleSmall()" /></p>     // 路徑照片 xxx.jpg 請自行置換 <p style="text-align:center">請點擊照片</p> JavaScript:  function scaleSmall(){ var photo = document.getElementById("pic"); TweenMax.to(photo, 10, {width:150, height:100});     // 圖縮至 width  height 大小 }

MVC 中要使用 JavaScript Alert 和一般在寫 WebForm 是差很多的， 在一般 ASP.NET WebForm 中我們可以在 C# Code 加入 Response.Write("<script>alert("這是簡單範例")</script>"); 或用 RegisterStartupScript 、RegisterClientInclude 等等方式.. 那 MVC 如何呼叫呢?基本介紹幾個範例如下 1. 利用 TempData 一次性資料暫存記錄 Controller: public ActionResult Example()         {             return View();         }         public ActionResult DisplayMessage()         {             TempData["message"] = "這是一個簡單的範例";             return RedirectToAction("Example", "Home");         } View: @{     ViewBag.Title = "Example"; } <h2>Example</h2> @Html.ActionLink("Click Me", "DisplayMessage") <br/> // 判斷一次性 @if (TempData["message"] != null) {      <script>          var message = @Html.Raw(Json.Encode(TempData["message"]));          alert(message);      </script> } 2. 利用 Ajax 及 JSON 格式傳遞格式後由前端處理 V

介紹透過 Entity Framework 讀取資料庫內容，說明整個 Model & View 如何直接對現在 DB Table 做欄位 ORM (Object Relational Mapping)，範例中抓取資料庫欄位 MrkId(股票代號)、StkName(股票代號)後，顯示於網頁畫面。 Step 1. 在專案 Models 中建立資料庫 .edmx 選擇ADO.NET實體資料模型 選擇第一個 EF(也就是 Entility Framework) 決定資料庫連線及在 Web.Config 中是否加入ConnectionString 名稱 選擇所要對應到的資料庫 Table 從方案總管中就可以看到完成的 edmx Step 2. Controller 中這裡為使用 HomeController.cs => Index Action加入:  public class HomeController : Controller     {         public ActionResult Index()         {             List<Models. TS_StockTickData > result = new List<Models. TS_StockTickData >(); using (Models.TSDATAEntities2 tse = new Models.TSDATAEntities2())                 result = (from s in tse.TS_StockTickData select s).ToList();   // 將所有抓到的 Row 內容寫入到 List( ) 中回傳給 View                  return View(result);             }         } Step 3. View 中的 Index.cshtml 加入: @model IEnumerable<MVCApplication1.Models.TS_StockDataTemp>  <table> @for

最近想在 ASP.NET 專案使用 SASS 取替自己寫了很久的 CSS(畢竟少打很多字也有更多的彈性)，突然才發現 SASS 語法又忘了一大半，不過在 ASP.NET 上好像.sass 不支援 intellisense ，有人會的話也請不吝賜教，這裡留個簡單例子來提醒快半腦殘的自己^^。言歸正傳，SASS 其實最終需要再解析回 CSS 但在寫法上不但支援 SCSS @變數，利用 tab 嵌入以減少使用大括號的寫法，更是讓 SASS 成為攻城獅學會後再也無法接受CSS 的一大要素。下面例子為一個簡單的 TabSelect 並讓其具有 hover 的特性，游標指到時字體Color 改為黃色並向上 1em 顯示.. HTML: <ul>   <li>Hello1</li>   <li>Hello2</li>   <li>Hello3</li>   <li>Hello4</li>   <li>Hello5</li> </ul> SASS: body,html   background: black ul   display: flex   list-style: none   align-items: center   align-content: center   vertical-align: middle   margin: 50px   padding: 12px   width: 850px   height: 150px   li         width: 150px     margin: 5px     padding: 12px     text-align: center     &:nth-of-type(1),     // & 指 parent，這裡就是指 li     &:nth-of-type(2),     &:nth-of-type(3),     &:nth-of-type(4),     &:nth-of-type(5)         color: blue