zeptoで使えるメソッドの取得
JavaScriptで正規表現による文字列検索を行い、メソッドの宣言と思われる箇所を抜き出した
ready get size remove each filter is not eq first last find closest parents parent children siblings empty pluck show replaceWith hide toggle prev next html text attr removeAttr data val offset css index hasClass addClass removeClass toggleClass submit
(function(undefined){ if (String.prototype.trim === undefined) // fix for iOS 3.2 String.prototype.trim = function(){ return this.replace(/^\s+/, '').replace(/\s+$/, '') }; // For iOS 3.x // from https://developer.mozilla.org/en/JavaScript/Reference/Global-Objects/Array/reduce if (Array.prototype.reduce === undefined) Array.prototype.reduce = function(fun){ if(this === void 0 || this === null) throw new TypeError(); var t = Object(this), len = t.length >>> 0, k = 0, accumulator; if(typeof fun != 'function') throw new TypeError(); if(len == 0 && arguments.length == 1) throw new TypeError(); if(arguments.length >= 2) accumulator = arguments[1]; else do{ if(k in t){ accumulator = t[k++]; break; } if(++k >= len) throw new TypeError(); } while (true); while (k < len){ if(k in t) accumulator = fun.call(undefined, accumulator, t[k], k, t); k++; } return accumulator; }; })(); var Zepto = (function() { var undefined, key, css, $$, classList, emptyArray = [], slice = emptyArray.slice, document = window.document, elementDisplay = {}, classCache = {}, getComputedStyle = document.defaultView.getComputedStyle, fragmentRE = /^\s*<[^>]+>/, container = document.createElement('div'); function isF(value) { return ({}).toString.call(value) == "[object Function]" } function isO(value) { return value instanceof Object } function isA(value) { return value instanceof Array } function compact(array) { return array.filter(function(item){ return item !== undefined && item !== null }) } function flatten(array) { return [].concat.apply([], array) } function camelize(str) { return str.replace(/-+(.)?/g, function(match, chr){ return chr ? chr.toUpperCase() : '' }) } function uniq(array) { return array.filter(function(item,index,array){ return array.indexOf(item) == index }) } function classRE(name){ return name in classCache ? classCache[name] : (classCache[name] = new RegExp('(^|\\s)' + name + '(\\s|$)')); } function defaultDisplay(nodeName) { var element, display; if (!elementDisplay[nodeName]) { element = document.createElement(nodeName); document.body.insertAdjacentElement("beforeEnd", element); display = getComputedStyle(element, '').getPropertyValue("display"); element.parentNode.removeChild(element); display == "none" && (display = "block"); elementDisplay[nodeName] = display; } return elementDisplay[nodeName]; } function fragment(html) { container.innerHTML = ('' + html).trim(); return slice.call(container.childNodes); } function Z(dom, selector){ dom = dom || emptyArray; dom.__proto__ = Z.prototype; dom.selector = selector || ''; return dom; } function $(selector, context){ if (!selector) return Z(); if (context !== undefined) return $(context).find(selector); else if (isF(selector)) return $(document).ready(selector); else if (selector instanceof Z) return selector; else { var dom; if (isA(selector)) dom = compact(selector); else if (selector instanceof Element || selector === window || selector === document) dom = [selector], selector = null; else if (fragmentRE.test(selector)) dom = fragment(selector); else if (selector.nodeType && selector.nodeType == 3) dom = [selector]; else dom = $$(document, selector); return Z(dom, selector); } } $.extend = function(target, source){ for (key in source) target[key] = source[key]; return target } $.qsa = $$ = function(element, selector){ return slice.call(element.querySelectorAll(selector)) } function filtered(nodes, selector){ return selector === undefined ? $(nodes) : $(nodes).filter(selector); } function funcArg(context, arg, idx, payload){ return isF(arg) ? arg.call(context, idx, payload) : arg; } $.isFunction = isF; $.isObject = isO; $.isArray = isA; $.fn = { forEach: emptyArray.forEach, map: emptyArray.map, reduce: emptyArray.reduce, push: emptyArray.push, indexOf: emptyArray.indexOf, concat: emptyArray.concat, ready: function(callback){ if (document.readyState == 'complete' || document.readyState == 'loaded') callback(); document.addEventListener('DOMContentLoaded', callback, false); return this; }, get: function(idx){ return idx === undefined ? this : this[idx] }, size: function(){ return this.length }, remove: function(){ return this.each(function(){ this.parentNode.removeChild(this) }) }, each: function(callback){ this.forEach(function(el, idx){ callback.call(el, idx, el) }); return this; }, filter: function(selector){ return $([].filter.call(this, function(element){ return $$(element.parentNode, selector).indexOf(element) >= 0; })); }, add:function(selector,context){ return $(uniq(this.concat($(selector,context)))); }, is: function(selector){ return this.length > 0 && $(this[0]).filter(selector).length > 0; }, not: function(selector){ var nodes=[]; if (isF(selector) && selector.call !== undefined) this.each(function(idx){ if (!selector.call(this,idx)) nodes.push(this); }); else { var ignores = slice.call( typeof selector == 'string' ? this.filter(selector) : selector instanceof NodeList ? selector : $(selector)); slice.call(this).forEach(function(el){ if (ignores.indexOf(el) < 0) nodes.push(el); }); } return $(nodes); }, eq: function(idx){ return $(this[idx]) }, first: function(){ return $(this[0]) }, last: function(){ return $(this[this.length - 1]) }, find: function(selector){ var result; if (this.length == 1) result = $$(this[0], selector); else result = flatten(this.map(function(el){ return $$(el, selector) })); return $(result); }, closest: function(selector, context){ var node = this[0], nodes = $$(context !== undefined ? context : document, selector); if (nodes.length === 0) node = null; while(node && node !== document && nodes.indexOf(node) < 0) node = node.parentNode; return $(node !== document && node); }, parents: function(selector){ var ancestors = [], nodes = this; while (nodes.length > 0) nodes = compact(nodes.map(function(node){ if ((node = node.parentNode) && node !== document && ancestors.indexOf(node) < 0) { ancestors.push(node); return node; } })); return filtered(ancestors, selector); }, parent: function(selector){ return filtered(uniq(compact(this.pluck('parentNode'))), selector); }, children: function(selector){ return filtered(flatten(this.map(function(el){ return slice.call(el.children) })), selector); }, siblings: function(selector){ return filtered(flatten(this.map(function(el){ return slice.call(el.parentNode.children).filter(function(child){ return child!==el }); })), selector); }, empty: function(){ return this.each(function(){ this.innerHTML = '' }) }, pluck: function(property){ return this.map(function(element){ return element[property] }) }, show: function(){ return this.each(function() { this.style.display == "none" && (this.style.display = null); if (getComputedStyle(this, '').getPropertyValue("display") == "none") { this.style.display = defaultDisplay(this.nodeName) } }) }, replaceWith: function(newContent) { return this.each(function() { var element = $(this), prev = element.prev(); element.remove(); prev.after(newContent); }); }, hide: function(){ return this.css("display", "none") }, toggle: function(){ return this.css("display") == "none" ? this.show() : this.hide(); }, prev: function(){ return $(this.pluck('previousElementSibling')) }, next: function(){ return $(this.pluck('nextElementSibling')) }, html: function(html){ return html === undefined ? (this.length > 0 ? this[0].innerHTML : null) : this.each(function(idx){ this.innerHTML = funcArg(this, html, idx, this.innerHTML) }); }, text: function(text){ return text === undefined ? (this.length > 0 ? this[0].innerText : null) : this.each(function(){ this.innerText = text }); }, attr: function(name, value){ return (typeof name == 'string' && value === undefined) ? (this.length > 0 && this[0].nodeName == 'INPUT' && this[0].type == 'text' && name == 'value') ? (this.val()) : (this.length > 0 ? this[0].getAttribute(name) || (name in this[0] ? this[0][name] : undefined) : undefined) : this.each(function(idx){ if (isO(name)) for (key in name) this.setAttribute(key, name[key]) else this.setAttribute(name, funcArg(this, value, idx, this.getAttribute(name))); }); }, removeAttr: function(name) { return this.each(function() { this.removeAttribute(name); }); }, data: function(name, value){ return this.attr('data-' + name, value); }, val: function(value){ return (value === undefined) ? (this.length > 0 ? this[0].value : null) : this.each(function(){ this.value = value; }); }, offset: function(){ if(this.length==0) return null; var obj = this[0].getBoundingClientRect(); return { left: obj.left + document.body.scrollLeft, top: obj.top + document.body.scrollTop, width: obj.width, height: obj.height }; }, css: function(property, value){ if (value === undefined && typeof property == 'string') return this[0].style[camelize(property)] || getComputedStyle(this[0], '').getPropertyValue(property); css = ''; for (key in property) css += key + ':' + property[key] + ';'; if (typeof property == 'string') css = property + ':' + value; return this.each(function() { this.style.cssText += ';' + css }); }, index: function(element){ return this.indexOf($(element)[0]); }, hasClass: function(name){ return classRE(name).test(this[0].className); }, addClass: function(name){ return this.each(function(idx) { classList = []; var cls = this.className, newName = funcArg(this, name, idx, cls); newName.split(/\s+/g).forEach(function(klass) { if (!$(this).hasClass(klass)) { classList.push(klass) } }, this); classList.length && (this.className += (cls ? " " : "") + classList.join(" ")) }) }, removeClass: function(name){ return this.each(function(idx) { classList = this.className; funcArg(this, name, idx, classList).split(/\s+/g).forEach(function(klass) { classList = classList.replace(classRE(klass), " ") }); this.className = classList.trim() }) }, toggleClass: function(name, when){ return this.each(function(idx){ var cls = this.className, newName = funcArg(this, name, idx, cls); ((when !== undefined && !when) || $(this).hasClass(newName)) ? $(this).removeClass(newName) : $(this).addClass(newName) }); }, submit: function () { return this.each(function () { try { // Submit first form element this.submit(); return; } catch(e) {}; }); } }; ['width', 'height'].forEach(function(property){ $.fn[property] = function(){ var offset = this.offset(); return offset ? offset[property] : null } }); var adjacencyOperators = [ 'prepend', 'after', 'before', 'append' ]; function insert(operator, element, other) { var parent = (!operator || operator == 3) ? element : element.parentNode; parent.insertBefore(other, !operator ? parent.firstChild : // prepend operator == 1 ? element.nextSibling : // after operator == 2 ? element : // before null); // append } adjacencyOperators.forEach(function(key, operator) { $.fn[key] = function(html){ if (typeof(html) != 'object') html = fragment(html); return this.each(function(index, element){ if (html.length || html instanceof Z) { dom = html; for (var i=0; i= 200 && xhr.status < 300) || xhr.status == 0) { if (mime == 'application/json') { try { result = JSON.parse(xhr.responseText); } catch (e) { error = e; } } else result = xhr.responseText; if (error) settings.error(xhr, 'parsererror', error); else settings.success(result, 'success', xhr); } else { error = true; settings.error(xhr, 'error'); } settings.complete(xhr, error ? 'error' : 'success'); } }; xhr.open(settings.type, settings.url, true); if (settings.beforeSend(xhr, settings) === false) { xhr.abort(); return false; } if (settings.contentType) settings.headers['Content-Type'] = settings.contentType; for (name in settings.headers) xhr.setRequestHeader(name, settings.headers[name]); xhr.send(settings.data); return xhr; }; $.get = function(url, success){ $.ajax({ url: url, success: success }) }; $.post = function(url, data, success, dataType){ if ($.isFunction(data)) dataType = dataType || success, success = data, data = null; $.ajax({ type: 'POST', url: url, data: data, success: success, dataType: dataType }); }; $.getJSON = function(url, success){ $.ajax({ url: url, success: success, dataType: 'json' }) }; $.fn.load = function(url, success){ if (!this.length) return this; var self = this, parts = url.split(/\s/), selector; if (parts.length > 1) url = parts[0], selector = parts[1]; $.get(url, function(response){ self.html(selector ? $(document.createElement('div')).html(response).find(selector).html() : response); success && success(); }); return this; }; $.param = function(obj, v){ var result = [], add = function(key, value){ result.push(encodeURIComponent(v ? v + '[' + key + ']' : key) + '=' + encodeURIComponent(value)); }, isObjArray = $.isArray(obj); for(key in obj) if(isObject(obj[key])) result.push($.param(obj[key], (v ? v + '[' + key + ']' : key))); else add(isObjArray ? '' : key, obj[key]); return result.join('&').replace('%20', '+'); }; })(Zepto); (function($){ var touch = {}, touchTimeout; function parentIfText(node){ return 'tagName' in node ? node : node.parentNode; } function swipeDirection(x1, x2, y1, y2){ var xDelta = Math.abs(x1 - x2), yDelta = Math.abs(y1 - y2); if (xDelta >= yDelta) { return (x1 - x2 > 0 ? 'Left' : 'Right'); } else { return (y1 - y2 > 0 ? 'Up' : 'Down'); } } $(document).ready(function(){ $(document.body).bind('touchstart', function(e){ var now = Date.now(), delta = now - (touch.last || now); touch.target = parentIfText(e.touches[0].target); touchTimeout && clearTimeout(touchTimeout); touch.x1 = e.touches[0].pageX; touch.y1 = e.touches[0].pageY; if (delta > 0 && delta <= 250) touch.isDoubleTap = true; touch.last = now; }).bind('touchmove', function(e){ touch.x2 = e.touches[0].pageX; touch.y2 = e.touches[0].pageY; }).bind('touchend', function(e){ if (touch.isDoubleTap) { $(touch.target).trigger('doubleTap'); touch = {}; } else if (touch.x2 > 0 || touch.y2 > 0) { (Math.abs(touch.x1 - touch.x2) > 30 || Math.abs(touch.y1 - touch.y2) > 30) && $(touch.target).trigger('swipe') && $(touch.target).trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2))); touch.x1 = touch.x2 = touch.y1 = touch.y2 = touch.last = 0; } else if ('last' in touch) { touchTimeout = setTimeout(function(){ touchTimeout = null; $(touch.target).trigger('tap') touch = {}; }, 250); } }).bind('touchcancel', function(){ touch = {} }); }); ['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap'].forEach(function(m){ $.fn[m] = function(callback){ return this.bind(m, callback) } }); })(Zepto);
view source
JavaScript
CSS
HTML
ABOUT
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。