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>

—

453 total views, no views today

網頁或網頁內元素是否作用中 (可視)

Posted on 2017-06-09 by hoyo

$(function(){

// 頁面作用才更新資料

window.onfocus = function(){

setInterval(function(){

search();

}, 10000);

};

window.onblur = function(){

for (var i = 1; i < 9; i++) window.clearInterval(i);

};

});

—

元素出現就作用

How to tell if a DOM element is visible in the current viewport?
http://jsfiddle.net/AndyE/d48Cv/1/
jquery.inview2

$('div').bind('inview', function(event, isInView) {

if (isInView) {

$(this).css('background-color', '#f00');

} else {

$(this).css('background-color', '#00f');

}

});

—

元素完整出現才作用

</div>

<hr/>

$(window).scroll(function() {

$('div:in-viewport(-320)').css({

'background-color': '#f00',

'color': '#151612'

}).find('p').text('Now in viewport.');

});

</script>

—

300 total views, no views today

Canvas framework

Posted on 2016-11-24 by hoyo

—

應用

—

hoyo 自己的應用

需求為從主機載入一張圖之後，可以增加箭頭、文字、方框等基本的繪圖需求，編輯完成按儲存後要直接回存。

技術：HTML5 Canvas

使用工具：Fabric.js

參考

Add Delete button on element in Canvas Fabric JS

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var canvas = new fabric.Canvas('c');

var HideControls = {

'tl':true,

'tr':false,

'bl':true,

'br':true,

'ml':true,

'mt':true,

'mr':true,

'mb':true,

'mtr':true

};

var image = new Image();

image.src = 'normal_3206.png';

image.onload = function() {

// create a wrapper around native canvas element (with id="c")

canvas.setHeight(image.width).setWidth(image.height);

canvas.setBackgroundImage('normal_3206.png', canvas.renderAll.bind(canvas), {

width: canvas.width,

height: canvas.height,

// Needed to position backgroundImage at 0/0

originX: 'left',

originY: 'top'

});

};

canvas.renderAll();

function addDeleteBtn(x, y){

$(".deleteBtn").remove();

var btnLeft = x-10;

var btnTop = y-10;

var deleteBtn = '<img src="../images/delete-icon.png" class="deleteBtn" style="position:absolute;top:'+btnTop+'px;left:'+btnLeft+'px;cursor:pointer;width:20px;height:20px;"/>';

$(".canvas-container").append(deleteBtn);

}

canvas.on('object:selected',function(e){

addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);

});

canvas.on('mouse:down',function(e){

if(!canvas.getActiveObject())

{

$(".deleteBtn").remove();

}

});

canvas.on('object:modified',function(e){

addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);

});

canvas.on('object:scaling',function(e){

$(".deleteBtn").remove();

});

canvas.on('object:moving',function(e){

$(".deleteBtn").remove();

});

canvas.on('object:rotating',function(e){

$(".deleteBtn").remove();

});

$(document).on('click',".deleteBtn",function(){

if(canvas.getActiveObject())

{

canvas.remove(canvas.getActiveObject());

$(".deleteBtn").remove();

}

});

// ----------------------------------------

function addBlock(){

var rect = new fabric.Rect({

stroke: 'rgb(255,0,0)',

strokeWidth: 3,

width: 100, height: 40,

fill: false, left: 50, top: 50

}).setControlsVisibility(HideControls);

canvas.add(rect);

}

function addText() {

var t = new fabric.IText('Tap and Type', {

fontFamily: 'arial black',

left: 100,

top: 100

});

var textWithBackground = new fabric.IText('輸入文字', {

left: 50,

top: 50,

textBackgroundColor: 'rgb(255,255,255)'

}).setControlsVisibility(HideControls);

canvas.add(textWithBackground);

}

function addLine2(){

var path = new fabric.Path('M512 246.16H36.504l86.98-87.43v-27.895L0 254.943v2.115l123.474 124.107h.01V353.26l-86.98-87.42H512z', {

stroke: 'rgb(255,255,255)',

strokeWidth: 8,

fill: 'rgb(255,0,0)'

}

).scaleToWidth(100).setControlsVisibility(HideControls);

canvas.add(path);

}

// 送出處理後圖像給 PHP

function saveImage() {

request = new XMLHttpRequest();

request.open('POST', 'c1.php', true);

var $Json = {};

$Json['image'] = canvas.toDataURL();

$Json['id'] = 'aa111';

request.send( JSON.stringify($Json) );

}

</script>

</body>

</html>

—

561 total views, no views today

Web Audio API – 使用

Posted on 2016-10-28 by hoyo

參考

—

實作

使用 Canvas 繪圖

<!DOCTYPE html>

<html>

</head>

<body>

</div>

</div>

$(function () {

context = new (window.AudioContext || window.webkitAudioContext)();

// Create the analyser

var analyser = context.createAnalyser();

// https://developer.mozilla.org/zh-TW/docs/Web/API/AnalyserNode/fftSize

analyser.fftSize = 64;

// Get the frequency data and update the visualisation

function update() {

var canvas = document.getElementById('canvas'),

cwidth = canvas.width,

cheight = canvas.height - 2,

meterWidth = 20, //width of the meters in the spectrum

gap = 2, //gap between meters

capHeight = 2,

capStyle = '#fff',

meterNum = 702 / (10 + 2), //count of the meters

capYPositionArray = []; //store the vertical position of hte caps for the preivous frame

ctx = canvas.getContext('2d');

gradient = ctx.createLinearGradient(0, 0, 0, 300);

gradient.addColorStop(1, '#0f0');

gradient.addColorStop(0.5, '#ff0');

gradient.addColorStop(0, '#f00');

var drawMeter = function() {

var array = new Uint8Array(analyser.frequencyBinCount);

analyser.getByteFrequencyData(array);

ctx.clearRect(0, 0, cwidth, cheight);

for (var i = 0; i < array.length; i++) {

var value = array[i];

if (capYPositionArray.length < Math.round(meterNum)) {

capYPositionArray.push(value);

}

ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look

ctx.fillRect(i * 22 /*频谱条的宽度+条间间距*/ , cheight - value + capHeight, meterWidth, cheight);

}

requestAnimationFrame(drawMeter);

};

requestAnimationFrame(drawMeter);

}

// Hook up the audio routing...

// player -> analyser -> speakers

// (Do this after the player is ready to play - https://code.google.com/p/chromium/issues/detail?id=112368#c4)

$("#player").bind('canplay', function() {

var source = context.createMediaElementSource(this);

source.connect(analyser);

analyser.connect(context.destination);

update();

});

</script>

</body>

</html>

analyser.fftSize
設定值除以 2 就是陣列取樣數，預設 2048
analyser.getByteFrequencyData(Uint8Array(analyser.frequencyBinCount));
數值在 0 – 255 ，沒聲音為 0
analyser.getByteTimeDomainData(Uint8Array(analyser.frequencyBinCount));
數值在 0 – 255 ，沒聲音為 128
requestAnimationFrame 根據瀏覽器設定(一般來說是 60fps) 更新
能量條的高度是根據 0-255 所繪製，所以如果要增減就必須調整 analyser.getByteFrequencyData(array) 的 array 值

—

378 total views, 2 views today

RICOH THETA 網頁全景處理

Posted on 2016-05-13 by hoyo

參考

—

360 Degree Interactive Panoramas And Virtual Tours In Html 5 – Multiple Browsers / 360 Easy – Complete Tutorial On 360 Degree Photography

100

101

102

103

104

105

106

107

108

<head>

* { outline : none; -moz-outline : none -moz-mac-focusring; }

#source-img { position: absolute; left: -999em; }

canvas { position: absolute; float:center; top: -90px; }

#screen { position: absolute; float:center; top: 0px; }

#screen div { position: absolute; top: 0px; left: 300px; width: 630px; height: 815px;

background: #fffff; }

div#screen-overlay { position: absolute; top: 0px; left: 0px; margin-left: 0px; height: 715px;

width: 630px; }

</style>

var YD = YAHOO.util.Dom,

YE = YAHOO.util.Event;

var canvas, ctx, img, widthSlider, scalingSlider, pw = 630, sf = .490, imgOffset = 0,

stage, stagePos, stageDim, moveInterval, moveDirection, dist = 1, data = []; function init() {

canvas = YD.get('cv');

ctx = canvas.getContext('2d');

canvas.width = 630;

canvas.height = 815;

canvas.style.width = '630px';

canvas.style.height = '815px';

stage = YD.get('screen-overlay');

YE.on(stage, 'mousedown', startMoveBackground);

YE.on(stage, 'mousemove', moveBackground);

YE.on(stage, 'mouseout', stopMove);

YE.on(stage, 'mouseup', stopMoveBackground);

stagePos = YD.getXY(stage);

stageDim = [ YD.getStyle(stage, 'width'), YD.getStyle(stage, 'height') ];

img = YD.get('source-img');

redraw(); }

function startMoveBackground(e) {}

function moveBackground(e) {

dist = Math.abs(e.clientX - (parseInt(stageDim[0], 10) / 2 + stagePos[0])) / 3; var timeInt = 1;

if(e.clientX - stagePos[0] > parseInt(stageDim[0], 10) / 2) {

if(moveDirection === 'left' || !moveDirection) {

clearInterval(moveInterval);

moveInterval = setInterval(function() { moveRight(); }, timeInt); moveDirection = 'right'; }}

else

{ if(moveDirection === 'right' || !moveDirection) {

clearInterval(moveInterval);

moveInterval = setInterval(function() { moveLeft(); }, timeInt);

moveDirection = 'left'; }}}

function stopMove() {

clearInterval(moveInterval);

moveDirection = null; }

function moveRight() {

imgOffset += dist;

redraw(); }

function moveLeft() {

imgOffset -= dist;

redraw(); }

function stopMoveBackground(e) {}

function precalculate(img, x, y, pixelWidth, scalingFactor, offset) {

if(typeof offset === 'undefined') offset = 0;

var h = img.height,

w = (img.width - 2) / 2.5;

var polarity = (pixelWidth > 0) ? 1 : -1;

var widthFactor = Math.abs(pixelWidth) / w;

var delta = Math.abs(pixelWidth);

var dHeight, dWidth, dy, dx;

var constant = Math.pow(100000, scalingFactor); //380;

var firstInc = ((delta / 2) * (delta / 2)) / constant;

for(var n = 0, len = delta, inc = w / delta, incScale = (1 - scalingFactor) / delta; n < len; n++) {

(function(m) {

sx = function(offset) { return ((inc * m + offset) >= 0) ? (inc * m + offset) % img.width : img.width +

((inc * m + offset) % img.width) };})(n);

sy = 0;

sWidth = inc;

sHeight = h;

firstHalf = h + 100 - firstInc + (((len / 2) - n) * ((len / 2) - n)) / constant;

secondHalf = h + 100 - firstInc + ((n - (len / 2)) * (n - (len / 2))) / constant;

dHeight = (n < len / 2) ? firstHalf : secondHalf;

dWidth = inc * widthFactor;

dy = y + (h - dHeight) / 2;

dx = x + (inc * n * widthFactor * polarity);

data.push({

sx: sx,

sy: sy,

sWidth: sWidth,

sHeight: sHeight,

dx: dx,

dy: dy,

dWidth: dWidth,

dHeight: dHeight }); } }

function redraw() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

displayImage(ctx, img, 0, 140, pw, sf, imgOffset); }

function displayImage(ctx, img, x, y, pixelWidth, scalingFactor, offset) {

if(data.length === 0) {

precalculate(img, x, y, pixelWidth, scalingFactor, offset); }

var slice, sx;

for(var n = 0, len = data.length; n < len; n++) {

slice = data[n];

ctx.drawImage(img, slice.sx(offset), slice.sy, slice.sWidth, slice.sHeight,

slice.dx, slice.dy, slice.dWidth, slice.dHeight); }}

YAHOO.util.Event.on(window, 'load', init);

</script>

</head>

<body>

</body>

—

720全景图

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

<!DOCTYPE html>

<head>

<style>

body {

background-color: #000000;

margin: 0px;

overflow: hidden;

}

#info {

position: absolute;

top: 0px; width: 100%;

color: #ffffff;

padding: 5px;

font-family:Monospace;

font-size:13px;

font-weight: bold;

text-align:center;

}

a {

color: #ffffff;

}

</style>

</head>

<body>

<div id="info">单张图片全景.</div>

var camera, scene, renderer;

var fov = 70,

texture_placeholder,

isUserInteracting = false,

onMouseDownMouseX = 0, onMouseDownMouseY = 0,

lon = 0, onMouseDownLon = 0,

lat = 0, onMouseDownLat = 0,

phi = 0, theta = 0;

init();

animate();

function init() {

var container, mesh;

container = document.getElementById( 'container' );

camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1100 );

camera.target = new THREE.Vector3( 0, 0, 0 );

scene = new THREE.Scene();

mesh = new THREE.Mesh( new THREE.SphereGeometry( 500, 60, 40 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'http://sandbox.runjs.cn/uploads/rs/232/bpgpj5uv/123.jpg' ) } ) );

mesh.scale.x = -1;

scene.add( mesh );

renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

container.appendChild( renderer.domElement );

document.addEventListener( 'mousedown', onDocumentMouseDown, false );

document.addEventListener( 'mousemove', onDocumentMouseMove, false );

document.addEventListener( 'mouseup', onDocumentMouseUp, false );

document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );

document.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);

window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}

function onDocumentMouseDown( event ) {

event.preventDefault();

isUserInteracting = true;

onPointerDownPointerX = event.clientX;

onPointerDownPointerY = event.clientY;

onPointerDownLon = lon;

onPointerDownLat = lat;

}

function onDocumentMouseMove( event ) {

if ( isUserInteracting ) {

lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;

lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;

}

function onDocumentMouseUp( event ) {

isUserInteracting = false;

}

function onDocumentMouseWheel( event ) {

// WebKit

if ( event.wheelDeltaY ) {

fov -= event.wheelDeltaY * 0.05;

// Opera / Explorer 9

} else if ( event.wheelDelta ) {

fov -= event.wheelDelta * 0.05;

// Firefox

} else if ( event.detail ) {

fov += event.detail * 1.0;

}

camera.projectionMatrix.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 );

render();

}

function animate() {

requestAnimationFrame( animate );

render();

}

function render() {

lat = Math.max( - 85, Math.min( 85, lat ) );

phi = THREE.Math.degToRad( 90 - lat );

theta = THREE.Math.degToRad( lon );

camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );

camera.target.y = 500 * Math.cos( phi );

camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );

camera.lookAt( camera.target );

// distortion

camera.position.x = - camera.target.x;

camera.position.y = - camera.target.y;

camera.position.z = - camera.target.z;

renderer.render( scene, camera );

}

</script>

</body>

</html>

—

383 total views, no views today

jBox 第一次載入圖片無法顯示

Posted on 2016-03-04 by hoyo

jBox 使用 background image 來顯示圖片，在第一次點選圖片時都無法顯示

DIV background images not showing on first load. Only happens when first loading app on FB using Chrome

解決的方式是在第一次載入顯示時，加上 setTimeout()

// JBox-image-gallery1-0

if (next_id == 0 ) {

var $this = this;

setTimeout(function(){

(!jQuery('#JBox-image-' + gallery + '-' + next_id).length) && jQuery('<img src="' + $this.images[gallery][next_id].src + '">').load(function () {

appendImage(gallery, next_id, true);

});

}, 500);

}

else {

(!jQuery('#JBox-image-' + gallery + '-' + next_id).length) && jQuery('<img src="' + this.images[gallery][next_id].src + '">').load(function () {

appendImage(gallery, next_id, true);

});

}

—

331 total views, no views today

jQuery 的 Selectors 較佳用法

Posted on 2015-12-18 by hoyo

PhpStorm

原JavaScript 語法

1	$("#FormAdd input").val();

警告訊息：

1	Checks that jQuery selectors are used in an efficient way. It suggests to split descendant selectors which are prefaced with ID selector and warns about duplicated selectors which could be cached.

Inefficient jQuery usage warnings in PHPStorm IDE

修正後語法

1	$("#FormAdd").find("input").val();

—

382 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'

});

—

828 total views, no views today

MathJax 使用 JavaScript 顯示數學公式

Posted on 2015-10-27 by hoyo

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

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

官網： MathJax

1	MathJax is a cross-browser JavaScript library that displays mathematical notation in web browsers, using MathML, LaTeX and ASCIIMathML markup. MathJax is released as open-source software under the Apache license.

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

範例演示兩個功能

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

$(document).ajaxStop(function () {

MathJax.Hub.Queue(["Typeset",MathJax.Hub,".Question"]);

});

MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {

var TEX = MathJax.InputJax.TeX;

var PREFILTER = TEX.prefilterMath;

TEX.Augment({

prefilterMath: function (math,displaymode,script) {

math = "\\displaystyle{"+math+"}";

return PREFILTER.call(TEX,math,displaymode,script);

}

});

</script>

—

545 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){

}

});

—

1,100 total views, 1 views today

hoyo 學習紀錄

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

Category Archives: 網頁前端

jQuery DOM Insertion, Inside & Outside

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

網頁或網頁內元素是否作用中 (可視)

元素出現就作用

元素完整出現才作用

Canvas framework

hoyo 自己的應用

Web Audio API – 使用

參考

實作

RICOH THETA 網頁全景處理

jBox 第一次載入圖片無法顯示

jQuery 的 Selectors 較佳用法

TinyMCE 4 使用

停止連結樣式轉換

複製 Word 貼上時保留格式

100% 開放 HTML 以及 JavaScript

使用 CodeMirror 優化原始碼編輯

自訂 CodeMirror

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

實際應用案例

自訂預設選項

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

MathJax 使用 JavaScript 顯示數學公式

jQuery.validationEngine v2.6.2

將綁定和驗證分開

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

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

根據選擇自訂驗證條件

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