Zepto.js是一个轻量级的针对现代浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。 1. Why Zepto.js? API类似jQuery,熟悉jQuery可以无缝迁移到Zepto.js Zepto仅针对高版本现代浏览器设计了最小核心的通用库,代码体积小,尤其适合移动端开发。 Zepto增加了针对移动端的触摸和手势相关的事件 Zepto模块化做的很灵活,可以自定义组合模块 2. Zepto.js下载 代码下载:zeptojs中文站
在前端的移动Web开发中,有一部分事件只在移动端产生,如触摸相关的事件。接下来给大家简单总结一下移动端的事件。
在前端的移动Web开发中,有一部分事件只在移动端产生,如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1. PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能:用户双击手机页面的时候,浏览器会智能的缩放当前页面到原始大小。 双击缩放的原理就是,当用户click一次之后,浏览器会经过约300ms之后检测是否再有一次click,如果有的话,
本文作者:IMWeb 谦龙 原文出处:IMWeb社区 未经同意,禁止转载 前言 前端在最近几年实在火爆异常,vue、react、angular各路框架层出不穷,咱们要是不知道个双向数据绑定
最近一直在看zepto的源码,希望通过学习它掌握一些框架设计的技巧,也将很久不再拾起的js基础重新温习巩固一遍。如果你对这个系列感兴趣,欢迎点击下方地址watch,随时关注动态。这篇文章主要想说一下zepto中事件模块(event.js)的trigger实现原理。
gitHub地址 1,移动端minimvvm框架qvm实现 qvm概念,一个适用于移动端的mini mvvm(什么是mvvm?没了解的同学自己去了解)框架。参考了angular和vuejs的设计实现思
HTML5学堂:今天要与大家分享一个当前移动端很常见的效果,类似于手机联系人的快速导航功能,即当触摸a~z的字母时,能够相对应的显示文字。有些手机的音乐导航也类似,具体可详见下图: touchmove
qvm概念,一个适用于移动端的mini mvvm(什么是mvvm?没了解的同学自己去了解)框架。参考了angular和vuejs的设计实现思路,并进行简化封装,目前使用的zepto基本依赖库,使用最少的代码实现了基础功能版。
移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android和 IOS 都有。
作者:nicky, 腾讯Tgideas 前端开发工程师 在“吴亦凡入伍”H5刷爆朋友圈之后,看到网上有较多同学对背后的技术感兴趣,正好借着机会跟大家分享一下。如果你正好也遇到在android下视频自动播放和两个视频连续播放(中间不需要触发)的问题,希望本文会对你有所帮助。 关于这个H5大概的实现原理,网上已经有人分析的很详细,我这里就不多做介绍了。 这次要分享是在兼容android下遇到的难点和兼容的思路: 第一个问题就是为了实现 Page1中里面图片中的人物要突然动起来,然后走出页面,那么video在初始
屏幕是用户和Android设备交互的主要媒介,屏幕分为触屏和非触屏。Android设备目前有四种类型:Android Phone,Android Tablet,Android Wear和Android TV。Android TV大都使用非触屏,其他三类设备则大都使用触屏。对非触屏设备,用户可以通过键盘鼠标或遥控器在屏幕上操作。对触屏设备,用户主要通过手指或触控笔等工具在屏幕上操作,当然也可以通过外接的键盘,鼠标和轨迹球等工具来操作。
课程地址:https://www.imooc.com/learn/229 一、 常见移动端开发框架简介 二、Zepto框架介绍和入门 三、 Zepto框架核心API 1.Core 2.事件 自定
话说又学到移动端了,真的让我有点头疼了...真的很麻烦啊!!但是没办法,硬着头皮学吧.
移动端浏览器兼容性较好,我们不需要考虑以前js的兼容性问题,可以放心的使用原生js书写效果,但是移动端也有自己独特的地方。比如触屏事件touch(也称触摸事件),Android和IOS都有。
Zepto是一个轻量级的针对现代高级浏览器的 JavaScript库, 它与jquery有着类似的api。
移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。
HTML5学堂:相对来说,JS在移动端要远远低于PC端的使用频率,因此积累的开发经验并不是太多。在这里简要整理一些JavaScript在移动端的项目经验,主要包括click点击事件延迟、元素高亮点击区、zepto的touch问题等。 移动端click时间300ms延迟 在移动端,click点击事件会造成300ms的延迟,造成这种延迟的原因在于:当用户一次点击屏幕之后,浏览器并不能立刻判断用户是要进行双击缩放,还是想要进行单击操作。因此,浏览器就等待 300 毫秒,以判断用户是否再次点击了屏幕。 对于这种体验
因为zepto默认构建包含: Core, Ajax, Event, Form, IE几个模块,要使用animate需要再引用fx模块。
这个是 WPF 已知的问题,网络上也有一些讨论,但是没有一个完美的方法来解决。本文也就是讲解其中的一种方法,亲测可行。
目录 类库和框架的区别 写法 jq操作样式 属性 事件 class dom操作 效果 类库和框架的区别 jq jq是一个功能丰富,轻量级的类库 zepto.js zepto.js 是更轻量级的类库,比jq的打开速度快的多,同样兼容jq的代码 apicloud apicloud是一个框架 类库 提供了很多api,相当于一个仓库,里面有各种各样的工具,你需要用到什么就去找这些工具。 框架 相当于买了一个新房子,现在是一个空壳,需要去装修 写法 $(selector).actio
请注意,本文编写于 2082 天前,最后修改于 173 天前,其中某些信息可能已经过时。
WebBuilder是一款开源的可视化移动Web应用开发和运行平台。基于浏览器的集成开发环境,可视化和智能化的设计,能轻松完成常规应用和面向手机的移动应用开发;高效、稳定和可扩展的特点,适合复杂企业级应用的运行;跨平台、数据库和浏览器的架构,适应复杂的服务器和客户端环境;包括智能数据库访问在内的多项先进技术,使应用系统的开发更快捷和简单。
移动端浏览器兼容性好,我们不需要考虑以前JS的兼容问题,可以放心使用原生JS书写效果,但是移动端也有自己独特的地方,比如触屏事件touch(也叫触摸事件),Android和IOS都有。
学习zepto.js(对象方法)[5] clone: 该方法不接收任何参数,会返回对象中的所有元素集合,但不会对象绑定的事件. var $temp =$("div").clo
学习zepto.js(Hello World) Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。 昨天听说了zepto.js,正好最近也比较闲,所以就学习一下这个著名DOM操作库,由于本人刚接触这个,但又不想单纯的说如何使用,所以本人会按照API顺序来说明方法如何使用并试着将对于源码的理解写上来; $(): 与jQuery的$()几乎一样,但zepto的选择器是直接使用的
本文介绍了Zepto源码分析之ie模块,从源码分析的角度介绍了Zepto中ie模块的实现原理和注意事项。主要包括获取元素样式、计算元素尺寸、浏览器渲染机制、事件处理等方面,并通过实例进行解释。
TouchEvent是一类描述手指在触摸平面 (触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的加和减少,等等 touchstart、touchmove、 touchend 三个事件都会各自有事件对象。
这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom对象是找不到的,jq通过事件委托解决了这个问题,但是原生js这个问题该怎么解决呢?我在网上查了很多资料,好像只有一种办法,那就是在生成标签并把标签添加到html结构中后再添加对于这个新标签的各种事件,如果有更好的方法,欢迎提出来。 <!DOCTYPE html> <html lang="en"> <head>
如果view的down事件返回true,则接下去的move,up,cancel,事件最多传递到这个view,不会传递给view的子view
1:GMU:http://cloudajs.org/ui/brand/gmu GMU是基于zepto的mobile UI组件库,提供webapp、pad端简单易用的UI组件! http://gmu.b
本文作者:IMWeb 袁飞翔 原文出处:IMWeb社区 未经同意,禁止转载 部分插件 fis3-hook-lego 查找文件 fis3-hook-annotation 文件注解 Tip 1、勿使用lego_modules文件全路径 <script src="/lego_modules/zepto/1.1.7/zepto.js"></script> 直接 <script src="zepto"></script> js require: // js /** * @require "zepto"
本文介绍了一种基于fis的插件,该插件具有查找文件、文件注解、查找文件、文件注解等功能。同时,该插件还可以将小于5k的js和小于20k的css文件内联到html中,并将被sprite的png文件排除在发布之外。此外,该插件还可以将不需要被打包的文件设置为pack=false,并将文件注解和文件全路径等选项设置为可选。
部分插件 fis3-hook-lego 查找文件 fis3-hook-annotation 文件注解 Tip 1、勿使用lego_modules文件全路径 <script src="/lego_modules/zepto/1.1.7/zepto.js"></script> 直接 <script src="zepto"></script> js require: // js /** * @require "zepto" */ 2、不需要被define包裹的文件使用@noWrap文件注解标示 /** *
回调函数原理:函数可以作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数,这个过程就叫做回调。
Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具。 Touch.js手势库专为移动设备设计。 Touch.js对于网页设计师来说,是一款不错的辅助工具,可以减少很多写框架控制器的时间。 网页合理使用Touch.js不但能增加网页的美观感,而且在节约时间,减少人力投入也有极大的帮助。
前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件
jQuery的核心是通过各种选择器,选中DOM元素,可以用querySelectorAll方法模拟这个功能。
根据文章内容撰写摘要总结。
SDK地址:https://gitee.com/pqo/PixelStreamer/
移动端用tap时会有穿透问题 一:click与tap比较 click与tap都会触发点击事件,但是在手机web端,click会有200-300ms的延迟,所以一般用tap代替click作为点击事件。singleTap 和doubleTap分别代表单次点击和双次点击 二:tap的穿透处理 使用zepto框架的tap的点击事件,来规避click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件。 三:穿透原因 问题:在HTML5点击了q以后,弹出b的弹框 因为tap事件是通过document绑定了tou
最近在做一个手机主题,为了用上看似华丽的Ajax 特效,不得不用上jQuery(不要问我为什么不用原生js,要是我会写就不用那么费劲了)。但众所周知Jquery 库是日渐臃肿,就最新的版本,min版本(压缩版)就有90多kb,在手机上是不能承受的痛啊。于是思考着对jQuery库进行精简压缩。 jQuery 的替代方案 搜索一下,说道可以采用不少替代方案,比如下面的几个(来自互联网,原始出处未详): Zepto.js Zepto.js 是支持移动WebKit浏览器的JavaScript框架,具有与jQue
前言 JavaScript最初的一个应用场景就是分担服务器处理表单的责任,打破处处依赖服务器的局面,这篇文章主要介绍zepto中form模块关于表单处理的几个方法,serialize、seriali
(该篇文章重点是想说jsonp实现过程,如果你想了解跨域相关的更多的知识,可以谷歌,度娘一把)
Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。
有了上面的知识的回顾,接下来我们开始看zepto中serialize和serializeArray的实现
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 忽略Android平台中对邮箱地址的识
领取专属 10元无门槛券
手把手带您无忧上云