;(function($) { "use strict"; $.fn.transitionEnd = function(callback) { var events = ['webkitTransitionEnd', 'transitionend', 'oTransitionEnd', 'MSTransitionEnd', 'msTransitionEnd'], i, dom = this; function fireCallBack(e) { /*jshint validthis:true */ if (e.target !== this) return; callback.call(this, e); for (i = 0; i < events.length; i++) { dom.off(events[i], fireCallBack); } } if (callback) { for (i = 0; i < events.length; i++) { dom.on(events[i], fireCallBack); } } return this; }; $.support = (function() { var support = { touch: !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch) }; return support; })(); $.touchEvents = { start: $.support.touch ? 'touchstart' : 'mousedown', move: $.support.touch ? 'touchmove' : 'mousemove', end: $.support.touch ? 'touchend' : 'mouseup' }; $.getTouchPosition = function(e) { e = e.originalEvent || e; //jquery wrap the originevent if(e.type === 'touchstart' || e.type === 'touchmove' || e.type === 'touchend') { return { x: e.targetTouches[0].pageX, y: e.targetTouches[0].pageY }; } else { return { x: e.pageX, y: e.pageY }; } }; $.fn.scrollHeight = function() { return this[0].scrollHeight; }; $.fn.transform = function(transform) { for (var i = 0; i < this.length; i++) { var elStyle = this[i].style; elStyle.webkitTransform = elStyle.MsTransform = elStyle.msTransform = elStyle.MozTransform = elStyle.OTransform = elStyle.transform = transform; } return this; }; $.fn.transition = function(duration) { if (typeof duration !== 'string') { duration = duration + 'ms'; } for (var i = 0; i < this.length; i++) { var elStyle = this[i].style; elStyle.webkitTransitionDuration = elStyle.MsTransitionDuration = elStyle.msTransitionDuration = elStyle.MozTransitionDuration = elStyle.OTransitionDuration = elStyle.transitionDuration = duration; } return this; }; $.getTranslate = function (el, axis) { var matrix, curTransform, curStyle, transformMatrix; // automatic axis detection if (typeof axis === 'undefined') { axis = 'x'; } curStyle = window.getComputedStyle(el, null); if (window.WebKitCSSMatrix) { // Some old versions of Webkit choke when 'none' is passed; pass // empty string instead in this case transformMatrix = new WebKitCSSMatrix(curStyle.webkitTransform === 'none' ? '' : curStyle.webkitTransform); } else { transformMatrix = curStyle.MozTransform || curStyle.OTransform || curStyle.MsTransform || curStyle.msTransform || curStyle.transform || curStyle.getPropertyValue('transform').replace('translate(', 'matrix(1, 0, 0, 1,'); matrix = transformMatrix.toString().split(','); } if (axis === 'x') { //Latest Chrome and webkits Fix if (window.WebKitCSSMatrix) curTransform = transformMatrix.m41; //Crazy IE10 Matrix else if (matrix.length === 16) curTransform = parseFloat(matrix[12]); //Normal Browsers else curTransform = parseFloat(matrix[4]); } if (axis === 'y') { //Latest Chrome and webkits Fix if (window.WebKitCSSMatrix) curTransform = transformMatrix.m42; //Crazy IE10 Matrix else if (matrix.length === 16) curTransform = parseFloat(matrix[13]); //Normal Browsers else curTransform = parseFloat(matrix[5]); } return curTransform || 0; }; $.requestAnimationFrame = function (callback) { if (window.requestAnimationFrame) return window.requestAnimationFrame(callback); else if (window.webkitRequestAnimationFrame) return window.webkitRequestAnimationFrame(callback); else if (window.mozRequestAnimationFrame) return window.mozRequestAnimationFrame(callback); else { return window.setTimeout(callback, 1000 / 60); } }; $.cancelAnimationFrame = function (id) { if (window.cancelAnimationFrame) return window.cancelAnimationFrame(id); else if (window.webkitCancelAnimationFrame) return window.webkitCancelAnimationFrame(id); else if (window.mozCancelAnimationFrame) return window.mozCancelAnimationFrame(id); else { return window.clearTimeout(id); } }; $.fn.join = function(arg) { return this.toArray().join(arg); } })($); +(function ($) { "use strict"; $.Template7 = $.t7 = (function () { function isArray(arr) { return Object.prototype.toString.apply(arr) === '[object Array]'; } function isObject(obj) { return obj instanceof Object; } function isFunction(func) { return typeof func === 'function'; } var cache = {}; function helperToSlices(string) { var helperParts = string.replace(/[{}#}]/g, '').split(' '); var slices = []; var shiftIndex, i, j; for (i = 0; i < helperParts.length; i++) { var part = helperParts[i]; if (i === 0) slices.push(part); else { if (part.indexOf('"') === 0) { // Plain String if (part.match(/"/g).length === 2) { // One word string slices.push(part); } else { // Find closed Index shiftIndex = 0; for (j = i + 1; j < helperParts.length; j++) { part += ' ' + helperParts[j]; if (helperParts[j].indexOf('"') >= 0) { shiftIndex = j; slices.push(part); break; } } if (shiftIndex) i = shiftIndex; } } else { if (part.indexOf('=') > 0) { // Hash var hashParts = part.split('='); var hashName = hashParts[0]; var hashContent = hashParts[1]; if (hashContent.match(/"/g).length !== 2) { shiftIndex = 0; for (j = i + 1; j < helperParts.length; j++) { hashContent += ' ' + helperParts[j]; if (helperParts[j].indexOf('"') >= 0) { shiftIndex = j; break; } } if (shiftIndex) i = shiftIndex; } var hash = [hashName, hashContent.replace(/"/g,'')]; slices.push(hash); } else { // Plain variable slices.push(part); } } } } return slices; } function stringToBlocks(string) { var blocks = [], i, j, k; if (!string) return []; var _blocks = string.split(/({{[^{^}]*}})/); for (i = 0; i < _blocks.length; i++) { var block = _blocks[i]; if (block === '') continue; if (block.indexOf('{{') < 0) { blocks.push({ type: 'plain', content: block }); } else { if (block.indexOf('{/') >= 0) { continue; } if (block.indexOf('{#') < 0 && block.indexOf(' ') < 0 && block.indexOf('else') < 0) { // Simple variable blocks.push({ type: 'variable', contextName: block.replace(/[{}]/g, '') }); continue; } // Helpers var helperSlices = helperToSlices(block); var helperName = helperSlices[0]; var helperContext = []; var helperHash = {}; for (j = 1; j < helperSlices.length; j++) { var slice = helperSlices[j]; if (isArray(slice)) { // Hash helperHash[slice[0]] = slice[1] === 'false' ? false : slice[1]; } else { helperContext.push(slice); } } if (block.indexOf('{#') >= 0) { // Condition/Helper var helperStartIndex = i; var helperContent = ''; var elseContent = ''; var toSkip = 0; var shiftIndex; var foundClosed = false, foundElse = false, foundClosedElse = false, depth = 0; for (j = i + 1; j < _blocks.length; j++) { if (_blocks[j].indexOf('{{#') >= 0) { depth ++; } if (_blocks[j].indexOf('{{/') >= 0) { depth --; } if (_blocks[j].indexOf('{{#' + helperName) >= 0) { helperContent += _blocks[j]; if (foundElse) elseContent += _blocks[j]; toSkip ++; } else if (_blocks[j].indexOf('{{/' + helperName) >= 0) { if (toSkip > 0) { toSkip--; helperContent += _blocks[j]; if (foundElse) elseContent += _blocks[j]; } else { shiftIndex = j; foundClosed = true; break; } } else if (_blocks[j].indexOf('else') >= 0 && depth === 0) { foundElse = true; } else { if (!foundElse) helperContent += _blocks[j]; if (foundElse) elseContent += _blocks[j]; } } if (foundClosed) { if (shiftIndex) i = shiftIndex; blocks.push({ type: 'helper', helperName: helperName, contextName: helperContext, content: helperContent, inverseContent: elseContent, hash: helperHash }); } } else if (block.indexOf(' ') > 0) { blocks.push({ type: 'helper', helperName: helperName, contextName: helperContext, hash: helperHash }); } } } return blocks; } var Template7 = function (template) { var t = this; t.template = template; function getCompileFn(block, depth) { if (block.content) return compile(block.content, depth); else return function () {return ''; }; } function getCompileInverse(block, depth) { if (block.inverseContent) return compile(block.inverseContent, depth); else return function () {return ''; }; } function getCompileVar(name, ctx) { var variable, parts, levelsUp = 0, initialCtx = ctx; if (name.indexOf('../') === 0) { levelsUp = name.split('../').length - 1; var newDepth = ctx.split('_')[1] - levelsUp; ctx = 'ctx_' + (newDepth >= 1 ? newDepth : 1); parts = name.split('../')[levelsUp].split('.'); } else if (name.indexOf('@global') === 0) { ctx = '$.Template7.global'; parts = name.split('@global.')[1].split('.'); } else if (name.indexOf('@root') === 0) { ctx = 'ctx_1'; parts = name.split('@root.')[1].split('.'); } else { parts = name.split('.'); } variable = ctx; for (var i = 0; i < parts.length; i++) { var part = parts[i]; if (part.indexOf('@') === 0) { if (i > 0) { variable += '[(data && data.' + part.replace('@', '') + ')]'; } else { variable = '(data && data.' + name.replace('@', '') + ')'; } } else { if (isFinite(part)) { variable += '[' + part + ']'; } else { if (part.indexOf('this') === 0) { variable = part.replace('this', ctx); } else { variable += '.' + part; } } } } return variable; } function getCompiledArguments(contextArray, ctx) { var arr = []; for (var i = 0; i < contextArray.length; i++) { if (contextArray[i].indexOf('"') === 0) arr.push(contextArray[i]); else { arr.push(getCompileVar(contextArray[i], ctx)); } } return arr.join(', '); } function compile(template, depth) { depth = depth || 1; template = template || t.template; if (typeof template !== 'string') { throw new Error('Template7: Template must be a string'); } var blocks = stringToBlocks(template); if (blocks.length === 0) { return function () { return ''; }; } var ctx = 'ctx_' + depth; var resultString = '(function (' + ctx + ', data) {\n'; if (depth === 1) { resultString += 'function isArray(arr){return Object.prototype.toString.apply(arr) === \'[object Array]\';}\n'; resultString += 'function isFunction(func){return (typeof func === \'function\');}\n'; resultString += 'function c(val, ctx) {if (typeof val !== "undefined") {if (isFunction(val)) {return val.call(ctx);} else return val;} else return "";}\n'; } resultString += 'var r = \'\';\n'; var i, j, context; for (i = 0; i < blocks.length; i++) { var block = blocks[i]; // Plain block if (block.type === 'plain') { resultString += 'r +=\'' + (block.content).replace(/\r/g, '\\r').replace(/\n/g, '\\n').replace(/'/g, '\\' + '\'') + '\';'; continue; } var variable, compiledArguments; // Variable block if (block.type === 'variable') { variable = getCompileVar(block.contextName, ctx); resultString += 'r += c(' + variable + ', ' + ctx + ');'; } // Helpers block if (block.type === 'helper') { if (block.helperName in t.helpers) { compiledArguments = getCompiledArguments(block.contextName, ctx); resultString += 'r += ($.Template7.helpers.' + block.helperName + ').call(' + ctx + ', ' + (compiledArguments && (compiledArguments + ', ')) +'{hash:' + JSON.stringify(block.hash) + ', data: data || {}, fn: ' + getCompileFn(block, depth+1) + ', inverse: ' + getCompileInverse(block, depth+1) + ', root: ctx_1});'; } else { if (block.contextName.length > 0) { throw new Error('Template7: Missing helper: "' + block.helperName + '"'); } else { variable = getCompileVar(block.helperName, ctx); resultString += 'if (' + variable + ') {'; resultString += 'if (isArray(' + variable + ')) {'; resultString += 'r += ($.Template7.helpers.each).call(' + ctx + ', ' + variable + ', {hash:' + JSON.stringify(block.hash) + ', data: data || {}, fn: ' + getCompileFn(block, depth+1) + ', inverse: ' + getCompileInverse(block, depth+1) + ', root: ctx_1});'; resultString += '}else {'; resultString += 'r += ($.Template7.helpers.with).call(' + ctx + ', ' + variable + ', {hash:' + JSON.stringify(block.hash) + ', data: data || {}, fn: ' + getCompileFn(block, depth+1) + ', inverse: ' + getCompileInverse(block, depth+1) + ', root: ctx_1});'; resultString += '}}'; } } } } resultString += '\nreturn r;})'; return eval.call(window, resultString); } t.compile = function (template) { if (!t.compiled) { t.compiled = compile(template); } return t.compiled; }; }; Template7.prototype = { options: {}, helpers: { 'if': function (context, options) { if (isFunction(context)) { context = context.call(this); } if (context) { return options.fn(this, options.data); } else { return options.inverse(this, options.data); } }, 'unless': function (context, options) { if (isFunction(context)) { context = context.call(this); } if (!context) { return options.fn(this, options.data); } else { return options.inverse(this, options.data); } }, 'each': function (context, options) { var ret = '', i = 0; if (isFunction(context)) { context = context.call(this); } if (isArray(context)) { if (options.hash.reverse) { context = context.reverse(); } for (i = 0; i < context.length; i++) { ret += options.fn(context[i], {first: i === 0, last: i === context.length - 1, index: i}); } if (options.hash.reverse) { context = context.reverse(); } } else { for (var key in context) { i++; ret += options.fn(context[key], {key: key}); } } if (i > 0) return ret; else return options.inverse(this); }, 'with': function (context, options) { if (isFunction(context)) { context = context.call(this); } return options.fn(context); }, 'join': function (context, options) { if (isFunction(context)) { context = context.call(this); } return context.join(options.hash.delimiter || options.hash.delimeter); }, 'js': function (expression, options) { var func; if (expression.indexOf('return')>=0) { func = '(function(){'+expression+'})'; } else { func = '(function(){return ('+expression+')})'; } return eval.call(this, func).call(this); }, 'js_compare': function (expression, options) { var func; if (expression.indexOf('return')>=0) { func = '(function(){'+expression+'})'; } else { func = '(function(){return ('+expression+')})'; } var condition = eval.call(this, func).call(this); if (condition) { return options.fn(this, options.data); } else { return options.inverse(this, options.data); } } } }; var t7 = function (template, data) { if (arguments.length === 2) { var instance = new Template7(template); var rendered = instance.compile()(data); instance = null; return (rendered); } else return new Template7(template); }; t7.registerHelper = function (name, fn) { Template7.prototype.helpers[name] = fn; }; t7.unregisterHelper = function (name) { Template7.prototype.helpers[name] = undefined; delete Template7.prototype.helpers[name]; }; t7.compile = function (template, options) { var instance = new Template7(template, options); return instance.compile(); }; t7.options = Template7.prototype.options; t7.helpers = Template7.prototype.helpers; return t7; })(); })($); + function($) { "use strict"; var Picker = function (params) { var p = this; var defaults = { updateValuesOnMomentum: false, updateValuesOnTouchmove: true, rotateEffect: false, momentumRatio: 7, freeMode: false, // Common settings scrollToInput: true, inputReadOnly: true, toolbar: true, toolbarCloseText: '完成', title: '请选择', toolbarTemplate: '
\
\ {{closeText}}\

{{title}}

\
\
', }; params = params || {}; for (var def in defaults) { if (typeof params[def] === 'undefined') { params[def] = defaults[def]; } } p.params = params; p.cols = []; p.initialized = false; // Inline flag p.inline = p.params.container ? true : false; // 3D Transforms origin bug, only on safari var originBug = $.device.ios || (navigator.userAgent.toLowerCase().indexOf('safari') >= 0 && navigator.userAgent.toLowerCase().indexOf('chrome') < 0) && !$.device.android; // Should be converted to popover function isPopover() { var toPopover = false; if (!p.params.convertToPopover && !p.params.onlyInPopover) return toPopover; if (!p.inline && p.params.input) { if (p.params.onlyInPopover) toPopover = true; else { if ($.device.ios) { toPopover = $.device.ipad ? true : false; } else { if ($(window).width() >= 768) toPopover = true; } } } return toPopover; } function inPopover() { if (p.opened && p.container && p.container.length > 0 && p.container.parents('.popover').length > 0) return true; else return false; } // Value p.setValue = function (arrValues, transition) { var valueIndex = 0; for (var i = 0; i < p.cols.length; i++) { if (p.cols[i] && !p.cols[i].divider) { p.cols[i].setValue(arrValues[valueIndex], transition); valueIndex++; } } }; p.updateValue = function () { var newValue = []; var newDisplayValue = []; for (var i = 0; i < p.cols.length; i++) { if (!p.cols[i].divider) { newValue.push(p.cols[i].value); newDisplayValue.push(p.cols[i].displayValue); } } if (newValue.indexOf(undefined) >= 0) { return; } p.value = newValue; p.displayValue = newDisplayValue; if (p.params.onChange) { p.params.onChange(p, p.value, p.displayValue); } if (p.input && p.input.length > 0) { $(p.input).val(p.params.formatValue ? p.params.formatValue(p, p.value, p.displayValue) : p.value.join(' ')); $(p.input).trigger('change'); } }; // Columns Handlers p.initPickerCol = function (colElement, updateItems) { var colContainer = $(colElement); var colIndex = colContainer.index(); var col = p.cols[colIndex]; if (col.divider) return; col.container = colContainer; col.wrapper = col.container.find('.picker-items-col-wrapper'); col.items = col.wrapper.find('.picker-item'); var i, j; var wrapperHeight, itemHeight, itemsHeight, minTranslate, maxTranslate; col.replaceValues = function (values, displayValues) { col.destroyEvents(); col.values = values; col.displayValues = displayValues; var newItemsHTML = p.columnHTML(col, true); col.wrapper.html(newItemsHTML); col.items = col.wrapper.find('.picker-item'); col.calcSize(); col.setValue(col.values[0] || '', 0, true); col.initEvents(); }; col.calcSize = function () { if (!col.values.length) return; if (p.params.rotateEffect) { col.container.removeClass('picker-items-col-absolute'); if (!col.width) col.container.css({width:''}); } var colWidth, colHeight; colWidth = 0; colHeight = col.container[0].offsetHeight; wrapperHeight = col.wrapper[0].offsetHeight; itemHeight = col.items[0].offsetHeight; itemsHeight = itemHeight * col.items.length; minTranslate = colHeight / 2 - itemsHeight + itemHeight / 2; maxTranslate = colHeight / 2 - itemHeight / 2; if (col.width) { colWidth = col.width; if (parseInt(colWidth, 10) === colWidth) colWidth = colWidth + 'px'; col.container.css({width: colWidth}); } if (p.params.rotateEffect) { if (!col.width) { col.items.each(function () { var item = $(this); item.css({width:'auto'}); colWidth = Math.max(colWidth, item[0].offsetWidth); item.css({width:''}); }); col.container.css({width: (colWidth + 2) + 'px'}); } col.container.addClass('picker-items-col-absolute'); } }; col.calcSize(); col.wrapper.transform('translate3d(0,' + maxTranslate + 'px,0)').transition(0); var activeIndex = 0; var animationFrameId; // Set Value Function col.setValue = function (newValue, transition, valueCallbacks) { if (typeof transition === 'undefined') transition = ''; var newActiveIndex = col.wrapper.find('.picker-item[data-picker-value="' + newValue + '"]').index(); if(typeof newActiveIndex === 'undefined' || newActiveIndex === -1) { col.value = col.displayValue = newValue; return; } var newTranslate = -newActiveIndex * itemHeight + maxTranslate; // Update wrapper col.wrapper.transition(transition); col.wrapper.transform('translate3d(0,' + (newTranslate) + 'px,0)'); // Watch items if (p.params.updateValuesOnMomentum && col.activeIndex && col.activeIndex !== newActiveIndex ) { $.cancelAnimationFrame(animationFrameId); col.wrapper.transitionEnd(function(){ $.cancelAnimationFrame(animationFrameId); }); updateDuringScroll(); } // Update items col.updateItems(newActiveIndex, newTranslate, transition, valueCallbacks); }; col.updateItems = function (activeIndex, translate, transition, valueCallbacks) { if (typeof translate === 'undefined') { translate = $.getTranslate(col.wrapper[0], 'y'); } if(typeof activeIndex === 'undefined') activeIndex = -Math.round((translate - maxTranslate)/itemHeight); if (activeIndex < 0) activeIndex = 0; if (activeIndex >= col.items.length) activeIndex = col.items.length - 1; var previousActiveIndex = col.activeIndex; col.activeIndex = activeIndex; //去掉 .picker-after-selected, .picker-before-selected 以提高性能 col.wrapper.find('.picker-selected').removeClass('picker-selected'); if (p.params.rotateEffect) { col.items.transition(transition); } var selectedItem = col.items.eq(activeIndex).addClass('picker-selected').transform(''); if (valueCallbacks || typeof valueCallbacks === 'undefined') { // Update values col.value = selectedItem.attr('data-picker-value'); col.displayValue = col.displayValues ? col.displayValues[activeIndex] : col.value; // On change callback if (previousActiveIndex !== activeIndex) { if (col.onChange) { col.onChange(p, col.value, col.displayValue); } p.updateValue(); } } // Set 3D rotate effect if (!p.params.rotateEffect) { return; } var percentage = (translate - (Math.floor((translate - maxTranslate)/itemHeight) * itemHeight + maxTranslate)) / itemHeight; col.items.each(function () { var item = $(this); var itemOffsetTop = item.index() * itemHeight; var translateOffset = maxTranslate - translate; var itemOffset = itemOffsetTop - translateOffset; var percentage = itemOffset / itemHeight; var itemsFit = Math.ceil(col.height / itemHeight / 2) + 1; var angle = (-18*percentage); if (angle > 180) angle = 180; if (angle < -180) angle = -180; // Far class if (Math.abs(percentage) > itemsFit) item.addClass('picker-item-far'); else item.removeClass('picker-item-far'); // Set transform item.transform('translate3d(0, ' + (-translate + maxTranslate) + 'px, ' + (originBug ? -110 : 0) + 'px) rotateX(' + angle + 'deg)'); }); }; function updateDuringScroll() { animationFrameId = $.requestAnimationFrame(function () { col.updateItems(undefined, undefined, 0); updateDuringScroll(); }); } // Update items on init if (updateItems) col.updateItems(0, maxTranslate, 0); var allowItemClick = true; var isTouched, isMoved, touchStartY, touchCurrentY, touchStartTime, touchEndTime, startTranslate, returnTo, currentTranslate, prevTranslate, velocityTranslate, velocityTime; function handleTouchStart (e) { if (isMoved || isTouched) return; e.preventDefault(); isTouched = true; var position = $.getTouchPosition(e); touchStartY = touchCurrentY = position.y; touchStartTime = (new Date()).getTime(); allowItemClick = true; startTranslate = currentTranslate = $.getTranslate(col.wrapper[0], 'y'); } function handleTouchMove (e) { if (!isTouched) return; e.preventDefault(); allowItemClick = false; var position = $.getTouchPosition(e); touchCurrentY = position.y; if (!isMoved) { // First move $.cancelAnimationFrame(animationFrameId); isMoved = true; startTranslate = currentTranslate = $.getTranslate(col.wrapper[0], 'y'); col.wrapper.transition(0); } e.preventDefault(); var diff = touchCurrentY - touchStartY; currentTranslate = startTranslate + diff; returnTo = undefined; // Normalize translate if (currentTranslate < minTranslate) { currentTranslate = minTranslate - Math.pow(minTranslate - currentTranslate, 0.8); returnTo = 'min'; } if (currentTranslate > maxTranslate) { currentTranslate = maxTranslate + Math.pow(currentTranslate - maxTranslate, 0.8); returnTo = 'max'; } // Transform wrapper col.wrapper.transform('translate3d(0,' + currentTranslate + 'px,0)'); // Update items col.updateItems(undefined, currentTranslate, 0, p.params.updateValuesOnTouchmove); // Calc velocity velocityTranslate = currentTranslate - prevTranslate || currentTranslate; velocityTime = (new Date()).getTime(); prevTranslate = currentTranslate; } function handleTouchEnd (e) { if (!isTouched || !isMoved) { isTouched = isMoved = false; return; } isTouched = isMoved = false; col.wrapper.transition(''); if (returnTo) { if (returnTo === 'min') { col.wrapper.transform('translate3d(0,' + minTranslate + 'px,0)'); } else col.wrapper.transform('translate3d(0,' + maxTranslate + 'px,0)'); } touchEndTime = new Date().getTime(); var velocity, newTranslate; if (touchEndTime - touchStartTime > 300) { newTranslate = currentTranslate; } else { velocity = Math.abs(velocityTranslate / (touchEndTime - velocityTime)); newTranslate = currentTranslate + velocityTranslate * p.params.momentumRatio; } newTranslate = Math.max(Math.min(newTranslate, maxTranslate), minTranslate); // Active Index var activeIndex = -Math.floor((newTranslate - maxTranslate)/itemHeight); // Normalize translate if (!p.params.freeMode) newTranslate = -activeIndex * itemHeight + maxTranslate; // Transform wrapper col.wrapper.transform('translate3d(0,' + (parseInt(newTranslate,10)) + 'px,0)'); // Update items col.updateItems(activeIndex, newTranslate, '', true); // Watch items if (p.params.updateValuesOnMomentum) { updateDuringScroll(); col.wrapper.transitionEnd(function(){ $.cancelAnimationFrame(animationFrameId); }); } // Allow click setTimeout(function () { allowItemClick = true; }, 100); } function handleClick(e) { if (!allowItemClick) return; $.cancelAnimationFrame(animationFrameId); /*jshint validthis:true */ var value = $(this).attr('data-picker-value'); col.setValue(value); } col.initEvents = function (detach) { var method = detach ? 'off' : 'on'; col.container[method]($.touchEvents.start, handleTouchStart); col.container[method]($.touchEvents.move, handleTouchMove); col.container[method]($.touchEvents.end, handleTouchEnd); col.items[method]('click', handleClick); }; col.destroyEvents = function () { col.initEvents(true); }; col.container[0].f7DestroyPickerCol = function () { col.destroyEvents(); }; col.initEvents(); }; p.destroyPickerCol = function (colContainer) { colContainer = $(colContainer); if ('f7DestroyPickerCol' in colContainer[0]) colContainer[0].f7DestroyPickerCol(); }; // Resize cols function resizeCols() { if (!p.opened) return; for (var i = 0; i < p.cols.length; i++) { if (!p.cols[i].divider) { p.cols[i].calcSize(); p.cols[i].setValue(p.cols[i].value, 0, false); } } } $(window).on('resize', resizeCols); // HTML Layout p.columnHTML = function (col, onlyItems) { var columnItemsHTML = ''; var columnHTML = ''; if (col.divider) { columnHTML += '
' + col.content + '
'; } else { for (var j = 0; j < col.values.length; j++) { columnItemsHTML += '
' + (col.displayValues ? col.displayValues[j] : col.values[j]) + '
'; } columnHTML += '
' + columnItemsHTML + '
'; } return onlyItems ? columnItemsHTML : columnHTML; }; p.layout = function () { var pickerHTML = ''; var pickerClass = ''; var i; p.cols = []; var colsHTML = ''; for (i = 0; i < p.params.cols.length; i++) { var col = p.params.cols[i]; colsHTML += p.columnHTML(p.params.cols[i]); p.cols.push(col); } pickerClass = 'weui-picker-modal picker-columns ' + (p.params.cssClass || '') + (p.params.rotateEffect ? ' picker-3d' : '') + (p.params.cols.length === 1 ? ' picker-columns-single' : ''); pickerHTML = '
' + (p.params.toolbar ? p.params.toolbarTemplate.replace(/{{closeText}}/g, p.params.toolbarCloseText).replace(/{{title}}/g, p.params.title) : '') + '
' + colsHTML + '
' + '
' + '
'; p.pickerHTML = pickerHTML; }; // Input Events function openOnInput(e) { e.preventDefault(); if (p.opened) return; p.open(); if (p.params.scrollToInput && !isPopover()) { var pageContent = p.input.parents('.content'); if (pageContent.length === 0) return; var paddingTop = parseInt(pageContent.css('padding-top'), 10), paddingBottom = parseInt(pageContent.css('padding-bottom'), 10), pageHeight = pageContent[0].offsetHeight - paddingTop - p.container.height(), pageScrollHeight = pageContent[0].scrollHeight - paddingTop - p.container.height(), newPaddingBottom; var inputTop = p.input.offset().top - paddingTop + p.input[0].offsetHeight; if (inputTop > pageHeight) { var scrollTop = pageContent.scrollTop() + inputTop - pageHeight; if (scrollTop + pageHeight > pageScrollHeight) { newPaddingBottom = scrollTop + pageHeight - pageScrollHeight + paddingBottom; if (pageHeight === pageScrollHeight) { newPaddingBottom = p.container.height(); } pageContent.css({'padding-bottom': (newPaddingBottom) + 'px'}); } pageContent.scrollTop(scrollTop, 300); } } } function closeOnHTMLClick(e) { if (inPopover()) return; if (p.input && p.input.length > 0) { if (e.target !== p.input[0] && $(e.target).parents('.weui-picker-modal').length === 0) p.close(); } else { if ($(e.target).parents('.weui-picker-modal').length === 0) p.close(); } } if (p.params.input) { p.input = $(p.params.input); if (p.input.length > 0) { if (p.params.inputReadOnly) p.input.prop('readOnly', true); if (!p.inline) { p.input.on('click', openOnInput); } if (p.params.inputReadOnly) { p.input.on('focus mousedown', function (e) { e.preventDefault(); }); } } } if (!p.inline) $('html').on('click', closeOnHTMLClick); // Open function onPickerClose() { p.opened = false; if (p.input && p.input.length > 0) p.input.parents('.page-content').css({'padding-bottom': ''}); if (p.params.onClose) p.params.onClose(p); // Destroy events p.container.find('.picker-items-col').each(function () { p.destroyPickerCol(this); }); } p.opened = false; p.open = function () { var toPopover = isPopover(); if (!p.opened) { // Layout p.layout(); // Append if (toPopover) { p.pickerHTML = '
' + p.pickerHTML + '
'; p.popover = $.popover(p.pickerHTML, p.params.input, true); p.container = $(p.popover).find('.weui-picker-modal'); $(p.popover).on('close', function () { onPickerClose(); }); } else if (p.inline) { p.container = $(p.pickerHTML); p.container.addClass('picker-modal-inline'); $(p.params.container).append(p.container); } else { p.container = $($.openPicker(p.pickerHTML)); $(p.container) .on('close', function () { onPickerClose(); }); } // Store picker instance p.container[0].f7Picker = p; // Init Events p.container.find('.picker-items-col').each(function () { var updateItems = true; if ((!p.initialized && p.params.value) || (p.initialized && p.value)) updateItems = false; p.initPickerCol(this, updateItems); }); // Set value if (!p.initialized) { if (p.params.value) { p.setValue(p.params.value, 0); } } else { if (p.value) p.setValue(p.value, 0); } } // Set flag p.opened = true; p.initialized = true; if (p.params.onOpen) p.params.onOpen(p); }; // Close p.close = function (force) { if (!p.opened || p.inline) return; if (inPopover()) { $.closePicker(p.popover); return; } else { $.closePicker(p.container); return; } }; // Destroy p.destroy = function () { p.close(); if (p.params.input && p.input.length > 0) { p.input.off('click focus', openOnInput); $(p.input).data('picker', null); } $('html').off('click', closeOnHTMLClick); $(window).off('resize', resizeCols); }; if (p.inline) { p.open(); } return p; }; $(document).on("click", ".close-picker", function() { var pickerToClose = $('.weui-picker-modal.weui-picker-modal-visible'); if (pickerToClose.length > 0) { $.closePicker(pickerToClose); } }); //修复picker会滚动页面的bug $(document).on($.touchEvents.move, ".picker-modal-inner", function(e) { e.preventDefault(); }); $.openPicker = function(tpl, className, callback) { if(typeof className === "function") { callback = className; className = undefined; } $.closePicker(); var container = $("
").appendTo(document.body); container.show(); container.addClass("weui-picker-container-visible"); //关于布局的问题,如果直接放在body上,则做动画的时候会撑开body高度而导致滚动条变化。 var dialog = $(tpl).appendTo(container); dialog.width(); //通过取一次CSS值,强制浏览器不能把上下两行代码合并执行,因为合并之后会导致无法出现动画。 dialog.addClass("weui-picker-modal-visible"); callback && container.on("close", callback); return dialog; } $.updatePicker = function(tpl) { var container = $(".weui-picker-container-visible"); if(!container[0]) return false; container.html(""); var dialog = $(tpl).appendTo(container); dialog.addClass("weui-picker-modal-visible"); return dialog; } $.closePicker = function(container, callback) { if(typeof container === "function") callback = container; $(".weui-picker-modal-visible").removeClass("weui-picker-modal-visible").transitionEnd(function() { $(this).parent().remove(); callback && callback(); }).trigger("close"); }; $.fn.picker = function(params) { var args = arguments; return this.each(function() { if(!this) return; var $this = $(this); var picker = $this.data("picker"); if(!picker) { params = $.extend({ input: this }, params || {}) // https://github.com/lihongxun945/jquery-weui/issues/432 var inputValue = $this.val(); if(params.value === undefined && inputValue !== "") { params.value = (params.cols && params.cols.length > 1) ? inputValue.split(" ") : [inputValue]; } var p = $.extend({input: this}, params); picker = new Picker(p); $this.data("picker", picker); } if(typeof params === typeof "a") { picker[params].apply(picker, Array.prototype.slice.call(args, 1)); } }); }; }($); /* global $:true */ + function($) { "use strict"; var defaults; var selects = []; var Select = function(input, config) { var self = this; this.config = config; //init empty data this.data = { values: '', titles: '', origins: [], length: 0 }; this.$input = $(input); this.$input.prop("readOnly", true); this.initConfig(); config = this.config; this.$input.click($.proxy(this.open, this)); selects.push(this) } Select.prototype.initConfig = function() { this.config = $.extend({}, defaults, this.config); var config = this.config; if(!config.items || !config.items.length) return; config.items = config.items.map(function(d, i) { if(typeof d == typeof "a") { return { title: d, value: d }; } return d; }); this.tpl = $.t7.compile("
" + config.toolbarTemplate + (config.multi ? config.checkboxTemplate : config.radioTemplate) +"

取消

"+"
"); if(config.input !== undefined) this.$input.val(config.input); this.parseInitValue(); this._init = true; } Select.prototype.updateInputValue = function(values, titles) { var v, t; if(this.config.multi) { v = values.join(this.config.split); t = titles.join(this.config.split); } else { v = values[0]; t = titles[0]; } //caculate origin data var origins = []; this.config.items.forEach(function(d) { values.each(function(i, dd) { if(d.value == dd) origins.push(d); }); }); this.$input.val(t).data("values", v); this.$input.attr("value", t).attr("data-values", v); var data = { values: v, titles: t, valuesArray: values, titlesArray: titles, origins: origins, length: origins.length }; this.data = data; this.$input.trigger("change", data); this.config.onChange && this.config.onChange.call(this, data); } Select.prototype.parseInitValue = function() { var value = this.$input.val(); var items = this.config.items; //如果input为空,只有在第一次初始化的时候才保留默认选择。因为后来就是用户自己取消了全部选择,不能再为他选中默认值。 if( !this._init && (value === undefined || value == null || value === "")) return; var titles = this.config.multi ? value.split(this.config.split) : [value]; for(var i=0;i this.config.max) { // $.toast("最多只能选择"+this.config.max+"个", "text"); return false } } } $.closePicker(function() { self.onClose(); callback && callback(); }); return true } Select.prototype.onClose = function() { this._open = false; if(this.config.onClose) this.config.onClose(this); } Select.prototype.getHTML = function(callback) { var config = this.config; return this.tpl({ items: config.items, title: config.title, closeText: config.closeText }) } $.fn.select = function(params, args) { return this.each(function() { var $this = $(this); if(!$this.data("weui-select")) $this.data("weui-select", new Select(this, params)); var select = $this.data("weui-select"); if(typeof params === typeof "a") select[params].call(select, args); return select; }); } defaults = $.fn.select.prototype.defaults = { items: [], input: undefined, //输入框的初始值 title: "请选择", multi: false, closeText: "确定", autoClose: true, //是否选择完成后自动关闭,只有单选模式下才有效 onChange: undefined, //function beforeClose: undefined, // function 关闭之前,如果返回false则阻止关闭 onClose: undefined, //function onOpen: undefined, //function split: ",", //多选模式下的分隔符 min: undefined, //多选模式下可用,最少选择数 max: undefined, //单选模式下可用,最多选择数 toolbarTemplate: '
\
\ {{closeText}}\

{{title}}

\
\
', radioTemplate: '
\ {{#items}}\ \ {{/items}}\
', checkboxTemplate: '
\ {{#items}}\ \ {{/items}}\
', } }($);