基于JQuery Mobile的Web App实践

[来自IT168]

【IT168 技术】JQuery Mobile是针对智能手机和平板电脑创建的移动Web App开发框架，它的出现填补了JQuery在移动设备应用上的缺憾，jQuery Mobile使用了极少的HTML5、CSS3、javaScript和Ajax脚本就可以完成页面的渲染，秉承了jQuery“写更少的代码，做更多的事情”理念：他可以通过一个灵活、简单的方式来布局网页，并且兼容所有的移动设备。

本文对JQuery Mobile各个知识点和使用方法做了简要描述，并使用JQuery Mobile实现了一个简单的Web App实例。

一、JQuery Mobile简介

今天，JQuery驱动着互联网上的大量网站，在浏览器中提供动态的用户体验，这促使传统的桌面应用程序越来越少。现在，主流的移动平台的浏览器功能都赶上了PC端桌面浏览器，因此JQuery团队引入了JQuery Mobile。

与JQuery核心库一样，您的开发基本上不需要安装任何的东西;只需要将JQuery Mobile依赖的*.js和*.css文件直接包含到web页面中即可。

JQuery Mobile有以下特性：

1、JQuery Mobile基本框架整体比较小，js和css总共只有30k左右。

2、JQue

想读更多 ->

jquery mobile + 百度地图 + phonegap 写的一个"校园助手"的app

1 jquery mobile + 百度地图 + phonegap 写的一个"校园助手"的app，使用的是基于Flat-UI的jQuery Mobile，请参考：https://github.com/ququplay/jquery-mobile-flat-ui-theme；

2 app里使用百度地图的 js api 做了一个校园内的步行路线规划的功能；

4 本人用phonegap生成的andriod工程，用的是eclipse，可以在这里下载adt，andriod sdk 等：http://tools.android-studio.org/index.php/sdk；

5 一个挺好的andriod入门教程：http://mars.apkbus.com/，虽然有点啰嗦，但讲得很细；

6 jquery mobile的页面代码请下载附件flatui.rar，首页路径是flatui/index.html，可以直接用浏览器运行看看效果，phonegap生成的andriod代码导入eclipse后会有两个工程，其中CordovaLib是phonegap的核心，编译成一个jar文件给自己的业务工程CampusAssistApp引用，看下图：

下图

想读更多 ->

jQuery实现滑动tab选项卡

jQuery实现滑动tab选项卡效果

首先看看要达到的实现效果：

效果分析：

选项卡菜单数量不固定，菜单内容不固定，所以整体的宽度都是未知的，

为了让交互效果更好，滑块需要添加过渡动画

代码

html结构：

css:

jQuery Mobile将它本身定位为："jQuery Mobile:智能机和平板上触摸体验最好的Web Framework。一个统一的，以HTML5为基础的面向所有流行的手机设备平台的用户接口系统，构建在稳定可靠的jQuery和jQuery UI 上。它的轻量级代码逐渐增强并且拥有灵活自由，容易的主题设计...."。

Kendo UI

Kendo UI扩展支持

想读更多 ->

jQuery炫酷特效之遮罩移动效果

今天带领大家实现一个非常炫酷的遮罩效果。遮罩跟随鼠标的移入点移入区块中（鼠标从区块左侧移入则遮罩也从左侧移入，鼠标从左侧移出遮罩也会左侧移出，其它方向同理），可以将这样一个效果应用到自己到网页中：

炫酷遮罩层

一、准备工作

先想一想这样到一个效果该如何实现呢？HTML结构该怎么搭建？

......

来看看基本到HTML结构是如何到：

HTML结构

CSS：

想读更多 ->

前端开发：功能强大的jQuery文件上传插件（jQuery File Upload）

jQuery File Upload是一个开源（MIT协议）的文件上传插件。支持文件上传、多文件选择窗口、拖拽上传，提供进度条、验证和预览图像、音频、视频的功能。支持跨域、分块和可暂停的文件上传及客户端图像调整。适用于任何服务器端平台（PHP、Python、Ruby on Rails、Java、Node.js、Go etc等），支持标准的HTML表单文件上传。

1、下载及初始化

https://github.com/blueimp/jQuery-File-Upload

下载插件解压放到项目任意位置，在页面中引入文件上传依赖jQuery、jQuery UI widget factory（如果已引入jQuery UI则不用引入）、jQuery Iframe Transport plugin（支持XHR文件上传的插件），除此之外还有可选插件，如Bootstrap、JavaScript Load Image library等。

想读更多 ->

DJI 大疆 OSMO Mobile 手持稳定器

flysakura 2017-11-12 18:20:00 ● 开箱晒物打赏Now!

小编注：双11买了不晒损失一半，#晒单大赛#活动火热来袭，剁过的手都开个箱吧！iPhoneX等好礼等你来赢，投稿即得额外100金币，还有原创新人独家奖励，App可光速投稿，详情戳这里。

最近带儿子出去转了转，发现带小朋友拍照留影那绝对是运气+体力活，很是辛苦。于是就拍了不少视频，拍摄的难度虽然下降了不少，但是效果差强人意，主要还是各种晃动，回看时真心有点晕。

回来后下定决心要搞台OSMO，不过OSMO+的价格实在太高，对于大疆只能是又爱又恨，上次搞“御”的时候已经咬过一次牙了，满嘴的碎牙，真的没法再咬了，想想现在手机的质素也不差，特别是我现在手上的华为P9 Plus我还是相当的满意的，虽然没有水果家的出彩（不过我没感觉出来），但是那效果还是杠杠地

三、JQuery的应用

1、$(document).ready();

或

$();

2、$(selector).action();

selector:选择器

action ：完成的功能。

3、选择器

css(属性名称，属性值)

a、通配选择器

*

b、元素选择器

HTML tag 名称

c、id选择器

#id属性值

d、class选择器

.class属性值

e、群组选择器

各选择器之间用逗号间隔

f、后代选

想读更多 ->