diff --git a/meitu/css/main.css b/meitu/css/main.css index e17fe14..cd6a3d2 100644 --- a/meitu/css/main.css +++ b/meitu/css/main.css @@ -203,6 +203,8 @@ html body { z-index: 10012; background-color: #FFF; opacity: 0.9; + -webkit-opacity: 0.9; + -moz-opacity: 0.9; display: none; } .speed_dash_container { @@ -253,6 +255,9 @@ html body { min-height: 190px; background-color: #fff; opacity: 0.8; + -webkit-opacity:0.8; + -moz-opacity: 0.8; + -moz-opacity: 0.8; } #router_canvas { -webkit-transform: translateZ(0); @@ -389,4 +394,20 @@ html body { font-size: 20px; line-height: 50px; /*font-family: "AvenirNextCondensed-Medium", "AvenirNextLTW01-MediumC 721311", "Arial Narrow", Verdana, sans-serif;*/ -} \ No newline at end of file +} +/*--------------------搜索自动补全---------------------------*/ +.auto_complete{ + position:absolute; + top:45px; + left:40px; + right:55px; + /*height:100px;*/ + background-color:#fff; + z-index:10091; + /*opacity:0.9; + -webkit-opacity:0.9; + -moz-opacity: 0.9;*/ +} + + + diff --git a/meitu/index.html b/meitu/index.html index 7aee263..39c52ee 100644 --- a/meitu/index.html +++ b/meitu/index.html @@ -43,11 +43,14 @@
- +
+ +
+
@@ -160,17 +163,6 @@
- - -
diff --git a/meitu/js/home/router.js b/meitu/js/home/router.js index 1124503..71217d8 100644 --- a/meitu/js/home/router.js +++ b/meitu/js/home/router.js @@ -1,4 +1,4 @@ -/*canvas绘制路线*/ +/*绘制路线*/ define('home/router', function(require, exports, module) { var $ = require('lib/zepto'); @@ -10,43 +10,8 @@ define('home/router', function(require, exports, module) { items: router }; - console.log(data.items); var html = _.template(tpl)(data); wrapper.html(html); -// var canvas = $('#router_canvas')[0]; -// var ctx = canvas.getContext('2d'); -// -// canvas.width = 45; -// canvas.height = 220; -// canvas.style.width = 45; -// canvas.style.height = 220; -// -// //line -// ctx.beginPath(); -// var gradient = ctx.createLinearGradient(35, 5, 20, 215); -// gradient.addColorStop(0, 'red'); -// gradient.addColorStop(1, 'yellow'); -// ctx.lineWidth = '2'; -// ctx.strokeStyle = gradient; -// ctx.moveTo(35, 5); -// ctx.lineTo(35, 215); -// ctx.closePath(); -// ctx.stroke(); - - //circle -// for(var i = 0; i < router.length; i++){ -// ctx.beginPath(); -// ctx.fillStyle = '#159AFE'; -// ctx.arc(35, 25 + i * 25, 5, 0, Math.PI*2, true); -// ctx.closePath(); -// ctx.fill(); -// -// ctx.beginPath(); -// ctx.fillStyle = '#000'; -// ctx.fillText(router[i].content, 2, 25 + 3 + i * 25); -// ctx.closePath(); -// ctx.fill(); -// } }); \ No newline at end of file diff --git a/meitu/js/home/search.js b/meitu/js/home/search.js new file mode 100644 index 0000000..c96289c --- /dev/null +++ b/meitu/js/home/search.js @@ -0,0 +1,19 @@ + +define('home/search', function(require, exports, module){ + var $ = require('lib/zepto_pj'); + var input = $('#search_input_text'); + var router = [ + '上海 到 扬州 两日游', + '上海 到 常州 一日游', + '上海 到 衢州 一日游' + ]; + + + //focus事件 + input.on('focus', function(){ + + }); + + + +}); \ No newline at end of file diff --git a/meitu/js/lib/fastclick.js b/meitu/js/lib/fastclick.js new file mode 100644 index 0000000..28a3f8c --- /dev/null +++ b/meitu/js/lib/fastclick.js @@ -0,0 +1,531 @@ +define('lib/fastclick', function(require, exports, module) { +function FastClick(layer) { + 'use strict'; + var oldOnClick; + this.trackingClick = false; + this.trackingClickStart = 0; + this.targetElement = null; + this.touchStartX = 0; + this.touchStartY = 0; + this.lastTouchIdentifier = 0; + this.touchBoundary = 10; + this.layer = layer; + + if (FastClick.notNeeded(layer)) { + return; + } + function bind(method, context) { + return function() { return method.apply(context, arguments); }; + } + if (deviceIsAndroid) { + layer.addEventListener('mouseover', bind(this.onMouse, this), true); + layer.addEventListener('mousedown', bind(this.onMouse, this), true); + layer.addEventListener('mouseup', bind(this.onMouse, this), true); + } + + layer.addEventListener('click', bind(this.onClick, this), true); + layer.addEventListener('touchstart', bind(this.onTouchStart, this), false); + layer.addEventListener('touchmove', bind(this.onTouchMove, this), false); + layer.addEventListener('touchend', bind(this.onTouchEnd, this), false); + layer.addEventListener('touchcancel', bind(this.onTouchCancel, this), false); + + if (!Event.prototype.stopImmediatePropagation) { + layer.removeEventListener = function(type, callback, capture) { + var rmv = Node.prototype.removeEventListener; + if (type === 'click') { + rmv.call(layer, type, callback.hijacked || callback, capture); + } else { + rmv.call(layer, type, callback, capture); + } + }; + + layer.addEventListener = function(type, callback, capture) { + var adv = Node.prototype.addEventListener; + if (type === 'click') { + adv.call(layer, type, callback.hijacked || (callback.hijacked = function(event) { + if (!event.propagationStopped) { + callback(event); + } + }), capture); + } else { + adv.call(layer, type, callback, capture); + } + }; + } + if (typeof layer.onclick === 'function') { + oldOnClick = layer.onclick; + layer.addEventListener('click', function(event) { + oldOnClick(event); + }, false); + layer.onclick = null; + } +} + +var deviceIsAndroid = navigator.userAgent.indexOf('Android') > 0; +var deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent); +var deviceIsIOS4 = deviceIsIOS && (/OS 4_\d(_\d)?/).test(navigator.userAgent); +var deviceIsIOSWithBadTarget = deviceIsIOS && (/OS ([6-9]|\d{2})_\d/).test(navigator.userAgent); +FastClick.prototype.needsClick = function(target) { + 'use strict'; + switch (target.nodeName.toLowerCase()) { + case 'button': + case 'select': + case 'textarea': + if (target.disabled) { + return true; + } + + break; + case 'input': + if ((deviceIsIOS && target.type === 'file') || target.disabled) { + return true; + } + + break; + case 'label': + case 'video': + return true; + } + + return (/\bneedsclick\b/).test(target.className); +}; + +FastClick.prototype.needsFocus = function(target) { + 'use strict'; + switch (target.nodeName.toLowerCase()) { + case 'textarea': + return true; + case 'select': + return !deviceIsAndroid; + case 'input': + switch (target.type) { + case 'button': + case 'checkbox': + case 'file': + case 'image': + case 'radio': + case 'submit': + return false; + } + + // No point in attempting to focus disabled inputs + return !target.disabled && !target.readOnly; + default: + return (/\bneedsfocus\b/).test(target.className); + } +}; +FastClick.prototype.sendClick = function(targetElement, event) { + 'use strict'; + var clickEvent, touch; + if (document.activeElement && document.activeElement !== targetElement) { + document.activeElement.blur(); + } + + touch = event.changedTouches[0]; + clickEvent = document.createEvent('MouseEvents'); + clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null); + clickEvent.forwardedTouchEvent = true; + targetElement.dispatchEvent(clickEvent); +}; + +FastClick.prototype.determineEventType = function(targetElement) { + 'use strict'; + + if (deviceIsAndroid && targetElement.tagName.toLowerCase() === 'select') { + return 'mousedown'; + } + + return 'click'; +}; + +FastClick.prototype.focus = function(targetElement) { + 'use strict'; + var length; + if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time') { + length = targetElement.value.length; + targetElement.setSelectionRange(length, length); + } else { + targetElement.focus(); + } +}; + + +/** + * Check whether the given target element is a child of a scrollable layer and if so, set a flag on it. + * + * @param {EventTarget|Element} targetElement + */ +FastClick.prototype.updateScrollParent = function(targetElement) { + 'use strict'; + var scrollParent, parentElement; + + scrollParent = targetElement.fastClickScrollParent; + + // Attempt to discover whether the target element is contained within a scrollable layer. Re-check if the + // target element was moved to another parent. + if (!scrollParent || !scrollParent.contains(targetElement)) { + parentElement = targetElement; + do { + if (parentElement.scrollHeight > parentElement.offsetHeight) { + scrollParent = parentElement; + targetElement.fastClickScrollParent = parentElement; + break; + } + + parentElement = parentElement.parentElement; + } while (parentElement); + } + + // Always update the scroll top tracker if possible. + if (scrollParent) { + scrollParent.fastClickLastScrollTop = scrollParent.scrollTop; + } +}; + +FastClick.prototype.getTargetElementFromEventTarget = function(eventTarget) { + 'use strict'; + + // On some older browsers (notably Safari on iOS 4.1 - see issue #56) the event target may be a text node. + if (eventTarget.nodeType === Node.TEXT_NODE) { + return eventTarget.parentNode; + } + + return eventTarget; +}; +FastClick.prototype.onTouchStart = function(event) { + 'use strict'; + var targetElement, touch, selection; + + // Ignore multiple touches, otherwise pinch-to-zoom is prevented if both fingers are on the FastClick element (issue #111). + if (event.targetTouches.length > 1) { + return true; + } + + targetElement = this.getTargetElementFromEventTarget(event.target); + touch = event.targetTouches[0]; + + if (deviceIsIOS) { + + // Only trusted events will deselect text on iOS (issue #49) + selection = window.getSelection(); + if (selection.rangeCount && !selection.isCollapsed) { + return true; + } + + if (!deviceIsIOS4) { + if (touch.identifier === this.lastTouchIdentifier) { + event.preventDefault(); + return false; + } + + this.lastTouchIdentifier = touch.identifier; + this.updateScrollParent(targetElement); + } + } + + this.trackingClick = true; + this.trackingClickStart = event.timeStamp; + this.targetElement = targetElement; + + this.touchStartX = touch.pageX; + this.touchStartY = touch.pageY; + + // Prevent phantom clicks on fast double-tap (issue #36) + if ((event.timeStamp - this.lastClickTime) < 200) { + event.preventDefault(); + } + + return true; +}; + + +/** + * Based on a touchmove event object, check whether the touch has moved past a boundary since it started. + * + * @param {Event} event + * @returns {boolean} + */ +FastClick.prototype.touchHasMoved = function(event) { + 'use strict'; + var touch = event.changedTouches[0], boundary = this.touchBoundary; + + if (Math.abs(touch.pageX - this.touchStartX) > boundary || Math.abs(touch.pageY - this.touchStartY) > boundary) { + return true; + } + + return false; +}; + + +/** + * Update the last position. + * + * @param {Event} event + * @returns {boolean} + */ +FastClick.prototype.onTouchMove = function(event) { + 'use strict'; + if (!this.trackingClick) { + return true; + } + + // If the touch has moved, cancel the click tracking + if (this.targetElement !== this.getTargetElementFromEventTarget(event.target) || this.touchHasMoved(event)) { + this.trackingClick = false; + this.targetElement = null; + } + + return true; +}; + + +/** + * Attempt to find the labelled control for the given label element. + * + * @param {EventTarget|HTMLLabelElement} labelElement + * @returns {Element|null} + */ +FastClick.prototype.findControl = function(labelElement) { + 'use strict'; + + // Fast path for newer browsers supporting the HTML5 control attribute + if (labelElement.control !== undefined) { + return labelElement.control; + } + + // All browsers under test that support touch events also support the HTML5 htmlFor attribute + if (labelElement.htmlFor) { + return document.getElementById(labelElement.htmlFor); + } + + // If no for attribute exists, attempt to retrieve the first labellable descendant element + // the list of which is defined here: http://www.w3.org/TR/html5/forms.html#category-label + return labelElement.querySelector('button, input:not([type=hidden]), keygen, meter, output, progress, select, textarea'); +}; + + +/** + * On touch end, determine whether to send a click event at once. + * + * @param {Event} event + * @returns {boolean} + */ +FastClick.prototype.onTouchEnd = function(event) { + 'use strict'; + var forElement, trackingClickStart, targetTagName, scrollParent, touch, targetElement = this.targetElement; + + if (!this.trackingClick) { + return true; + } + + // Prevent phantom clicks on fast double-tap (issue #36) + if ((event.timeStamp - this.lastClickTime) < 200) { + this.cancelNextClick = true; + return true; + } + + // Reset to prevent wrong click cancel on input (issue #156). + this.cancelNextClick = false; + + this.lastClickTime = event.timeStamp; + + trackingClickStart = this.trackingClickStart; + this.trackingClick = false; + this.trackingClickStart = 0; + + // On some iOS devices, the targetElement supplied with the event is invalid if the layer + // is performing a transition or scroll, and has to be re-detected manually. Note that + // for this to function correctly, it must be called *after* the event target is checked! + // See issue #57; also filed as rdar://13048589 . + if (deviceIsIOSWithBadTarget) { + touch = event.changedTouches[0]; + + // In certain cases arguments of elementFromPoint can be negative, so prevent setting targetElement to null + targetElement = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset) || targetElement; + targetElement.fastClickScrollParent = this.targetElement.fastClickScrollParent; + } + + targetTagName = targetElement.tagName.toLowerCase(); + if (targetTagName === 'label') { + forElement = this.findControl(targetElement); + if (forElement) { + this.focus(targetElement); + if (deviceIsAndroid) { + return false; + } + + targetElement = forElement; + } + } else if (this.needsFocus(targetElement)) { + + if ((event.timeStamp - trackingClickStart) > 100 || (deviceIsIOS && window.top !== window && targetTagName === 'input')) { + this.targetElement = null; + return false; + } + + this.focus(targetElement); + this.sendClick(targetElement, event); + + // Select elements need the event to go through on iOS 4, otherwise the selector menu won't open. + if (!deviceIsIOS4 || targetTagName !== 'select') { + this.targetElement = null; + event.preventDefault(); + } + + return false; + } + + if (deviceIsIOS && !deviceIsIOS4) { + scrollParent = targetElement.fastClickScrollParent; + if (scrollParent && scrollParent.fastClickLastScrollTop !== scrollParent.scrollTop) { + return true; + } + } + if (!this.needsClick(targetElement)) { + event.preventDefault(); + this.sendClick(targetElement, event); + } + + return false; +}; + + +/** + * On touch cancel, stop tracking the click. + * + * @returns {void} + */ +FastClick.prototype.onTouchCancel = function() { + 'use strict'; + this.trackingClick = false; + this.targetElement = null; +}; + + +/** + * Determine mouse events which should be permitted. + * + * @param {Event} event + * @returns {boolean} + */ +FastClick.prototype.onMouse = function(event) { + 'use strict'; + + // If a target element was never set (because a touch event was never fired) allow the event + if (!this.targetElement) { + return true; + } + + if (event.forwardedTouchEvent) { + return true; + } + + // Programmatically generated events targeting a specific element should be permitted + if (!event.cancelable) { + return true; + } + + // Derive and check the target element to see whether the mouse event needs to be permitted; + // unless explicitly enabled, prevent non-touch click events from triggering actions, + // to prevent ghost/doubleclicks. + if (!this.needsClick(this.targetElement) || this.cancelNextClick) { + + // Prevent any user-added listeners declared on FastClick element from being fired. + if (event.stopImmediatePropagation) { + event.stopImmediatePropagation(); + } else { + + // Part of the hack for browsers that don't support Event#stopImmediatePropagation (e.g. Android 2) + event.propagationStopped = true; + } + + // Cancel the event + event.stopPropagation(); + event.preventDefault(); + + return false; + } + + // If the mouse event is permitted, return true for the action to go through. + return true; +}; +FastClick.prototype.onClick = function(event) { + 'use strict'; + var permitted; + if (this.trackingClick) { + this.targetElement = null; + this.trackingClick = false; + return true; + } + if (event.target.type === 'submit' && event.detail === 0) { + return true; + } + + permitted = this.onMouse(event); + if (!permitted) { + this.targetElement = null; + } + return permitted; +}; +FastClick.prototype.destroy = function() { + 'use strict'; + var layer = this.layer; + + if (deviceIsAndroid) { + layer.removeEventListener('mouseover', this.onMouse, true); + layer.removeEventListener('mousedown', this.onMouse, true); + layer.removeEventListener('mouseup', this.onMouse, true); + } + + layer.removeEventListener('click', this.onClick, true); + layer.removeEventListener('touchstart', this.onTouchStart, false); + layer.removeEventListener('touchmove', this.onTouchMove, false); + layer.removeEventListener('touchend', this.onTouchEnd, false); + layer.removeEventListener('touchcancel', this.onTouchCancel, false); +}; +FastClick.notNeeded = function(layer) { + 'use strict'; + var metaViewport; + var chromeVersion; + if (typeof window.ontouchstart === 'undefined') { + return true; + } + chromeVersion = +(/Chrome\/([0-9]+)/.exec(navigator.userAgent) || [,0])[1]; + + if (chromeVersion) { + + if (deviceIsAndroid) { + metaViewport = document.querySelector('meta[name=viewport]'); + + if (metaViewport) { + // Chrome on Android with user-scalable="no" doesn't need FastClick (issue #89) + if (metaViewport.content.indexOf('user-scalable=no') !== -1) { + return true; + } + // Chrome 32 and above with width=device-width or less don't need FastClick + if (chromeVersion > 31 && window.innerWidth <= window.screen.width) { + return true; + } + } + + // Chrome desktop doesn't need FastClick (issue #15) + } else { + return true; + } + } + if (layer.style.msTouchAction === 'none') { + return true; + } + + return false; +}; + +FastClick.attach = function(layer) { + 'use strict'; + return new FastClick(layer); +}; + +module.exports = FastClick.attach; +module.exports.FastClick = FastClick; + +}); diff --git a/meitu/js/main.js b/meitu/js/main.js index d1ec5a6..7cd2c3d 100644 --- a/meitu/js/main.js +++ b/meitu/js/main.js @@ -3,15 +3,15 @@ requirejs.config({ }); -requirejs([ - 'lib/zepto_pj', +requirejs([ + 'lib/fastclick', 'home/map', - 'lib/underscore', 'home/dashboard', 'home/router', 'home/info', - 'home/tools' + 'home/tools', + 'home/search' ], - function(zepto_pj, map, underscore, router) { - + function(fastclick, map, router) { + fastclick(document.body); }); \ No newline at end of file