【HTML】disabled

説明 disabled是input相關屬性,可以讓input的內容無法編輯、修改。 若text input裡面有文字(value內容),則使用者無法修改 若radio button / checkbox預設為勾選,則使用者無法取消勾選 若radio button / checkbox預設為不勾選,則使用者無法勾選他 範例 text <input type=”text” value=”fixed text” disabled /> radio button <input name=”rd-dis” type=”radio”checked disabled/> <label>radio one</label> <input name=”rd-dis” type=”radio” disabled/> <label>radio two</label> radio one radio two checkbox <input type=”checkbox” checked disabled/> <label>checkbox one</label> <input type=”checkbox” disabled/> <label>checkbox two</label> checkbox one checkbox two select […]

【HTML】ruby tag 注音表記

説明 顯示國字的注音(或是日文的假名) 範例 基本用法 文字主體ーrb tag (ruby body) 注音標示ーrt tag (ruby text) ruby rb 木霊 //文字主體 rt こだま //注音標示 Display 木霊こだま 跨瀏覽器用法 有瀏覽器無法讀取ruby tag時,可以使用以下方法解決 rp tag (ruby parentheses)包覆rt tag ruby rb 木霊 rp ( rt こだま rp ) Display 木霊(こだま)

ATTR + JS 語系切換

原理 把其他語言 + 本來的語言存在屬性 attr 裡面 用 JS 的 dataset 將文字改為屬性的資料 範例 h3(data-en=”Languages Changing”, data-jp=”言語を選択”, data-ch=”語系切換”) Languages Changing p(data-en=”some text”, data-jp=”テキストです”, data-ch=”一段文字”) some text button#ch CH button#en EN button#jp JP //選取有文字的元素 var texts=document.querySelectorAll(“[data-en]”); //轉換語言函數 function changeLang(par,lan){ par.innerHTML=lan; } document.querySelector(“#ch”).addEventListener(“click”, function(){ texts.forEach(text => changeLang(text,text.dataset.ch)); } ) document.querySelector(“#jp”).addEventListener(“click”, function(){ texts.forEach(text => changeLang(text,text.dataset.jp)); } ) document.querySelector(“#en”).addEventListener(“click”, function(){ texts.forEach(text […]

JavaScript dataset

原理 將指定元素的屬性 (attr) ,顯示成物件形式 .el(data-color=”green”, data-name=”element”, data-birthday=”0419″, data-constellations=”Aries”) //用dataset,會呼叫所有屬性資訊,並且以物件方式呈現 document.querySelector(“.el”).dataset; /***console.log show below { birthday: “0419”, color: “green”, constellations: “Aries”, name: “element” } ***/ //所以也可以利用物件方式,召喚子項目 document.querySelector(“.el”).dataset.color; //green //也等於這種寫法 document.querySelector(“.el”).getAttribute(“data-color”); //green

内部錨點 Internal Link

結構 製作錨點 用jQuery做出滑順滑動效果 範例 button //加smooth,對應下面的js a.smooth(href=”#next”) click it .blank #next the next box #next width: 200px height: 100px border: 1px solid #000 text-align: center padding-top: 70px .blank height: 100vh function scrollToElement (selector) { $(‘html, body’).animate({ scrollTop: $(selector).offset().top }, 2000); }; $(document).on(‘click’, ‘a.smooth’, function () { scrollToElement($(this).attr(‘href’)); }); Display click it the next box

HTML表單 form

<input>  單行文字 type:類型 name:欄位名稱(取名) placeholder:預設値 required:必填 <input type=”text” name=”firstname” placeholder=”姓名” required=”true”> Display <textarea>  多行文字 <textarea name=”comment” placeholder=”意見” required=”true”> Display <input>  送出按鈕 type=””submit”(預設顯示文字為submit/提交) <input type=”submit” name=”send” required=”true”> Display <input>  更改提交文字 value=”註冊”(把提交改為註冊) <input type=”submit” name=”send” required=”true” value=”註冊”> Display

JADE

屬性 a(href=”https://goo.gl/AQjiva”) <a href=”https://goo.gl/AQjiva”></a> 元素内文 a this-is-link <a>this-is-link</a> 有些跟EMMET差不多 div+class .namecard <div class=”namecard”></div> div+多class .circle1.circle2 <div class=”circle1 circle2″></div> 比較需要注意的是 包覆:縮排 .namecard .circle.circle1 .circle.circle2 h2 span <div class=”namecard”>  <div class=”circle circle1″></div>  <div class=”circle circle2″></div>  <h2><span></span></h2> </div> 文字太多,程式碼換行 找到換行處,按Enter換行,再按Tab確保換行後的東西包覆在父元素下,然後加上【|】 p this is a paragraph with a lot of |text and we would like to cut them so […]

EMMET

EMMET大全 輸入多元素 h2+hr+p+TAB button <h2></h2> <hr /> <p></p> 包覆 div>h2+hr+p+TAB button <div> <h2></h2> <hr /> <p></p> </div> div省略 .card>h2+hr+p+TAB button <div class=”card”> <h2></h2> <hr /> <p></p> </div> 重複 .card*2>h2+hr+p+TAB button <div class=”card”> <h2></h2> <hr /> <p></p> </div> <div class=”card”> <h2></h2> <hr /> <p></p> </div> 内有文字 .card>h2{標題}+hr+p{内文}+TAB button <div class=”card”> <h2>標題</h2> <hr /> <p>内文</p> </di 重複 […]