jQuery 的 Selectors 較佳用法

PhpStorm

原JavaScript 語法

警告訊息:

Inefficient jQuery usage warnings in PHPStorm IDE

 

修正後語法

 

38 total views, 1 views today

TinyMCE 4 使用

之前使用 CKeditor 作為網頁編輯器,這兩天想要一個〝拖曳圖檔到編輯區套用 base64〞的效果,搞了快一天後沒啥進度後,轉到 TinyMCE 之後,Google 一小下就完成了…

官網: TinyMCE

設定參數及說明在 Configuration 頁面,

停止連結樣式轉換

預設會將連結網址從 “/?a=Test” 修改為 “?a=Test” ,也就是會自動修正 server name ,不過這種自動通常都很出錯可以關閉

複製 Word 貼上時保留格式

100% 開放 HTML 以及 JavaScript

如此就可以在編輯區使用所有 HTML Tag 以及切換到原始碼輸入 JavaScript 代碼

 

使用 CodeMirror 優化原始碼編輯

 

本來原始碼編輯長這樣,沒空白、沒縮行,修改起來非常痛苦

改用 CodeMirror 之後長這樣

自訂 CodeMirror

不使用 TAB 縮排、縮排四個空格、啟用 Tag 對應、啟用折疊功能、開啟行數顯示

 

撰寫 <script> 時關閉自動增加 <p>

實際應用案例

自訂預設選項

CKeditor 有 config.js 的預設設定檔可使用,不過 TinyMCE 4 並無類似的設定 (至少還沒發現),參考 TinyMCE – jQuery Plugin, setting a default Theme/Options Globally 之後得到以下寫法

 

讓編輯區的樣式和前台一致

 

133 total views, 1 views today

MathJax 使用 JavaScript 顯示數學公式

這篇看不懂很正常,沒接觸過出版、教育的人應該很難想像,要在網頁上顯示優美的數學公式是多麼困難的事情。

接觸過的人,大概會認識一個叫 LaTeX 的傢伙,這個時候就會知道 MathJax 的偉大之處了。

官網: MathJax

單純在瀏覽器上顯示 LaTeX 數學公式可以使用此 JavaScript library,需要平面 PDF 輸出才使用 LaTeX 執行

 

範例演示兩個功能

  1. ajax 載入的資料如何套用 MathJax
  2. 如何把所有的 LaTeX 套用 \displaystyle ,參考至:如何将一些html之前和之后使用MathJax数学时呈现How to put some html before and after math when rendering using MathJax (裡面有原出處,我有查到經過,不過看不懂)

 

91 total views, 1 views today

jQuery.validationEngine v2.6.2

作者: jQuery-Validation-Engine

之前使用 jQuery Validation ,在檢索時看到了一張圖

才知道這是另外一個 jQuery Plugin ,對於預設的設計理念來說,jQuery.validationEngine 的錯誤提醒不會破壞原表單排版,比較不需要糾結表單結構設計,尤其是版面元素較多編排緊湊的情況。

程式範例一次演示多個使用場景

  1. Bootstrap 的表單套用
  2. 標準 HTML5 attribute 設定
  3. 正確驗證後使用 XMLHttpRequest() 送出資料

將綁定和驗證分開

使用 attach 和表單綁定,然後使用 validate 驗證表單輸入

 

使用 ajax 和 serialize() 送出表單資料

根據參考資料 serialize() 除了可以將表單完整打包之外,還可以進行過濾,例如

只傳輸有顯示的欄位及 type=’hidden’ 的隱藏欄位

最大字數

Limit the number of characters in a textarea

還是沿用 HTML 的 maxlength=”10″ 設定

中文教程、說明

自訂驗證格式 – 以臺灣手機格式為例

jQuery-Validation-Engine-master/js/languages/jquery.validationEngine-zh_TW.js

原來就有手機號碼的驗證方式,不過因為只有語言中文化,所以手機號碼還是驗證外國的,套用在臺灣手機號碼就是失敗,改一下就好了

使用

根據選擇自訂驗證條件

如果評分小於 7 則必須填寫意見

表單送出

serialize() 不處理 display:none; 不過還是要送出 input type=”hidden”

208 total views, 1 views today

jQuery – jBox

官網 jBox by Stephan Wagner : http://stephanwagner.me/jBox

 

使用 Modal 強制使用關閉按鈕、弱化背景、標題拖曳視窗

應用

 

jBox 的物件化必須注意 DOM 的載入順序,如果發生無法載入 content 的情況,可能就是 DOM 的問題。

將 new jBox 放在 $( document ).ready() 內再試試看

重新設定

 

77 total views, 1 views today

jQuery & HTML5

jQuery UI Datepicker 增加時間 Timepicker

 

開啟顯示週數以及強制選擇第一天

 

只顯示年、月

屬於硬幹的方式,實際使用效果不理想,建議使用其他方案 (2016-03-28)

 

HTML5 Local Storage

建立 UUID  Create GUID / UUID in JavaScript?

Cookie 應用

JavaScript 進階技巧

Namespacing in JavaScript

76 total views, no views today