- Accordion - example:collapse content | jQuery UI
- 選單可摺疊選項 - jQuery UI Accordion Options Collapsible example - Pure Example
結合MathJax，嘗試在jQuery UI Accordion中放入機率題目
測試中的問題，每台電腦螢幕大小不一致，題目呈現出來的效果差異很大，看到這個demo可以在頁面上控制字體大小後，決定參考這篇文章
這篇讀到的rem，參考網頁設計該用哪種字級單位：px、em或rem？ - Jas9 Taipei.設計誌，em代表M，是字體大小的單位，因為大寫M最飽滿，所以把它當作字的單位，r代表root，rem即root em。用rem的好處是，由於所有網頁元件都共用同一個em單位，所以也不會產生em的疊加問題。
後來想到，就算用jQuery做出這伸縮的div，我應該讓它半透明才對，這樣才有辦法讓我他跟我的WebGL遊戲不互相干擾，於是決定參考這篇來實作半透明的效果
一些HTML的搜尋
- HTML5的lang要設成zh-TW或zh-Hant？│林口電腦醫學院
- zh-tw還是zh-TW : O3noBLOG
- HTML ul li 項目標籤 - Wibibi
- div width dynamic - Google 搜尋
- CSS Layout - Dynamic width DIV - Stack Overflow
- Confused About REM and EM? | Jeremy Church
jQuery的attr參考jQuery 教學 » 屬性與樣式 (Attributes & CSS) - jQuery Tutorial這篇文章以及.attr() | jQuery API中文文档(适用jQuery 1.0 - jQuery 2.0)
- .attr()方法只獲取第一個匹配元素的屬性值。要獲取每個單獨的元素的屬性值， 我們需要依靠jQuery的.each()或者.map()方法循環。
如我們上面的截圖所示，
$(".module").prepend("<div class='module-control font-size-control'>Module:<input type='range'></div>");
，我們在DOM的每一個擁有module class的elements都加入了div，div裡有著<input type='range'>。估狗讀到HTML5表單Input型態 | 摩刻部落這篇才知道，用了<input type='range'>就能生出我們要的拖曳條，以測試過無論是<input type='range'>還是<input type='range'/>都可以用。<input type='range'>的操作
- max="最大值"：指定欄位的最大值。只有在 type 是 number、range 或 date pickers 時有效。type等於range時，若不指定則預設值為100。
- min="最小值"：指定欄位的最小值。只有在 type 是 number、range 或 date pickers 時有效。type等於range時，若不指定則預設值為0。
以前只會用div tag，看了發現有demo後發現還有article tag、 section tag，讀到如何設計出正確語意的 HTML5 | Blog.XDite.net這篇才知道根據你一個區塊想要傳達的內容來決定，如果你不知道該怎麼定義的話：可以先都使用 article 去定義一段文本。如果它是一段「相關文本」，可以使用 section。因為 article 的語意比較多樣，而 section 則窄的多。而如果這段內容它「沒有任何語意上」的意義，再使用 div。
現在我們回頭來修改jQuery UI Accordion & MathJax | CodePen的內容，實作於 jQuery UI Accordion & MathJax 2 | CodePen，成功。
為了要更方便筆記demo我決定fork此demo，並將筆記內容紀錄於Em AND Rem WG noting | CodePen。
查看 Rem WG noting | CodePen時發現有data-font-size-in-rem這個沒看過的attritube，估狗之後發現HTML5可以自定義屬性，參考
參考 Rem WG noting | CodePen來做拖曳Bar的拉條，學習得差不多後fork jQuery UI Accordion & MathJax 2 | CodePen ，然後實作於Accordion & MathJax add input range | CodePen，成功。背景透明化，成功。字改灰色，成功。
(以下2014/12/23新增)
現在參考Retractable Dialog with MathJax | CodePen、querySelector practice | CodePen，然後fork Accordion & MathJax add input range，將兩者結合，實作於 Retractable Dialog add Accordion & MathJax ，成功。
實作於 Retractable Dialog add Accordion & MathJax 成功的內容，實作在自己電腦，位置：D:\work\WebGL Learning\WG.dialog\Retractable Dialog with Accordion and MathJax.html，成功。
後來想想把 Retractable Dialog放在<div id='infoPopup'> tag裡的做法實在有點笨，直接讓Retractable Dialog能夠pop up 就好啦。以此概念 fork Retractable Dialog add Accordion & MathJax ，實作於Accordion direct pop up | CodePen，成功。
現在將實作於Accordion direct pop up | CodePen的成功經驗，自己電腦實作於D:\work\WebGL Learning\WG.dialog\Retractable Dialog pop up.html，成功。
現在，要學習外鑲CSS，學習資源如下：
一開始先讀CSS 套用方式 - 1Keydata CSS 語法教學，接著讀CSS 套用方式 | 魚躍創意時才知道，大部份的設計師最常用外部連接套用 Apply，也就是<link rel="stylesheet" href="style.css" />。我們最早接觸到Mike-map時使用的是內嵌套用 Internal，用style tag來控制CSS內容。
剛剛在構思要如何把CSS存放在網路上，後來想起CodePen有提供這服務，現在以Accordion direct pop up為例
接著，我們要讓我們畫面的左邊由上而下列滿12個infoButtons，每個infoButton的彈出視窗，就是我們的機率題目與答案。因為要修改每個infoButton的位置，
最初決定把infoButtons寫在左手邊，由上而下12題題目的infoButtons，後來發現會與我的題目欄相衝，決定改寫在上面。最初實作時傻傻地，想說相似的CSS重覆寫，只為了控制位置實在很蠢，後來參考CSS 一般問題 - CSS | MDN這篇文章時想到，最初來自於Accordion direct pop up的infoButton由於只有一個，所以給他id attritube，但現在我們實作tweleve Accordions | CodePen時，由於我們要設重複12個infoButtons，所以我們該把infoButtons改成class atritube，然後透過我們曾在CSS 套用方式 | 魚躍創意看過的，用內嵌套用 Internal的style tag來控制infoButtons的位置，成功改變第二個infoButton的位置而不用多寫code，實作於tweleve Accordions | CodePen。
接著，我們可以透過曾在.attr() | jQuery API中文文档(适用jQuery 1.0 - jQuery 2.0)看過的構想來實作
參考HTML DOM querySelectorAll() Method的paradigm確定可以抓到class
後來發現無法用quertySelectAll()
Loop Over querySelectorAll Matches | CSS-Tricks
[JavaScript] document.querySelectorAll 的 forEach - Shiny這篇幾乎與上面那篇相同
實作於select elements | CodePen，成功。
HTML DOM getElementsByClassName() Method的paradigm
fork select elements | CodePen，來控制位置，實作於select elements control positions | CodePen，失敗。
以[JavaScript] document.querySelectorAll 的 forEach - Shiny的構想，讓每一個infoButton都能夠開啟題目，參考select elements | CodePen與tweleve Accordions | CodePen，實作於use queryselector set divs pop up | CodePen，成功。
想透過javascript改變動態改變Retractable Dialog的內容，參考JavaScript HTML DOM Changing HTML Content的paradigm，實作於select elements | CodePen，成功改變內文的html內容。
為了要測試，是否能夠定義好DOM裡的element，然後把操作DOM的javascript從外部讀取，實作於external javascript | CodePen，成功從外部讀取javascript來操作DOM裡的elements。
可以寫個if...else if...else來控制Retractable Dialog裡的內容，實作於different infoButton different content | CodePen，失敗。
後來思考，我每個infoButton，他們pop up出來的內容都是各自獨立的，應該用id attribute，我不該用class attritube那樣牽一髮而動全身，最後決定用two Dialogs different contents | CodePen的做法，每個infoButton都用獨立的id attritube，然後用Require.js把每題目與解答各包成一個javascript file，後來參考.append() | jQuery API中文文档(适用jQuery 1.0 - jQuery 2.0)，決定改用append()，以Accordion direct pop up | CodePen為例，在Accordion direct pop up中，我們先定義好<div id="accordion" ></div>，然後依序
append("<h3 class='title' >問題 </h3>")
append("<article class='module'>題目...<article>")
append("<h3 class='title'>step.1 </h3> ")
append("<section class='module'>solution step.1 內容</section>")
append("<h3 class='title'>step.2 </h3> ")
append("<section class='module'>solution step.2 內容</section>")
append("<h3 class='title'>step.3 </h3> )
append("<section class='module'>solution step.3 內容</section>")
藉由這些步驟，完成infoButton1的所要pop up出來的內容，infoButton1~12以此類推，把操作DOM elements的script另外包到一個javascript file，從外部去讀，就像external javascript | Codepen，這樣的做法CSS也會很龐大，也必須外包，就像Accordion use external CSS | Codepen。
dynamic <div> content on change <select> [] - 问题-字节技术
(以下2014/12/24新增)
可以用require.js，每個題目的伸縮欄開一javascript file，透過require.js從外部導進來，參考：D:\work\JavaScript\RequireJsPractice\index.html，第一次實作成功於D:\work\WebGL Learning\WG.dialog\dialog by requires_first。
用require.js讀MathJax遇到問題，估狗讀到MathJax with RequireJS, how to set config - Stack Overflow這篇後，發現Mathjax documentation已經在Integrating mathjax into x: require.js · mathjax/MathJax-docs Wiki · GitHub有解釋，後來發現我不會用require.config =..=
備齊以下資料
- RequireJS 使用筆記 « JUST a LOG
- RequireJS进阶:配置文件的学习 - SegmentFault
- Javascript模块化编程（三）：require.js的用法 - 阮一峰的网络日志
- RequireJS异步模块加载 | 粉丝日志
- 前端开发-javascript模块化编程库require.js的用法
- RequireJS 2.0 正式发布 - snandy - 博客园
根據前端开发-javascript模块化编程库require.js的用法這篇，在使用require.config({paths:})時，我們的文件名不需要加.js後綴，否則require.js會找不到文件的。
下午3:55終於成功用require.js讀到MathJax，弄得我都快崩潰了，現在來記錄，實作於：D:\work\WebGL Learning\WG.dialog\Retractable Dialog MathJax use requirejs，這project的內容物如下：
首先要注意一點，以往我們coding要加載外部javascript file都是寫在最上面，但如果要用require.js加載mathJax，就不能夠在一開頭使用script src attritube來加載MathJax
這些成功之後，可以開始實作12個infoButton與並透過require.js，在外部的.js檔用append()來為每個pop up加入內容。
一開始先用兩個infoButton來測試，實作於D:\work\WebGL Learning\WG.dialog\two infoButtons two Accordions，這project的CSS決定放在two infoButtons two Accordions's CSS | CodePen，這CSS與這project實作的構想最初是參考two Dialogs different contents | CodePen，append()的寫法請見上面12/23討論的內容，直接pop up出Accordition請參考Accordion direct pop up | CodePen。
原本打算在append()時直接添加題目與解答內容，但是發現會顯示失敗，參考javascript - How to replace innerHTML of a div using jQuery? - Stack Overflow這篇後，決定改用$('#id').html("text content")，fail，一樣會顯示失敗，且文字難以排版
D:\work\WebGL Learning\WG.dialog\two infoButtons two Accordions這project的構想確定失敗了，只能採用D:\work\WebGL Learning\WG.dialog\Retractable Dialog MathJax use requirejs這project的構想，讓我們的.html file以顯示DOM elements為主，且要把WG-Map的code放在require.js，從外部import進來，已實作於D:\work\WebGL Learning\WG.dialog\content all in DOM control by external js，成功。
現在要把WG-map改寫成像是這樣的操作D:\work\WebGL Learning\WG.dialog\content all in DOM control by external js方式。第一步，先讓WG-map加入題目選項，已經於D:\work\WebGL Learning\WG-map editions\WG-map 2nd - add 12 dialogs，成功在WG-Map加入12個題目選項。
(以下2014/12/25新增)
現在，我們要為WG-map加入觸發事件，可以參考過去曾實作過的這個project：
D:\work\WebGL Learning\WG.minecraft\examples\collider and div.html，現在準備讓我們的WG-Map的世界，以WG初登場時為圓心，身邊繞著12隻動物，一個動物是一個題目與答案，每觸碰到一隻動物，就會開啟這道題目，從動物身體離開，就會關閉這道題目。
關於threex.collider的引用
這兩個可以用require.js從外部引進來
<script src='../vendor_collider/threex.colliders.js'></script>
<script src='../vendor_collider/threex.colliderhelper.js'></script>
要特別注意，必須要特別引用threex.collider裡的three.js，為了做區隔，在D:\work\WebGL Learning\WG.minecraft\examples\collider and div.html裡，我是引用存放在vender資料夾的<script src='../vendor/three_collider.js'></script>。
到了我們現在要實作的D:\work\WebGL Learning\WG.collider\WG.collider.1st，我是把當初未碰撞專門寫的three.js改名為threejs_for_collider.js，路徑：
D:\work\WebGL Learning\WG.collider\WG.collider.1st\vendor\three.js\build\threejs_for_collider.js。
為了不要搞混與方便使用，決定修正為D:\work\WebGL Learning\WG.collider\WG.collider.1st\bower_components\threex.colliders\threejs_for_collider.js。
成功讀到horse的collider，實作於D:\work\WebGL Learning\WG.collider\WG.collider.1st。
不同的物體，顯示不同的內容，成功，實作於D:\work\WebGL Learning\WG.collider\WG.collider.2nd。
最後，關掉collider的方框，成功，關掉方框的做法很簡單，要開起觸發事件需要有collider，但是我們只需要在collider的觸發事件裡寫入pop up對話框，就能觸發事件，不需要把collider加入動畫的array裡面，這樣就看不到collider的方框了，實作於D:\work\WebGL Learning\WG.collider\WG.collider.3rd。
現在，我們可以回到WG-map，去把所有動物的觸發事件寫完，實作成功，目錄：
D:\work\WebGL Learning\WG-map editions\WG-map 3rd - add collider。
沒有留言:
張貼留言