移动设备web开发首选框架：zeptojs介绍

最近看到了一篇文章，是介绍一种新的js框架，名为zepto.js，他适用于移动设备已经桌面浏览器除了ie系列的。。

他兼容jquery的API，所以学起来或用起来并不吃力。他比jquery的优势在于

1.他够小，只有21k左右。。功能俱全。

2.增加了移动设备的触摸等事件，不需要再次引入其他手机框架如jquery mobile。

3.虽然不兼容ie但是提供了一个兼容方法：

代码如下:

<script>
document.write('<script src=' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>

因为他跟jquery的API是兼容的，所以就不用担心在ie上引用了jquery后事件那些会失效，除了触摸等一些。。

桌面浏览器：

1.Safari 5+ (Mac, Win)
2.Chrome 5+ (Win, Mac, Linux, Chrome OS)
3.Mozilla Firefox 4+ (Win, Mac, Linux)
4.Opera 10+ (Win, Mac, Linux)

移动浏览器：

1.iOS 4+ Safari
2.Chrome for Android
3.Chrome for iOS
4.Android 2.2+ Browser
5.webOS 1.4.5+ Browser
6.BlackBerry Tablet OS 1.0.7+ Browser
7.Amazon Silk 1.0+
8.Firefox for Android
9.Firefox OS Browser
10.Practically any WebKit-based browsers/runtimes

在如今的框架来看，他是开发移动设备web的首选框架。。。。有兴趣的可以看看github：https://github.com/madrobby/
zepto官网：http://zeptojs.com

赞 (0)

相关推荐

  • zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题

    在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用. 它是一个纯javascript工具,不需要跟其它js库一起导入,同时兼容jQuery和zepto,压缩版的大小只有6kb很适合移动端的开发,它的git地址:https://github.com/thebird/swipe 在git上对其的使用方式介绍的相当清楚,关键代码如下 <div id='slider' class='swipe'>

  • jQuery插件zepto.js简单实现tab切换

    老规矩,先贴代码 <script> $(function(){ window.onload = function() { var $li = $('.taocan-title li'); var $ul = $('.taocan-content .con110'); $li.mouseover(function(){ var $this = $(this); var $t = $this.index(); $li.removeClass(); $this.addClass('active');

  • jquery实现在页面加载的时自动为日期插件添加当前日期

    在页面加载的时候自动为日期插件添加当前日期. <script type="text/javascript"> $(document).ready(function(){ $("#startTime").val(formatDate()); $("#endTime").val(formatDate()); } jsp页面的body部分代码: <td><label>日期:</label></td&

  • jQuery Mobile开发中日期插件Mobiscroll使用说明

    jQuery Mobile开发中日期插件Mobiscroll使用说明

    近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好百度.Google啦,找到了两款 jquery-mobile-datebox 和 mobiscroll-2.3 jqueryMobileDatebox 这个在板上的表现不好,性能方面有点卡 mobiscroll 性能方面比前者要好一些,效果更简洁 ,划动更流畅 放在一起对比下 各位看官,你们觉得哪个

  • JQuery日期插件datepicker的使用方法

    JQuery日期插件datepicker的使用方法

    JQuery是一款非常优秀的脚本框架,其丰富的控件使用起来也非常简单,配置非常灵活.下面做一个使用日期插件datapicker的例子. 1.下载jQuery核心文件就不用说了吧,datepicker是轻量级插件,只需jQuery的min版本就行了,然后到官网http://jqueryui.com/download下载jquery-ui压缩包(可以选择喜欢的theme),里面就包含对datepicker的支持,当然您也可以下载datepicker,包括ui.core.js和ui.datepicke

  • Yii2框架引用bootstrap中日期插件yii2-date-picker的方法

    本文实例讲述了Yii2框架引用bootstrap中日期插件yii2-date-picker的方法.分享给大家供大家参考,具体如下: 最近在学习yii2 框架,发现框架很强大,而且结合了时下许多新的技术在里面. 简单记录一下yii2-date-picker插件的使用方法: 首先先了解一下github中的相关资源:https://github.com/2amigos/yii2-date-picker-widget 其次:在自己的项目中利用上面链接中的相关方法下载此资源,命令为: php compos

  • zepto.js中tap事件阻止冒泡的实现方法

    本文实例讲述了zepto.js中tap事件阻止冒泡的实现方法.分享给大家供大家参考.具体如下: 最近在弄一个手机版的网站,本来想用jQuery Mobile,但文件太大了,所以用了zepto.js 由于移动网页中使用click事件会有延迟,所以就用上了zepto.js中的tap事件. 使用click事件可以使用stopPropagation来阻止冒泡,但tap使用该方法无效 现在我需要实现这样一个效果:点击a.btn这个按钮,然后显示div.panel,当我点击非div.panel时隐藏div.

  • 基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解

    调用方式 :ImageView(index,imgData)  --index参数 为图片默认显示的索引值,类型 为Number  --imaData参数 为图片url数组 ,类型为Array 使用之前要先引入 zepto.js 文件 ImageView.js具体代码如下: 复制代码 代码如下: /*  * ImageView v1.0.0  * --基于zepto.js的大图查看  * --调用方法 ImageView(index,imgDada)  * --index 图片默认值显示索引,N

  • 基于zepto的移动端轻量级日期插件--date_picker

    基于zepto的移动端轻量级日期插件--date_picker

    前言 做过移动Web开发的同学都知道,移动端日期选择是很常见的需求.在PC端,我们有很丰富的选择,比较出名的就有Mobiscroll和jQuery UI Datepicker.个人看来,这些插件存在的两个显而易见的问题,第一是过重的依赖,对于jQuery的插件,已经强制依赖了80多k的庞然大物,把很多移动端项目拒之门外:第二是太过强大的功能,很多插件花百分之八十的时间去完善插件百分之二十炫酷的额外功能,导致代码量变大,配置繁杂.所以一款少依赖.轻量级和使用简单的移动端日期选择插件是非常必要的.本

  • 移动设备web开发首选框架：zeptojs介绍

    最近看到了一篇文章,是介绍一种新的js框架,名为zepto.js,他适用于移动设备已经桌面浏览器除了ie系列的.. 他兼容jquery的API,所以学起来或用起来并不吃力.他比jquery的优势在于 1.他够小,只有21k左右..功能俱全. 2.增加了移动设备的触摸等事件,不需要再次引入其他手机框架如jquery mobile. 3.虽然不兼容ie但是提供了一个兼容方法: 复制代码 代码如下: <script> document.write('<script src=' + ('__pr

  • 基于PHP Web开发MVC框架的Smarty使用说明

    一.Smarty简明教程 1.安装演示 下载最新版本的Smarty-3.1.12,然后解压下载的文件.接下来演示Smarty自带的demo例子. (1)下载地址:http://www.smarty.net/download(2)在你的WEB服务器根目录下建立新目录,这里我在/var/www下创建yqting/目录,然后将解压之后的目录中的demo/和libs/目录复制到/var/www/yqting/目录下. (3)这里要特别注意demo/目录下cache/和template_c/两个目录,一定

  • javascript移动设备Web开发中对touch事件的封装实例

    在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现. zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 tap 事件在某些安卓设备上存在事件穿透的 bug,其他类型的事件也或多或少的存在一些兼容性问题. 于是乎,干脆自己动手对这些常用的手势事件进行了封装,由于没有太多真实的设备来进行测试,可能存在一些兼容性问题,下面的代码也只是在 iOS 7.Andorid 4 上的一些比较常见的浏览器中测试通过. t

  • SpringBoot2零基础到精通之配置文件与web开发

    SpringBoot2零基础到精通之配置文件与web开发

    目录 1 配置文件 1.1 yaml文件 1.1.1 基本语法 1.1.2 数据格式 1.2 数据绑定时关键字提示 2 web开发 2.1 静态资源的存放与访问 2.2 webjars 2.3 web小技巧 2.3.1 index页面 2.3.2 网页小图标 2.4 web场景源码浅析 1 配置文件   之前说过,配置文件大致分两种类型:properties.yaml.其中properties是最常规的配置文件类型:使用键值对等号的格式来对各种参数进行配置,后缀为.properties,在这里就

  • Mobile Web开发基础之四--处理手机设备的横竖屏问题

    为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间.由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的问题就会凸显--我们至少需要处理一下当前显示元素的宽度的适配(当然,要做的可能不仅仅是这个).很多时候,我们需要为不同的屏幕方向来设计对应的应用显示模式,这个时候,实时地获知设备的模竖屏状态就显得极为重要. window.orientation属性与onorientationchange事件 win

  • Python用Bottle轻量级框架进行Web开发

    Python用Bottle轻量级框架进行Web开发

    当前Python Web开发中的框架算Django最为流行了,但是本文介绍的是一个较为轻量级的Web框架:Bottle框架.理论性的东西就不讲了,直接上实例代码. 1.问题描述        最近做一个系统的后台开发,用的就是Python+Bottle进行的web后台开发.给前台提供一个接口,通过前台调用接口时的参数,提供Json数据格式的数据. 2.环境准备 我用的是Linux环境,python 2.7.x版本的python.使用Bottle之前需要pip安装bottle,输入命令:sudo

  • 10款最好的Web开发的 Python 框架

    10款最好的Web开发的 Python 框架

    Python 是一门动态.面向对象语言.其最初就是作为一门面向对象语言设计的,并且在后期又加入了一些更高级的特性.除了语言本身的设计目的之外,Python标准 库也是值得大家称赞的,Python甚至还自带服务器.其它方面,Python拥有足够多的免费数据函数库.免费的Web网页模板系统.还有与Web服务 器进行交互的库.这些都可以设计到你的Web应用程序里面.在这篇文章里,我们将为Python Web开发者介绍基于Python的10大Web应用框架. CubicWeb CubicWeb的最重要的

  • Python django框架开发发布会签到系统(web开发)

    引言 最近学习了虫师的发布会签到系统demo,结合自己所学django知识,对demo重新塑造了一下.也是为了练练手,巩固知识.现在就分享一下成果~ Django工作流 学习django web开发,先来简单了解一下django的工作机制,请看下图: 简单说明: 用户通过浏览器访问:http://127.0.0.1:8000/index,首先运行的是urlpatterns程序,通过url路由找到对应的视图函数views.py,视图函数处理所有逻辑和数据,并且将用户要的数据经过函数处理后通过ind

  • SpringBoot Web开发之系统任务启动与路径映射和框架整合

    SpringBoot Web开发之系统任务启动与路径映射和框架整合

    目录 本章概要 启动系统任务 CommandLineRunner ApplicationRunner 整合Servlet与Filter和Listener 路径映射 本章概要 启动系统任务 整合 Servlet.Filter 和 Listener 路径映射 启动系统任务 有一些特殊的任务需要在系统启动时执行,例如配置文件加载,数据库初始化等操作.如果没有使用 Spring Boot ,这些问题可以在 Listener 中解决.Spring Boot 对此提供了两种解决方案 CommandLineR

  • web开发人员学习jQuery的6大理由及jQuery的优势介绍

    jQuery是一个用来简化HTML客户端开发的JS(JavaScrip)库,它支持HTML DOM处理,同时还融合了部分HTML和CSS.许多网站建设公司已经加入了jQuery的阵营,你的公司也该加入了. 下面就来看看jQuery为何对公司有如此大的影响吧. 1.jQuery简化了工作 学习jQuery非常容易--毕竟这个函数库由更简短.更简洁的代码创建.jQuery具有语句简洁.编码标准开放的特点,这些特点帮助开发者缩短了配置网站和应用所需的时间. 另外,使用jQuery创建web页面时,不要

随机推荐