Category: Javascript /Jquery / React / Bootstrap / Web

May 7, 2015

使用 jQuery Mobile 与 HTML5 开发 Web App (十六) —— HTML5 Web Storage

By  Javascript /Jquery / React / Bootstrap / Web  0 Comments
使用 jQuery Mobile 与 HTML5 开发 Web App (十六) —— HTML5 Web Storage
绝大多数的软件都需要使用某种具有持久性的方式来存储数据，Web Apps 也不例外，涉及到完整后台的 Web Apps ，可以直接在后台使用 mysql 等数据库来存储数据，但过多的 sql 查询会影响服务器性能，甚至是整个 App 的性能。因此，一些简单有效的存储方式对与 Web Apps 显得很重要，Web Storage 似乎正是为此而设计。下面开始正式介绍 Web Storage 。 一. Web Storage 是什么？ Web Storage 是 HTML5 中用于在客户端存储数据的方法，有两种形式：localStorage（本地存储）和 sessionStorage（会话存储）。这两种方法都允许使用 JavaScript 设置“键值对”，并… Read More
Read More
May 7, 2015

使用 jQuery Mobile 与 HTML5 开发 Web App (十七) —— HTML5 离线缓存

By  Javascript /Jquery / React / Bootstrap / Web  0 Comments
使用 jQuery Mobile 与 HTML5 开发 Web App (十七) —— HTML5 离线缓存
本文要介绍的，是 HTML5 离线网络应用程序的特性，离线网络应用程序在 W3C 中的实际名称是 “Offline Web applications” ，也称离线缓存。当用户打开浏览器时，浏览器会将一个列表中指定的资源都下载并储存在本地。下次当用户再访问这个网络程序时，浏览器会自动引用本地缓存中 相应的文件，而不会再从网络下载这些资源。不管离线网络应用程序是否专为 Web Apps 而设，但这对于 Web Apps 来说无疑是个非常实用的特性，它使到 Web Apps 相对于原生 Apps 的一个重要劣势 —— 高度依赖网络，得以大大减缓。开发者可以利用这个特性把 Web Apps 中的元素缓存到本地端，使到 Web Ap… Read More
Read More
May 7, 2015

使用 jQuery Mobile 与 HTML5 开发 Web App (十八) —— HTML5 Web Workers

By  Javascript /Jquery / React / Bootstrap / Web  0 Comments
使用 jQuery Mobile 与 HTML5 开发 Web App (十八) —— HTML5 Web Workers
本文要介绍的是 HTML5 的 Web Workers 特性，它解决了 JavaScript 开发中一个重大的问题 —— 在后台运行 JavaScript 。与本系列前两篇文章介绍的特性相似，Web Wordkers 似乎也是为了 Web Apps 而设计的，可以想象，Web Apps 乃至原生 Apps 受移动设备性能的限制比在桌面环境中要大很多，尽管现在的移动设备性能已经不断的提高，这对于发展 Web Apps 的确是个很好的机遇，但是其性能表现始终受限，因此，对 Web Apps 开发来说 Web Workers 无疑是个十分实用的技术，使到 Web Apps 可以在移动设备上更好的运行。 一. 什么是 Web Workers ? 在介绍 Web Workers 的具… Read More
Read More
May 7, 2015

使用 jQuery Mobile 与 HTML5 开发 Web App (十九) —— HTML5 对 Web App 的影响

By  Javascript /Jquery / React / Bootstrap / Web  0 Comments
使用 jQuery Mobile 与 HTML5 开发 Web App (十九) —— HTML5 对 Web App 的影响
在本系列文章的开头，Kayo 曾经介绍过 Web App 的优缺点，并且说明了 HTML5 在其中起的作用，当然，Web Apps 的发展需要 HTML5 , CSS 与 JavaScript 以及后台技术的共同配合，但 HTML5 无疑为 Web Apps 发展中一些重要的方面带来主要贡献。本文要阐述的，正是 HTML5 为 Web Apps 带来的各种影响，或者说，HTML5 究竟为 Web Apps 开发带来了什么改变。 一. jQuery Mobile 与 HTML5 在具体说明 HTML5 如何使 Web Apps 开发发生改变前，首先回到本系列文章的另一个中心—— jQuery Mobile 。其实不难想象，倘若没有 jQuery Mobile 等其他移动开发框架，使用… Read More
Read More
May 7, 2015

移动前端工作的那些事—前端制作篇之框架篇–Sencha Touch框架

By  Javascript /Jquery / React / Bootstrap / Web  0 Comments
移动前端工作的那些事—前端制作篇之框架篇–Sencha Touch框架
Sencha Touch是个重量级的框架，是基于extjs写的, 它的使用原理全是封装好的方法，包括页面布局和版块。全是js方法生成。换句话说HTML页面结构文档中之间是没有任何前端代码结构的。这个也算是该框架的一大特点吧。 该框架优点是兼容性很广，Android和IOS上都可以良好的运行。在布局上，手机、平板电脑都可以兼容。但其缺点也较明显。过于封闭，调试起来很麻烦。需要有相当水平的前端技术才能使用。上手较慢，另外，运行速度和流畅度上，同比于jquery mobile、jqmobi、jqtouch差了一些。前端水平一般者，不建议使用该框架！ 这个框架我使用的不多。平时偶尔拿来练练手而已，没有实际太多的… Read More
Read More
May 7, 2015

移动前端工作的那些事—前端制作篇之框架篇–jQTouch框架

By  Javascript /Jquery / React / Bootstrap / Web  0 Comments
移动前端工作的那些事—前端制作篇之框架篇–jQTouch框架
移动前端框架有许多，这次简要的介绍jQTouch框架。jQTouch也是轻量级框架、它的语言基于jquery语言。上手容易。加载时间比较快，优点 是动画切换很流畅、在Android和IOS上表现都不错。缺点是与其搭配的插件较少，需要一些外包插件来进行某些效果的支持,无法自定义布局样式等。    首先，我们先熟悉一下jQTouch的结构代码： <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>jQTouch &beta;</title> <style type="… Read More
Read More
May 7, 2015

移动前端工作的那些事—前端制作篇之框架篇–jqMobi框架

By  Javascript /Jquery / React / Bootstrap / Web  0 Comments
移动前端工作的那些事—前端制作篇之框架篇–jqMobi框架
上文中，提到了许多的移动前端框架，这次主要介绍jqMobi框架。jqMobi也是轻量级框架、它的语言基于jquery语言。并对其进行了简化，更有利于在移动设备上进行应用，并且速度很流畅。上手很容易。    首先，我们要先部署jqMobi的环境，以下是代码： <!DOCTYPE html><!--HTML5 doctype--> <html> <head> <title>jqmobi精简版本</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"&… Read More
Read More
May 7, 2015

移动前端工作的那些事—前端制作篇之框架篇

By  Javascript /Jquery / React / Bootstrap / Web  0 Comments
移动前端工作的那些事—前端制作篇之框架篇
为了更好的提升用户体验，移动端逐渐出了许多的移动端的框架，比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点，不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点： 一、Sencha Touch框架是一个重量级的框架、它上手较难，代码复杂，并且需要较强的程序基础才能学习，最开始的时候因为一个项目，想使用Sencha Touch框架，后来工期实在太紧张，根本没时间学习它并使用。所以最后转投其他框架。这个框架兼容性很高，运行起来的速度一般，需要长时间的学习且需要水平较高的程序基础才行。所以不太适合前端制作人员的使用。我会在以后的机会单开一篇… Read More
Read More
May 7, 2015

移动前端工作的那些事—前端制作篇之javascript篇（二）

By  Javascript /Jquery / React / Bootstrap / Web  0 Comments
移动前端工作的那些事—前端制作篇之javascript篇（二）
在互联网中，一般用户都是通过鼠标点击、鼠标悬停、鼠标离开等执行一些前端的事件，但是在移动前端，用户却是通过手指来进行操作。从而衍生出移动前端的手势事件。鼠标中的click事件虽然也可以在移动前端进行触发，但这个事件在移动端会有大约半秒中的延迟。所以一般都不采用。 在移动端的手势事件一般有四种情况： touchstart:  手指放到屏幕上的时候触发 touchmove:  手指在屏幕上移动的时候触发 touchend:  手指从屏幕上拿起的时候触发 touchcancel:  系统取消touch事件的时候触发。前三者应用很广泛，第四个应用较少。至今所做的项目中，第四项还没涉及过。如果有人用过，可以拿出来分享一下… Read More
Read More
May 6, 2015

移动前端工作的那些事—前端制作篇之javascript篇

By  Div / Css / XML / HTML5 / SVG, Javascript /Jquery / React / Bootstrap / Web  0 Comments
移动前端工作的那些事—前端制作篇之javascript篇
javascript(简称js)语言在移动前端应用很广。可以说必不可少，许多效果都是和js相关的。包括现在移动端的一些框架。jqmobi、jqtouch、sencha touch、jquerymobile等等。这些都是基于js而进行编写的。这篇暂时不讨论这些框架。以后会慢慢介绍其中的一两个框架的具体使用方法。这篇主要讨论一下部分常用的js事件在移动端的使用。举几个例子： 1、隐藏地址导航栏： <script type="text/javascript"> // 该函数由Simon Willison编写,它只有一个参数,该参数表示被调用的函数名(在页面加载完毕时执行的函数的名字) function a… Read More
Read More
May 6, 2015

jQuery数组处理详解(含实例演示)

By  Javascript /Jquery / React / Bootstrap / Web  0 Comments
jQuery数组处理详解(含实例演示)
jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档 中对数组的介绍,顺便对jQuery数组做个总结.温故,知新. 强烈建议你打开DEMO演示后再看下面的详解: 点此查看DEMO 1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍 jQuery 对象的 $.each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥有两个参数：第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出 each 循环可使回调函数返回 false, 其… Read More
Read More
May 5, 2015

jQuery实现表格行上移下移和置顶

By  Javascript /Jquery / React / Bootstrap / Web  0 Comments
jQuery实现表格行上移下移和置顶
我们在操作列表数据的时候，需要将数据行排列顺序进行调整，如上移和下移行，将行数据置顶等，这些操作都可以在前端通过点击按钮来完成，并且伴随着简单的动态效果，轻松实现表格数据排序。 查看演示 下载源码 HTML 页面上是一个简单的数据表格，我们在数据行中分别放置“上移”，“下移”和“置顶”三个链接，并且分别定义三个class属性，我们来通过jQuery实现这些操作。 <table class="table"> <tr> <td>HTML5获取地理位置定位信息</td> <td>2015-04-25</td> <td><a href… Read More
Read More
May 5, 2015

jQuery倒计时（仿团购）

By  Javascript /Jquery / React / Bootstrap / Web  0 Comments
倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间。倒计时在WEB上应用非常广泛，如考试系统倒计时，团购网站中的优惠活动倒计时等等。今天，我们来使用jQuery实现一个简单的倒计时功能。 查看演示 下载源码 本文以团购网站的倒计时为背景，我们知道，网站会给每个优惠活动（商品）定一个结束时间，也就是到期时间，但系统时间到达了结束时间，就意味着活动结束。因此，我们在HTML中就要定义活动的结束时间。 HTML <ul class="prolist"> <li><img src="images/p1.jpg" />简约时尚皮带男士手表一款69元<p class="endti… Read More
Read More