Start: 2016

2016年12月29日星期四

(css)transition-problem

<!DOCTYPE html>
<html lang="en">

<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#div_1 {
width: 100px;
height: 100px;
transition-property: top;
transition-duration: 1s;
position: absolute;
top: 50px;
background-color: red;
}

.noAnimate {
transition: none;
}
</style>
<script>
function domRedraw_1(dom) {
// 藉著寬度改變

var css = getComputedStyle(dom, null);
var oldStyle = dom.style.cssText;
/* ------------------------ */
/**
* 改變寬度
*
* 寬度+1
*
* 再改回來
*/

var width = css.width.replace(/\D/g, '');
width = Number(width);
width++;
dom.style.width = width + 'px';
/* ------------------------ */
// 回復
dom.style.cssText = oldStyle;
};

function domRedraw_2(dom) {
// 藉著(offsetHeight)
dom.offsetHeight;
};
</script>
<script>
function test_1() {
var div = document.querySelector('#div_1');
var style = div.style;

style.removeProperty('display');

// important
domRedraw_1(div);

style.top = '200px';
}
</script>
</head>

<body>
<button onclick="test_1();">Click!</button>
<div id="div_1" style="display: none">
target
</div>
</body>

</html>

(css)tansition-problem-1

<!DOCTYPE html>
<html lang="en">

<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#div_1 {
width: 100px;
height: 100px;
transition: left 2s;
position: absolute;
top: 50px;
background-color: red;
}

.noAnimate {
transition: none;
}
</style>
<script>
function domRedraw_1(dom) {
// 藉著寬度改變

var css = getComputedStyle(dom, null);
var oldStyle = dom.style.cssText;
/* ------------------------ */
/**
* 改變寬度
*
* 寬度+1
*
* 再改回來
*/

var width = css.width.replace(/\D/g, '');
width = Number(width);
width++;
dom.style.width = width + 'px';
/* ------------------------ */
// 回復
dom.style.cssText = oldStyle;
};

function domRedraw_2(dom) {
// 藉著(offsetHeight)
dom.offsetHeight;
};
</script>
<script>
function test_1() {
var div = document.querySelector('#div_1');
var style = div.style;
div.classList.add('noAnimate');
style.cssText = 'left:300px;';

// do this to force a redraw instead of setTimeout() !
// div[0].offsetHeight;

domRedraw_1(div);
// domRedraw_2(div);

div.classList.remove('noAnimate');
style.cssText = 'left:0;';

/*
setTimeout(function() {
div.removeClass('noAnimate').css('left', 0);
}, 10);
*/
}
</script>
</head>

<body>
<button onclick="test_1();">Click!</button>
<div id="div_1">
target
</div>
</body>

</html>

2016年12月27日星期二

(js)Area88_geometry.js

////////////////////////////////////////////////////////////////////////////////
/**
* (jquery)擴充
*
* 處理空間位置相關
*/
////////////////////////////////////////////////////////////////////////////////

/**
* 取得(dom)高度，寬度
*
* 特別用於隱藏中的元素(隱藏的)
*/

(function($) {
$.blockElements_ = ['address', 'article', 'aside', 'blockquote', 'canvas',
'dd', 'div', 'dl', 'fieldset', 'figcaption', 'figure', 'figcaption', 'footer',
'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr', 'li', 'main',
'nav', 'noscript', 'ol', 'output', 'p', 'pre', 'section', 'table', 'tfoot', 'ul', 'video'
];
/* ====================================================================== */
/**
* 抓取(dom)尺寸相關訊息
* 特別用在隱藏的元素
*
* @param {boolean} forAnimation 是否為了動畫(inline無法動畫)
*/
$.getDomSizeData_ = function(dom, forAnimation) {

if (dom == null || typeof dom.nodeName == 'undefined') {
throw new Error('dom no exists');
}
var css = dom.currentStyle || window.getComputedStyle(dom, null);
var style = dom.style;

console.dir(css);
console.dir(style);

// (css)(style)元素本來是否可見
var display = /none/gi.test(css.display) ? false : true;

// (style)是否設定不可見
var style_setNoSee = /none/gi.test(style.display) ? true : false;

var sizeData = {
'boxSizing': '',
'borderBottomWidth': '',
'borderLeftWidth': '',
'borderRightWidth': '',
'borderTopWidth': '',
'paddingBottom': '',
'paddingLeft': '',
'paddingRight': '',
'paddingTop': '',
'marginBottom': '',
'marginLeft': '',
'marginRight': '',
'marginTop': ''
};

debugger;
/* ============================================ */
/**
* 元素是否可見，不可見還要再進一步處理
*
* 若不可見，要變為可見才能量(size)
*/
if (display) {
// 若元素是顯示的
sizeData = getDomSizeData_1(dom, sizeData);
} else {
// 若元素是隱藏狀態

if (style_setNoSee) {
// 若是藉由(style)設置隱藏

sizeData = getHideDom_sizeData_2(dom, sizeData);

} else {

/**
* 藉由(css)設置隱藏，無法從css得知標籤block屬性
*
* 就只能從標籤判斷是否是(block)
*/
var displayType = $.blockElements_.indexOf(dom.nodeName.toLowerCase()) >= 0 ? 'block' : 'inline';

if (displayType == 'inline') {
// inline元素
if (forAnimation === true) {
// inline元素要作為animation必須畫作inline-block
sizeData = getHideDom_sizeData_1(dom, 'inline-block', sizeData);
} else {
sizeData = getHideDom_sizeData_1(dom, 'inline', sizeData);
}
} else {
sizeData = getHideDom_sizeData_1(dom, 'block', sizeData);
}
}
}
/* -------------------------------------------- */
// 整理(sizeData)數據
for (var k in sizeData) {
if (sizeData.hasOwnProperty(k)) {
if (k != 'boxSizing') {
if (typeof sizeData[k] === 'string') {
// 去掉單位
var d = sizeData[k].replace(/[^0-9\.]/gi, '');
sizeData[k] = Number(d);
}
}
}
}

sizeData.borderBox = false;
if (/^border.*box$/gi.test(sizeData.boxSizing)) {
sizeData.borderBox = true;
}

debugger;
return sizeData;
};

/* ---------------------------------------------------------------------- */
/**
* 針對沒有隱藏的(dom)
*
* @param {type} dom
* @returns {undefined}
*/
getDomSizeData_1 = function getDomSizeData_1(dom, sizeData) {
debugger;

var css = dom.currentStyle || window.getComputedStyle(dom, null);
var style = dom.style;
/* -------------------------------------------- */
// 讀取(css)值

for (var k in sizeData) {
sizeData[k] = css[k];
}
sizeData.offsetHeight = dom.offsetHeight;
sizeData.offsetWidth = dom.offsetWidth;
/* -------------------------------------------- */

return sizeData;
};
/* ====================================================================== */
/**
* 針對用css隱藏的dom
*
* 這樣用的用意在於(inline)position:absolute，會變成(block)
*
* @param {[type]} dom [description]
*
* @return {[type]} [description]
*/
function getHideDom_sizeData_1(dom, blockStyle, sizeData) {
debugger;

var parentNode = dom.parentNode;
var parent_oldCss = parentNode.style.cssText;

if (parentNode.style.position.trim().length == 0) {
parentNode.style.position = 'relative';
}
/* ---------------------------------- */
// 複製節點
var cloneNode = dom.cloneNode(true);

// 讓隱藏的元素顯示出來，方便量(size)
cloneNode.style.setProperty('display', blockStyle);
/* ---------------------------------- */
// 創建一個隱藏的容器，放要量測的元素
var container = document.createElement('div');

container.style.setProperty('height', '0');
container.style.setProperty('width', '100%');
container.style.setProperty('padding', '0');
container.style.setProperty('margin', '0');
container.style.setProperty('overflow', 'hidden');
container.style.setProperty('border-width', '0px');
container.style.setProperty('visibility', 'hidden');

container.appendChild(cloneNode);
parentNode.insertBefore(container, dom);
/* ---------------------------------- */
// 讀取(css)值
var css = cloneNode.currentStyle || window.getComputedStyle(cloneNode, null);
// var style = cloneNode.style;

for (var k in sizeData) {
sizeData[k] = css[k];
}
sizeData.offsetHeight = cloneNode.offsetHeight;
sizeData.offsetWidth = cloneNode.offsetWidth;

/* -------------------------------------------- */
parentNode.removeChild(container);
parentNode.style.cssText = parent_oldCss;

return sizeData;
};
/* ====================================================================== */
/**
* 針對用style隱藏的dom
*/
function getHideDom_sizeData_2(dom, sizeData) {
debugger;
// 複製節點
var cloneNode = dom.cloneNode(true);

var parentNode = dom.parentNode;
var parent_oldCss = parentNode.style.cssText;

if (parentNode.style.position.trim().length == 0) {
parentNode.style.position = 'relative';
}
/* ---------------------------------- */

// 讓隱藏的元素顯示出來，方便量(size)

// 若是靠(style)隱藏起來的
cloneNode.style.removeProperty('display');

/* ---------------------------------- */
// 創建一個隱藏的容器，放要量測的元素
var container = document.createElement('div');

container.style.setProperty('height', '0');
container.style.setProperty('width', '100%');
container.style.setProperty('padding', '0');
container.style.setProperty('margin', '0');
container.style.setProperty('overflow', 'hidden');
container.style.setProperty('border-width', '0px');
container.style.setProperty('visibility', 'hidden');

container.appendChild(cloneNode);
parentNode.insertBefore(container, dom);
/* ---------------------------------- */
// 讀取(css)值
var css = cloneNode.currentStyle || window.getComputedStyle(cloneNode, null);
// var style = cloneNode.style;

for (var k in sizeData) {
sizeData[k] = css[k];
}
sizeData.offsetHeight = cloneNode.offsetHeight;
sizeData.offsetWidth = cloneNode.offsetWidth;

/* -------------------------------------------- */
parentNode.removeChild(container);
parentNode.style.cssText = parent_oldCss;

return sizeData;
};
/* ====================================================================== */

})(Area88_);

/* ========================================================================== */
/**
* 各種高度
*/
(function($) {
/**
* 用法與(jquery.outerHeight)相同
* 包括(border)(padding)
* 但只能取值
*
* @param {[boolean]} option [包括(margin)]
* @return {[number]} [高度]
*/
$.fn.getOuterHeight_ = function(getMargin) {
// debugger;

getMargin = getMargin || false;
var height, sizeData;
/* -------------------------------------------- */
this.each(function(index, el) {
debugger;

var dom = this;
sizeData = $.getDomSizeData_(dom);

if (index == 0) {
// 只為了取得高度

height = sizeData.offsetHeight;
if (getMargin) {
height += sizeData.marginBottom;
height -= sizeData.marginTop;
}
return false;
}
});
/* -------------------------------------------- */
return height;

};
/* ====================================================================== */
/**
* 用法與(jquery.innerHeight)相同
* 但只取值，不設定
*
* 包括(padding)
*
* @return {[number]} [高度]
*/
$.fn.getInnerHeight_ = function() {

var height, sizeData;
/* -------------------------------------------- */
this.each(function(index, el) {
debugger;

var dom = this;
sizeData = $.getDomSizeData_(dom);

if (index == 0) {
// 只為了取得高度

height = sizeData.offsetHeight;
height -= sizeData.borderTopWidth;
height -= sizeData.borderBottomWidth;

return false;
}
});
/* -------------------------------------------- */
return height;
};
/* ====================================================================== */
/**
* 用法與(jquery.height)相同
*
* 只取高度
*
* @return {[type]} [description]
*/
$.fn.getHeight_ = function() {
// debugger;

var height, sizeData;
/* -------------------------------------------- */
this.each(function(index, el) {
debugger;

var dom = this;
sizeData = $.getDomSizeData_(dom);

if (index == 0) {
// 只為了取得高度

height = sizeData.offsetHeight;
height -= sizeData.borderTopWidth;
height -= sizeData.borderBottomWidth;
height -= sizeData.paddingTop;
height -= sizeData.paddingBottom;

return false;
}
});
/* -------------------------------------------- */
return height;
};
/* ====================================================================== */
})(Area88_);

////////////////////////////////////////////////////////////////////////////////
/**
* 各種高度
*/
(function($) {
/**
* 用法與(jquery.outerHeight)相同
* 包括(border)(padding)
* 但只能取值
*
* @param {[boolean]} option [包括(margin)]
* @return {[number]} [高度]
*/
$.fn.getOuterWidth_ = function(getMargin) {
// debugger;

getMargin = getMargin || false;
var width, sizeData;
/* -------------------------------------------- */
this.each(function(index, el) {
debugger;

var dom = this;
sizeData = $.getDomSizeData_(dom);

if (index == 0) {
// 只為了取得高度

width = sizeData.offsetWidth;
if (getMargin) {
width += sizeData.marginLeft;
width += sizeData.marginRight;
}
return false;
}
});
/* -------------------------------------------- */
return width;

};
/* ====================================================================== */
/**
* 用法與(jquery.innerHeight)相同
* 但只取值，不設定
*
* 包括(padding)
*
* @return {[number]} [高度]
*/
$.fn.getInnerWidth_ = function() {

var width, sizeData;
/* -------------------------------------------- */
this.each(function(index, el) {
debugger;

var dom = this;
sizeData = $.getDomSizeData_(dom);

if (index == 0) {
// 只為了取得高度

width = sizeData.offsetWidth;
width -= sizeData.borderRightWidth;
width -= sizeData.borderLeftWidth;

return false;
}
});
/* -------------------------------------------- */
return width;
};
/* ====================================================================== */
/**
* 用法與(jquery.width)相同
*
* 只取高度
*
* @return {[type]} [description]
*/
$.fn.getWidth_ = function() {
// debugger;

var width, sizeData;
/* -------------------------------------------- */
this.each(function(index, el) {
debugger;

var dom = this;
sizeData = $.getDomSizeData_(dom);

if (index == 0) {
// 只為了取得高度

width = sizeData.offsetWidth;
width -= sizeData.borderRightWidth;
width -= sizeData.borderLeftWidth;
width -= sizeData.paddingRight;
width -= sizeData.paddingLeft;

return false;
}
});
/* -------------------------------------------- */
return width;
};
/* ====================================================================== */
})(Area88_);

(js)$Map_

/**
* 類似(Map)的功能
*/

function $Map_(dataList) {
var self = this;
this.size = 0;

// this.keys = []; // [key, key.......]
this.dataList = []; // [{k: key, v: value}, {k: key, v: value}.....]

function __constructor() {
if (Array.isArray(dataList)) {
self.dataList = dataList;
self.size = self.dataList.length;
}
};

__constructor();
};

////////////////////////////////////////////////////////////////////////////////
(function() {
/**
*
* @return {Map}
*/
this.set = function(key, value) {
var index;

var data = {
'k': key,
'v': value
};

if ((index = this.indexOfKey(key)) >= 0) {
// 若(key)已經存在
this.dataList[index] = data;
} else {
this.dataList.push(data);
this.size = this.dataList.length;
}

return this;
};
/* ====================================================================== */
this.get = function(key) {
var index, index, _k, valueObj, checkCount = 0;

if ((index = this.indexOfKey(key)) <= 0) {
// 若沒找到(key)
return result;
}
/* ---------------------------------- */
var data = this.dataList[index];

return data.v;
};
}).call($Map_.prototype);

////////////////////////////////////////////////////////////////////////////////
(function() {

/* ====================================================================== */
this.clear = function() {
this.dataList = [];
this.size = this.dataList.length;
};
/* ====================================================================== */
this.delete = function(key) {
var index, result = false;

if ((index = this.indexOfKey) >= 0) {

this.dataList.splice(index, 1);
this.size = this.dataList.length;

result = true;
}
return result;
};
})($Map_.prototype);
////////////////////////////////////////////////////////////////////////////////

(function() {
this.indexOfKey = function(key) {
var index = -1;

if (key == null) {
return index;
}

this.dataList.some(function(data, i) {
var _key = data.k || undefined;
if (_key === key) {
index = i;
return true;
}
});
return index;
};

/* ====================================================================== */
this.has = function(key) {
var index, result = false;

if ((index = this.indexOfKey(key)) >= 0) {
result = true;
}
return result;
};
}).call($Map_.prototype);

////////////////////////////////////////////////////////////////////////////////
(function() {

/**
* 返回(array)
*
* @return {array} [keys]
*/
this.keys = function() {
var keys_array = [];

this.dataList.forEach(function(data) {
var key = data.k;
keys_array.push(key);
});

return keys_array;
};
/* ====================================================================== */
/**
* 返回(array)
*
* @return {array} [values]
*/
this.values = function() {
var values_array = [];

this.dataList.forEach(function(data) {
var values = data.v;
values_array.push(values);
});

return values_array;
};
}).call($Map_.prototype);

////////////////////////////////////////////////////////////////////////////////
(function() {
this.forEach = function(callback) {

var self = this;

this.dataList.forEach(function(data, i) {
var k = data.k;
var v = data.v;
/* ------------------------ */
var copyKey = self.__clone(k);
var copyData = self.__clone(v);

/* ------------------------ */
callback(copyData, copyKey, self);
});
};
/* ====================================================================== */
this.some = function(callback) {

var self = this;
var result = false;
this.dataList.some(function(data, i) {

var k = data.k;
var v = data.v;

var copyKey = self.__clone(k);
var copyData = self.__clone(v);
/* ------------------------ */
result = callback(copyData, copyKey, self);

if (result !== true) {
result = false;
}
/* ------------------------ */
return result;
});
return result;
};
}).call($Map_.prototype);
////////////////////////////////////////////////////////////////////////////////
(function() {
this.map = function() {

};
/* ====================================================================== */
this.filter = function() {

};

}).call($Map_.prototype);

////////////////////////////////////////////////////////////////////////////////
(function() {
/**
* 依照(key)排序
*/
this.keySort = function(sortFun) {
if (typeof sortFun != 'function') {
throw new TypeError('sortFun must be function');
}

this.dataList.sort(_sortFun);
/* ---------------------------------- */
function _sortFun(a, b) {
// 排序的函式
var key_a = a.k || undefined;
var key_b = b.k || undefined;

return sortFun(key_a, key_b);
}
};
/* ====================================================================== */
this.valueSort = function(sortFun) {
if (typeof sortFun != 'function') {
throw new TypeError('sortFun must be function');
}
this.dataList.sort(_sortFun);
/* ---------------------------------- */
function _sortFun(a, b) {
// 排序的函式
var value_a = a.v || undefined;
var value_b = b.v || undefined;

var result = sortFun(value_a, value_b);
return result;
}
};
}).call($Map_.prototype);

////////////////////////////////////////////////////////////////////////////////

(function() {
/**
* 複製
*/
this.slice = function() {
'use strict';
debugger;

var arg = [].slice.call(arguments);
var copyDataList = this.dataList.slice.apply(this.dataList, arg);

var map = new $Map_(copyDataList);

return map;
};
/* ====================================================================== */
/**
* 移除，拼接(不能新增)
*/
this.splice = function(start, count) {
'use strict';
debugger;

var copyDataList;

if (arguments.length == 0) {
copyDataList = this.dataList.splice();
} else if (arguments.length == 1) {
copyDataList = this.dataList.splice(start);
} else {
// arguments.length > 1
copyDataList = this.dataList.splice(start, count);
}

var map = new $Map_(copyDataList);
/* ---------------------------------- */
this.size = this.dataList.length;

return map;
};
}).call($Map_.prototype);
////////////////////////////////////////////////////////////////////////////////

(function() {
this.__clone = function(data) {
debugger;
var result;
if (typeof $.deepCopy_ == 'function') {
result = $.deepCopy_(data);
} else {
result = data;
}
return result;
};
}).call($Map_.prototype);

2016年12月26日星期一

(js)Area88_event.js

////////////////////////////////////////////////////////////////////////////////
/**
*
*/
////////////////////////////////////////////////////////////////////////////////

(function($) {
var eventData = new Map();
$.eventGuid = 0;
/**
* 取得或設定事件的資料
*/
$.eventData_ = function(dom, name, _data) {
var data;

if ((data = eventData.get(dom)) == null) {
eventData.set(dom, {});
data = eventData.get(dom);
}
/* ---------------------------------- */
if (arguments.length == 2) {
return data[name];
} else if (arguments.length == 1) {
return data;
}
/* ---------------------------------- */
data[name] = _data;
};
})(Area88_);

////////////////////////////////////////////////////////////////////////////////
/**
* trigger
*/
(function($) {

$.trigger_ = function(dom, eventType, data) {
var eventObj = document.createEvent("CustomEvent");
eventObj.initCustomEvent(eventType, true, true, data);

dom.dispatchEvent(eventObj);
};
/* ====================================================================== */
$.fn.trigger_ = function(eventType, data) {
this.each(function() {
$.trigger_(this, eventType, data);
});
};
/* ====================================================================== */
})(Area88_);
////////////////////////////////////////////////////////////////////////////////
/**
* 事件綁定的核心
*/
(function($) {
/**
*
* @param {boolean} one:只執行一次
*/
$._bindEvent_ = function(dom, types, fn, data, selector, one) {
debugger;

var eventData, events, _handle, namespace;
var one = one ? true : false;

eventData = $.eventData_(dom);
(events = eventData.events) || (events = eventData.events = {});
(_handle = eventData.handle) || (_handle = eventData.handle = handle);
_handle.elem = dom;

/* ---------------------------------- */
types = types.split(/\s+/gi);

types.forEach(function(type) {
namespace = type.split(/\./gi);
type = namespace.shift();

if (!fn.guid) {
fn.guid = ++$.eventGuid;
}

var _data = {
one: one,
type: type,
data: data,
handler: fn,
guid: fn.guid,
selector: (typeof selector == 'string' ? selector : ''),
namspace: (namespace.length ? namespace.join('.') : '')
};

if (!events[type]) {
// 若沒有登錄過該事件
events[type] = [];
dom.addEventListener(type, _handle);
}
events[type].push(_data);
});

};
/* ====================================================================== */
/**
* 事件
*/
function handle() {
debugger;
$._dispatch_.apply(handle.elem, arguments);
};

/* ====================================================================== */
/**
* 只會進來單一事件
*/
$._dispatch_ = function() {
debugger;

alert('_dispatch_');

var dom = this; // 事件綁定的dom
var e = arguments[0];
var type = e.type;
var currentTarget = e.currentTarget;
var target = e.target;
var events = $.eventData_(dom, 'events');

var handler_array = events[type] || [];

// 巡迴該事件要執行的fn
for (var i = 0; i < handler_array.length; i++) {
var data = handler_array[i];

var one = data.one;
var namspace = data.namespace || '';
var selector = data.selector;
var handler = data.handler;

if (selector) {
var selectDom = document.querySelector(selector);
if (selectDom !== target) {
continue;
}
}
/* ---------------------------------- */

//只執行一次的任務
if (one) {
handler_array.splice(i, 1);
i--;
}
var result = handler.apply(dom, arguments);
(result === false) && (e.preventDefault());
};

};
})(Area88_);
////////////////////////////////////////////////////////////////////////////////
/**
* 移除事件的核心
*/
(function($) {
$._unbindEvent_ = function(dom, types, fn, selector) {
var events = $.eventData_(dom, 'events');

if (!events) {
return;
}
types = types.split(/\s+/gi);

types.forEach(function(type) {
// 不同事件的迴圈
var namespace_array = type.split(/\./gi);
type = namespace.shift();

var handler_array = events[type] || [];

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

var _namspace_array = data.namespace.split(/\./gi);;
var _selector = data.selector;
var _guid = data.guid;

var del = false;

if (!del && typeof selector == 'string' && _selector.localeCompare(selector) == 0) {
// check selector
del = true;
}

if (!del && namespace_array.length > 0 && havveNamespace(namespace_array, _namspace_array)) {
// check namespace
del = true;
}

if (!del && typeof fn == 'function' && typeof fn.guid != 'undefined' && fn.guid === _guid) {}

if (del) {
handler_array.splice(i, 1);
i--;
}
}
});
};

function havveNamespace(array_1, array_2) {
var result = false;
loop1: for (i = 0; i < array_1.length; i++) {
for (j = 0; j < array_2.length; j++) {

if (array_1[i] === array_2[j]) {
result = true;
break loop1;
}
}
}

return result;
};
})(Area88_);

////////////////////////////////////////////////////////////////////////////////
(function() {
/**
* 綁定事件
*/
$.fn.on = $.fn.on || function(types, selector, data, fn, one) {
debugger;
var type, origFn;

if (data == null && fn == null) {
// ( types, fn )
fn = selector;
data = selector = undefined;
} else if (fn == null) {
if (typeof selector === "string") {
// ( types, selector, fn )
fn = data;
data = undefined;
} else {
// ( types, data, fn )
fn = data;
data = selector;
selector = undefined;
}
}

if (typeof fn != 'function') {
return this;
}
/* ---------------------------------- */
this.each(function(i, dom) {
debugger;
$._bindEvent_(this, types, fn, data, selector, one);
});
return this;
};

})(Area88_);

/* ========================================================================== */

(function($) {
/**
* 移除事件
*/
$.fn.off = $.fn.off || function(types, selector, fn) {
if (arguments.length == 2 && typeof selector == "function") {
// ( types [, fn] )
fn = selector;
selector = undefined;
}

if (typeof types != 'string') {
return this;
}
/* ---------------------------------- */
this.each(function(i, dom) {
$._unbindEvent_(dom, types, fn, selector);
});
return this;
};
})(Area88_);
/* ========================================================================== */
(function($) {
/**
* 綁定只執行一次的事件
*/
$.fn.one = $.fn.one || function(types, selector, data, fn) {
this.on(types, selector, data, fn, 1);
return this;
};
})(Area88_);

2016年12月22日星期四

(css)disable - transition, animation

* {
/*CSS transitions*/
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
/*CSS transforms*/
-o-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
/*CSS animations*/
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}

(js)暫停transition

There's a much simpler solution. If you want to just stop the transition (and not pause it). Just set the css to current computed style. For example in a custom scrolling solution, where top is transitioned property.

// 重設(style)屬性
element.style.top=getComputedStyle(element).top;

2016年12月21日星期三

(js)jq.slide會控制的地方

display: inline-block;
overflow: hidden;
height: 101.269px;<animate>
padding-top: 44.8092px;<animate>
padding-bottom: 44.8092px;<animate>
margin-top: 0px;
margin-bottom: 0px

inline元素視為inline-block

inline只能透過(font-size)(padding)修改高度

(css)box-sizing的問題

摘要

box-sizing 屬性用來改變默認的 CSS 盒模型對元素寬高的計算方式。這個屬性可以用於模擬那些非正確支持標準盒模型的瀏覽器的表現。

初始值	`content-box`
適用元素	all elements that accept width or height
是否是繼承屬性	否
適用媒體	visual
計算值	as specified
Animation type	discrete
正規順序	the unique non-ambiguous order defined by the formal grammar

語法

如何閱讀 CSS 語法。

content-box | border-box

/* 關鍵字值 */
box-sizing: content-box;
box-sizing: border-box;

/* 全局值 */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

值

content-box: 默認值，標準盒模型。 width 與 height 只包括內容的寬和高，不包括邊框（border），內邊距（padding），外邊距（margin）。注意: 內邊距, 邊框 & 外邊距都在這個盒子的外部。比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那麼在瀏覽器中的渲染的實際寬度將是370px;

尺寸計算公式：width = 內容的寬度，height = 內容的高度。寬度和高度都不包含內容的邊框（border）和內邊距（padding）。
border-box: width 與 height 包括內邊距（padding）與邊框（border），不包括外邊距（margin）。這是IE 怪異模式（Quirks mode）使用的盒模型。注意：這個時候內邊距和邊框將會包括在盒子中。比如 .box {width: 350px; border: 10px solid black;} 瀏覽器渲染出的寬度將是350px. 如果計算後的最內部的內容寬度為負值，都會被計算成0，內容還在，所以不可能通過border-box來隱藏元素。

尺寸計算公式：width = border + padding + 內容的寬度，height = border + padding + 內容的高度。
正式的語法

如何閱讀 CSS 語法。

content-box | border-box

例子

/* 支持 Firefox, Chrome, Safari, Opera, IE8+ 和老的Android瀏覽器 */

.example {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

訂閱：文章 (Atom)

2016年12月29日 星期四

2016年12月27日 星期二

2016年12月26日 星期一

2016年12月22日 星期四

2016年12月21日 星期三

摘要

語法

值

正式的語法

例子

2016年12月29日星期四

2016年12月27日星期二

2016年12月26日星期一

2016年12月22日星期四

2016年12月21日星期三