jQuery DOM Insertion, Inside & Outside

Posted on 2018-08-01 by hoyo

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

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

<div id="aaa" style="border: 1px solid #aaa;">aaaaa</div>

$('#aaa').before('<div>before 1</div>');

$('#aaa').before('<div>before 2</div>');

$('#aaa').after('<div>after 1</div>');

$('#aaa').after('<div>after 2</div>');

$('#aaa').append('<div>append 1</div>');

$('#aaa').append('<div>append 2</div>');

$('#aaa').prepend('<div>prepend 1</div>');

$('#aaa').prepend('<div>prepend 2</div>');

</script>

—

418 total views, no views today

TinyMCE 4 使用

Posted on 2015-10-29 by hoyo

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

官網： TinyMCE

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

—

停止連結樣式轉換

How do I stop TinyMCE from replacing absolute links with root-relative links?

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

tinymce.init({

selector: "#id_Edit_HTML",

menubar: false,

convert_urls : false,

remove_script_host : false

});

—

複製 Word 貼上時保留格式

Paste from Word to TinyMCE

1 2	paste_word_valid_elements: "b,strong,i,em,h1,h2,u,p,ol,ul,li,a[href],span,color,font-size,font-color,font-family,mark", paste_retain_style_properties: "all",

—

100% 開放 HTML 以及 JavaScript

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

tinymce.init({

selector: "#id_Add_HTML",

//menubar: false,

content_css: "Page/css/custom.css",

language: "zh_TW",

valid_elements : '*[*]',

extended_valid_elements : '*[*]',

entity_encoding : "raw",

init_instance_callback : function(editor) {

// jw: this code is heavily borrowed from tinymce.jquery.js:12231 but modified so that it will

// just remove the escaping and not add it back.

editor.serializer.addNodeFilter('script,style', function(nodes, name) {

var i = nodes.length, node, value, type;

function trim(value) {

/*jshint maxlen:255 */

/*eslint max-len:0 */

return value.replace(/()/g, '\n')

.replace(/^[\r\n]*|[\r\n]*$/g, '')

.replace(/^\s*((<!--)?(\s*\/\/)?\s*<!\[CDATA\[|(<!--\s*)?\/\*\s*<!\[CDATA\[\s*\*\/|(\/\/)?\s*<!--|\/\*\s*<!--\s*\*\/)\s*[\r\n]*/gi, '\n')

.replace(/\s*(\/\*\s*\]\]>\s*\*\/(-->)?|\s*\/\/\s*\]\]>(-->)?|\/\/\s*(-->)?|\]\]>|\/\*\s*-->\s*\*\/|\s*-->\s*)\s*$/g, '\n');

}

while (i--) {

node = nodes[i];

value = node.firstChild ? node.firstChild.value : '';

if (value.length > 0) {

node.firstChild.value = trim(value);

}

});

setup: function (editor) {

editor.on('change', function () {

tinymce.triggerSave();

});

plugins: [

"advlist autolink lists link image charmap preview anchor visualblocks code fullscreen insertdatetime media table contextmenu paste autoresize textcolor fullpage nonbreaking"

paste_data_images: true

});

—

使用 CodeMirror 優化原始碼編輯

tinymce.init({

selector: "#id_Edit_HTML",

menubar: false,

content_css: "Page/css/custom.css",

language: "zh_TW",

valid_elements : '*[*]',

extended_valid_elements : '*[*]',

entity_encoding : "raw",

codemirror: {

indentOnInit: true, // Whether or not to indent code on init.

fullscreen: true, // Default setting is false

path: 'CodeMirror', // Path to CodeMirror distribution

config: { // CodeMirror config object

mode: 'application/x-httpd-php',

lineNumbers: false

width: 800, // Default value is 800

height: 600, // Default value is 550

saveCursorPosition: true, // Insert caret marker

jsFiles: [ // Additional JS files to load

'mode/clike/clike.js',

'mode/php/php.js'

]

init_instance_callback : function(editor) {

// jw: this code is heavily borrowed from tinymce.jquery.js:12231 but modified so that it will

// just remove the escaping and not add it back.

editor.serializer.addNodeFilter('script,style', function(nodes, name) {

var i = nodes.length, node, value, type;

function trim(value) {

/*jshint maxlen:255 */

/*eslint max-len:0 */

return value.replace(/()/g, '\n')

.replace(/^[\r\n]*|[\r\n]*$/g, '')

.replace(/^\s*((<!--)?(\s*\/\/)?\s*<!\[CDATA\[|(<!--\s*)?\/\*\s*<!\[CDATA\[\s*\*\/|(\/\/)?\s*<!--|\/\*\s*<!--\s*\*\/)\s*[\r\n]*/gi, '\n')

.replace(/\s*(\/\*\s*\]\]>\s*\*\/(-->)?|\s*\/\/\s*\]\]>(-->)?|\/\/\s*(-->)?|\]\]>|\/\*\s*-->\s*\*\/|\s*-->\s*)\s*$/g, '\n');

}

while (i--) {

node = nodes[i];

value = node.firstChild ? node.firstChild.value : '';

if (value.length > 0) {

node.firstChild.value = trim(value);

}

});

setup: function (editor) {

editor.on('change', function () {

tinymce.triggerSave();

});

plugins: [

"advlist autolink lists link image charmap preview anchor visualblocks code fullscreen insertdatetime media table contextmenu paste autoresize textcolor fullpage nonbreaking codemirror"

paste_data_images: true

});

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

改用 CodeMirror 之後長這樣

—

自訂 CodeMirror

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

tinymce.init({

selector: "#id_Edit_HTML",

menubar: false, //

content_css: "Page/css/custom.css",

language: "zh_TW",

valid_elements : '*[*]',

extended_valid_elements : '*[*]',

entity_encoding : "raw",

force_br_newlines : false,

force_p_newlines : false,

forced_root_block : '',

paste_word_valid_elements: "b,strong,i,em,h1,h2,u,p,ol,ul,li,a[href],span,color,font-size,font-color,font-family,mark",

paste_retain_style_properties: "all",

codemirror: {

indentOnInit: true, // Whether or not to indent code on init.

fullscreen: true, // Default setting is false

path: 'CodeMirror', // Path to CodeMirror distribution

config: { // CodeMirror config object

mode: 'application/x-httpd-php',

lineNumbers: true,

indentUnit: 4,

//匹配括号

matchBrackets: true,

//匹配标签

matchTags: { bothTags: true },

indentWithTabs: false,

foldGutter: true,

gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],

extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}

width: 800, // Default value is 800

height: 600, // Default value is 550

saveCursorPosition: true, // Insert caret marker

cssFiles: [

'addon/fold/foldgutter.css'

jsFiles: [ // Additional JS files to load

'addon/edit/matchbrackets.js',

'addon/edit/matchtags.js',

'addon/fold/foldcode.js',

'addon/fold/foldgutter.js',

'addon/fold/brace-fold.js',

'addon/fold/xml-fold.js',

'mode/clike/clike.js',

'mode/php/php.js'

]

init_instance_callback : function(editor) {

// jw: this code is heavily borrowed from tinymce.jquery.js:12231 but modified so that it will

// just remove the escaping and not add it back.

editor.serializer.addNodeFilter('script,style', function(nodes, name) {

var i = nodes.length, node, value, type;

function trim(value) {

/*jshint maxlen:255 */

/*eslint max-len:0 */

return value.replace(/()/g, '\n')

.replace(/^[\r\n]*|[\r\n]*$/g, '')

.replace(/^\s*((<!--)?(\s*\/\/)?\s*<!\[CDATA\[|(<!--\s*)?\/\*\s*<!\[CDATA\[\s*\*\/|(\/\/)?\s*<!--|\/\*\s*<!--\s*\*\/)\s*[\r\n]*/gi, '\n')

.replace(/\s*(\/\*\s*\]\]>\s*\*\/(-->)?|\s*\/\/\s*\]\]>(-->)?|\/\/\s*(-->)?|\]\]>|\/\*\s*-->\s*\*\/|\s*-->\s*)\s*$/g, '\n');

}

while (i--) {

node = nodes[i];

value = node.firstChild ? node.firstChild.value : '';

if (value.length > 0) {

node.firstChild.value = trim(value);

}

});

setup: function (editor) {

editor.on('change', function () {

tinymce.triggerSave();

});

plugins: [

"advlist autolink lists link image charmap preview anchor visualblocks code fullscreen insertdatetime media table contextmenu paste autoresize textcolor fullpage nonbreaking codemirror"

paste_data_images: true

});

—

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

tinymce adding p tags automatically?

tinyMCE.init({

mode : "textareas",

theme : "advanced",

force_br_newlines : false,

force_p_newlines : false,

forced_root_block : '',

});

—

實際應用案例

拖曳圖檔，使用 Base64 儲存 tinyMCE can no longer drag and drop images after upgrading from version 3 to version 4
ajax 送出前更新 TinyMCE textarea and post form using ajax
開啟 autoresize 讓編輯區自動調整
設定自動儲存更新

tinymceOptions = {

selector: "textarea",

theme: "modern",

language: "zh_TW", // 設定正體中文，要先下載語言檔

menubar: false, // 關閉功能列

content_css: "/Component_Front/bootstrap-3.3.5-dist/css/bootstrap.min.css", // 設定 CSS 樣式和 Bootstrap 一致

setup: function (editor) {

// 編輯區有更新就儲存更新，確保送出資料一致

editor.on('change', function () {

tinymce.triggerSave();

});

plugins: [

"advlist autolink lists link image charmap print preview anchor",

"searchreplace visualblocks code fullscreen",

"insertdatetime media table contextmenu paste autoresize"

paste_data_images: true

};

tinymce.init(tinymceOptions);

</script>

—

自訂預設選項

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

// 適用全體設定

TinyMceConfig = {

language: "zh_TW",

menubar: false,

content_css: "/Component_Front/bootstrap-3.3.5-dist/css/bootstrap.min.css",

paste_data_images: true

};

// 指定對象，及個別設定

TextArea1 = {

selector: "textarea"

};

// 將設定物件合併

$.extend(true, TextArea1, TinyMceConfig);

// 初始化執行

tinymce.init(TextArea1);

</script>

—

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

content_css

tinyMCE.init({

selector: 'textarea', // change this value according to your HTML

content_css : 'Component_Front/bootstrap/css/bootstrap.min.css'

});

—

781 total views, no views today

jQuery.validationEngine v2.6.2

Posted on 2015-10-22 by hoyo

作者： jQuery-Validation-Engine

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

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

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

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

<label for="id_user_name" class="col-sm-offset-1 col-sm-2 control-label">委託人姓名</label>

</div>

</div>

</div>

</div>

</form>

$(function(){

$("#idForm").validationEngine("attach",{

onValidationComplete: function(form, status) {

if (status == true) {

var Selectform = document.querySelector('#idForm');

var fd = new FormData(Selectform);

var xhr = new XMLHttpRequest();

xhr.addEventListener("load", uploadComplete, false);

xhr.open("POST", "?act=Request&do=UserInfo&t=" + Math.random(),true);

xhr.send(fd);

}

promptPosition:"topLeft",

scroll:false

});

</script>

—

將綁定和驗證分開

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

$("#idFormTeacherScores").validationEngine('attach',{

custom_error_messages: {

'custom[email]': {

'message': '錯誤的電子郵件格式'

}

validationEventTrigger: '',

autoHidePrompt: true,

autoHideDelay: 2000,

promptPosition:"bottomLeft",

validateNonVisibleFields: false,

prettySelect: true,

scroll:false

});

function allSubmit(){

if ( $("#idFormTeacherScores").validationEngine('validate') ) {

alert('ddd');

}

—

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

jQuery: form serialize, hidden fields, and not displayed fields

$.ajax({

url: WebSite +'/?a=Admin/SendEmail&b=TeacherScores',

type: 'post',

data: $('#idFormTeacherScores').serialize(),

success: function(J){

var Json = JSON.parse(J);

}

});

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

1	data: $('#idFormAdd').find(':visible, input[type="hidden"]').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

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

"phone": {

"regex": /^09([0-9]{8})$/,

"alertText": "* 無效的電話號碼，請輸入 09 開頭格式手機號碼"

使用

1	<input type="text"name="Phone" data-validation-engine="validate[required,custom[phone]]" placeholder="手機號碼" />

—

根據選擇自訂驗證條件

</select>

</div>

</div>

</div>

</form>

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

// 檢查分數是否低於 7 分

function checkTeacherScores(field, rules, i, options){

var Scores = $('#idFormOpinion').find('[name="TeacherScores"] option:selected').val();

if ( Scores <=7 ){

rules.push('required');

return '請填寫原因';

}

表單送出

$("#idFormOpinion").submit(function(){}).validationEngine({

onValidationComplete: function(form, status) {

if (status == true) {

// 表單送出處理

}

validationEventTrigger: '',

autoHidePrompt: true,

autoHideDelay: 2000,

promptPosition:"bottomLeft",

validateNonVisibleFields: false,

prettySelect: true,

scroll:false

});

—

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

jQuery: form serialize, hidden fields, and not displayed fields

$.ajax({

url: './Update',

type: 'post',

data: $('#idFormEdit').find("input[type='hidden'], :input:not(:hidden)").serialize(),

success: function(J){

}

});

—

988 total views, no views today

jQuery – jBox

Posted on 2015-09-29 by hoyo

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

1 2	jBox is a powerful and flexible jQuery plugin, taking care of all your popup windows, tooltips, notices and more.

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

$('#idBoss').jBox('Modal', {

title: "建立公司基本資料",

width:600,

height:400,

blockScroll:false,

animation:'zoomIn',

draggable:'title',

closeButton:'title',

overlay:true,

closeOnClick:false,

content: $('#idModalBoss')

});

</script>

—

應用

</div>

$(function(){

var Width = screen.width *0.8;

var Height = screen.height *0.65;

myModal = new JBox('Modal', {

title: "詳細資料",

width:Width,

height:Height,

blockScroll:false,

fade:false,

animation:'',

draggable:'title',

closeButton:'title',

overlay:true,

closeOnClick:false,

content: $('#idList')

});

$('.TableContent').click(function() {

var $this = $(this);

if ( $this.data('value') ) {

$('#idDate').html($this.data('value'));

myModal.open();

}

});

</script>

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

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

—

重新設定

// 將 EditModal jBox 物件重新設定為寬 600 高 300 標題根據資料重新設定

EditModal.setWidth(600);

EditModal.setHeight(300);

EditModal.open().setTitle( $('#id_Save_Name').val()+' 會員資料', true);

—

關閉按鈕阻止其他事件觸發

onCloseComplete:function(){

event.preventDefault();

}

—

408 total views, no views today

hoyo 學習紀錄

PHP 網頁應用 IOT 物聯網自動化

Tag Archives: jQuery

jQuery DOM Insertion, Inside & Outside

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

TinyMCE 4 使用

停止連結樣式轉換

複製 Word 貼上時保留格式

100% 開放 HTML 以及 JavaScript

使用 CodeMirror 優化原始碼編輯

自訂 CodeMirror

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

實際應用案例

自訂預設選項

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

jQuery.validationEngine v2.6.2

將綁定和驗證分開

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

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

根據選擇自訂驗證條件

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

jQuery – jBox

重新設定

關閉按鈕阻止其他事件觸發