jQuery DOM Insertion, Inside & Outside

如何控制插入內容相對於對象的位置

jQuery 插入內容時可以使用 append(), prepend(), before(), after() 四個函式,不同的函式插入的位置不同

76 total views, no 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

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() 內再試試看

重新設定

 

76 total views, no views today