[PWA] Disable Text Selection and Touch Callouts in a PWA on iOS

Because an installed PWA is really just a web app running in a browser, there are some browser behaviors that we may not want in our app, if we're going for a more "native" feel. We'll first disable the ability to select text in our app by setti…

Text selection in div(contenteditable) when double click

背景: 在最近项目中,碰到一个问题:有一个可编辑的div需要双击时可编辑,blur或者回车时将编辑结果保存.你可能注意到双击时,文字会被选中,可编辑区域不会focus到光标位置.考虑到兼容性问题,写了如下代码.做个备份,以备不时之需. js: function getMouseEventCaretRange(evt) { var range, x = evt.clientX, y = evt.clientY; // Try the simple IE way first if (document…

获得touch事件,jquery绑定事件监听器,ios设备上打开touch状态以响应focus,active等伪类

2. 默认的监听方式 document.addEventListener('touchstart', function(){ alert('hello'); }, false); 使用jquery时 $(document).on('touchstart', function(e){ var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; }); 2.我们常用:hover,:focus,:active…

threesixty.min.js 和jquery.threesixty.js使用总结----实现360度展示

最近公司做一个项目需要360度展示汽车的外观,就用到了threesixty.min.js,自己总结一下使用方法: treesixty.min.js 源码: /*! threesixty-slider 2015-01-06 verison 2.0.5 */ /* http://github.com/vml-webdev/threesixty-slider.git */ !function (a) { "use strict"; a.ThreeSixty = function (b, c)…

jQuery treetable【表格多重折叠树功能及拖放表格子元素重新排列】

今天有个表格需求做到多重折叠子元素功能,仔细想了下实现原理, 1.在html中,把父子节点的关系写在自定义属性,但对于节点是否有孩子(hasChild),是否是最后一个节点(isLastOne),是否是第一个节点(isFirstOne),都还不知道.所以第一步要分析出这些信息,把这些信息都记录到自定义属性.2.先扫描所有的tr,构造出两个map,分别记录{'pId' => ['id1', 'id2']}和{id => pId}的关系.3.再次扫描所有的tr,根据两个map的关系,给tr增加h…

JQuery分页插件bs_pagination的应用

一.引入bs_pagination的js文件以及样式文件(项目中需要引用Jquery和bootstrap的相关js和样式文件,且在以下引用之前): <link href="~/Scripts/bs_paginationJS/jquery.bs_pagination.min.css" rel="stylesheet" /> <script src="~/Scripts/bs_paginationJS/jquery.bs_pagination…

Jquery 右键菜单(ContextMenu)插件使用记录

目前做的项目需要在页面里面用右键菜单,在网上找到两种jquery的右键菜单插件,但是都有各种问题.所以就自己动手把两种插件结合了下. 修改后的右键菜单插架可以根据绑定的触发页面元素不同,复用同一个菜单使之根据触发页面元素有不同的行为.支持多个个触发页面元素复用同一个菜单时,分开禁用或恢复禁用菜单或某些菜单项目. 一些说明: 1.菜单的样式由css文件contextMenu.css决定,可以根据需要自行修改,请根据实际情况设定z-index的值,保证菜单在最高的一层 2.请将菜单直接放于body下…

浏览器Range,Selection等选中文本对象

Range对象 Range 对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域. 最常见的Range是用户文本选择范围(user text selection).当用户选择了页面上的某一段文字后,你就可以把这个选择转为Range.当然,你也可以直接用程序定义Range. 如果一个实现支持 Range 模块,那么document就定义了createRange()方法调用它可创建新的 Range 对象. 注意:IE 定义了不兼容的 Document.createRange() 方法…

sencha Touch 2.4 学习之 XTemplate模板

XTemplate模板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="../touch/resources/css/sencha-touch.css"> <script type="text/javasc…

zTouch-移动端触屏开发利器(zepto touch扩展)

* Zepto.js v1.0.1 touch extend (Zepto.js v1.0.1 的swipe touch扩展)js-处理手机移动端web触屏手势动作. Zepto.js v1.0.1版本的touch.js模块引入使用后会导致页面很卡的情况,所以开发了一个新的扩展插件来替换其touch.js.已经过Android/ios测试. github* zTouch特点: zTouch.js只包含核心功能函数,不包含任何效果,简洁轻巧; 提供丰富的回调参数,可由用户自定义扩展效果(可参…

sencha touch环境搭建

引入touch文件,包括resources和sencha-touch-debug.js文件 index.html文件内容如下: <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="./touch/resources/css/sencha-touch.css" type="text/css"> <script type="…

Sencha touch 2 入门 -------- DataView 显示服务器端JSON文件数据

今天学习了下DataView如何显示JSON文件数据,废话不多说,直接贴代码: 首先看下文件目录: 然后看下我们要处理的JSON文件,bookInfo.json. { "success":true, "books":[ { "id":"1", "image_url":"resources/images/english.jpg", "book_name":"考…

Custom Sublime Text Build Systems For Popular Tools And Languages

Sublime Text is currently the text editor of choice for a number of developers in the open-source community. It’s sophisticated, has powerful text selection and customization support and also includes a feature not used by many – its build system. In…

PWA(Progressive Web App)入门系列：（一）PWA简单介绍

前言 PWA做为一门Google推出的WEB端的新技术,长处不言而喻.但眼下对于相关方面的知识不是非常丰富.这里我推出一下这方面的新手教程系列.提供PWA方面学习. 什么是PWA PWA全称Progressive Web App,直译是渐进式WEB应用,是 Google 在 2015 年提出,2016年6月才推广的项目.是结合了一系列现代Web技术的组合.在网页应用中实现和原生应用相近的用户体验. 所谓的P(Progressive)这里有两层含义,一方面是渐进增强,让WEB APP的体验和功能能…

Sencha touch 初体验

一.什么是Sencha Touch? Sencha Touch是一个应用手持移动设备的前端js框架,与extjs是同一个门派的,它继承了extjs的优点和缺点.功能很强大,效果很炫丽,效率不高. 二.例子来了效果图:Sencha touch官方一个list的example PS:模拟器访问本地server的地址是10.0.2.2:8080,而不是127.0.0.1:8080 1.导入touch的相关js,css以及资源文件 2.index.html 1: <!DOCTYPE html> 2:…

Multi-line NSAttributedString with truncated text

http://stackoverflow.com/questions/7611816/multi-line-nsattributedstring-with-truncated-text/10172794#10172794 Multi-line NSAttributedString with truncated text up vote14down votefavorite 8 I need a UILabel subcass with multiline attributed text with…

说说 PWA 和微信小程序--Progressive Web App

作者:云图图链接:https://zhuanlan.zhihu.com/p/22578965来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 利益相关:微信小用户,谷歌小员工微信发布了微信小程序,虽然还在内测阶段,但是无论从技术上,还是以后要不要开发原生应用(native app)上引发了不少讨论.其实看到微信小程序的消息, 我第一时间想到的是 Google 之前推出的PWA(Progressive Web App),两者的目的是类似的(伪原生应用),但是形式却又…

iOS 9之3D Touch

金田北京时间9月10日凌晨, Apple在美国旧金山比尔格拉汉姆公民大礼堂(Bill Graham Civic Auditorium)召开新品发布会.本次着重介绍了3D Touch功能, 大体介绍一下: - 增强版的Force Touch(压力触控)技术,Force Touch之前被应用在于Apple Watch - 根据力度的不同,从而带来更多样化的用户体验.比如,用力按快进按钮会使快进的速度更快.用力度触摸代替了长按拖拽选项.用力按屏幕时用户可以自行调节应用界面等 - 在点击.滑动.缩放的…

PWA学习心得

PWA学习心得一.什么是PWA Progressive Web App , (渐进式增强 WEB 应用) 简称 PWA ,是提升WebApp的体验的一种新方法,能给用户原生应用的体验. PWA 本质上是 Web App ,借助一些新技术也具备了Native App的一些特性,兼具 Web App和Native App的优点. 1.1 PWA 的主要特点  可靠 ( Reliable ) - 即使在不稳定的网络环境下,也能瞬间加载并展现  快 ( Fast )…

移动web开发之touch事件

前面的话 iOS版Safari为了向开发人员传达一些特殊信息,新增了一些专有事件.因为iOS设备既没有鼠标也没有键盘,所以在为移动Safari开发交互性网页时,常规的鼠标和键盘事件根本不够用.随着Android 中的WebKit的加入,很多这样的专有事件变成了事实标准,导致W3C开始制定Touch Events规范.本文将详细介绍移动端touch事件概述包含iOS 2.0软件的iPhone 3G发布时,也包含了一个新版本的Safari浏览器.这款新的移动Safari提供了一些与触摸(touc…

前端应该了解的PWA

一.传统web 应用当前web应用在移动时代并没有达到其在桌面设备上流行的程度,下面有张图来对比与原生应用之间的差别. 究其原因,无外乎下面不可避免的几点: 移动设备网络限制-不可忽略的加载时间 web应用依赖于浏览器作为入口体验与原生的差距假如能解决以上的几点,对web app 来说会有多大的提升可以想象. 二.PWA是什么 PWA 全称Progressive Web Apps(渐进式Web应用程序),旨在使用现有的web技术提供用户更优的使用体验. 基本要求可靠(Reliable)…

你想知道的3D Touch开发全在这里了

前言 iPhone 6s和iPhone 6s Plus为多点触摸界面带来了强大的3D触摸新维度.这项新技术可以感知用户按下显示屏的深度,让他们比以往任何时候都更能使用你的应用程序和游戏.更多关于3D Touch的介绍可以参见这里. 正文接下来会介绍一下所有关于3D Touch开发的一些内容. 0.判断3D Touch是否可用先判断设备是否支持3D Touch,这里主要用到的类是:UITraitCollection.在iOS9之后,可以使用该类判断设备是否支持3D Touch,苹果官方说明如下…

PWA 渐进式Web应用程序 - 解释

想象一下,如果一个网站上所有的功能都能够作为一个移动应用程序为用户所用——任何设备上都可以使用.可接收所有的通知.离线模式可用,为了实现这个愿景,2015年,谷歌创造了渐进式Web应用程序(PWA).什么是PWA?使用PWA对企业有哪些好处? 什么是PWA? PWA是指可以在任何浏览器上执行的支持互联网的应用程序,它是由服务器端脚本(PHP和ASP)和客户端脚本(JavaScript和HTML)组成的. PWA具有成本效益,可以使公司轻松管理各种任务.此外,web应用程序安全性更高,易于定制,可…

PWA的探索与应用

本文由云+社区发表 PWA(Progressive Web App)起源背景传统的Web网页存在以下几个问题: 进入一个页面必须要记住它的url或者加入书签,入口不便捷: 没网络就没响应,不具备离线能力: 不像APP一样能进行消息推送. Native app: 开发成本高软件上线需要审核即使使用频率不高,想使用一个app必须先下载安装 PWA概念的提出 2016 年Google I/O 大会上提出一个 Next Web Generation 的概念.PWA是在传统Web应用的基础上,结合M…

(转)PWA（Progressive Web App）渐进式Web应用程序

PWA 编辑讨论 PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送.在移动端利用标准化框架,让网页应用呈现和原生应用相似的体验. [1] https://baike.baidu.com/item/PWA/22378897?fr=aladdin http://tech.it168.com/a2017/1113/3179/000003179550.shtml 3分钟告诉你什么是渐进…

iOS 不支持 PWA，那又怎么样？

原文链接http://www.zcfy.cc/article/ios-doesn-8217-t-support-progressive-web-apps-so-what-cloud-four-3400.html?t=new 对于为什么没有组织机构投资 PWA 存在着一个普遍的观点:iOS 不支持 PWA.这简直就是胡说八道. 这里给出组织机构应该毫无顾忌地投资 PWA 的几点原因. 来源: Pixabay PWA 在 iOS 上仍然可以运行 iOS 不完全支持 PWA 1的所有特性,但并不意味着…

Cocoa Touch框架

iOS – Cocoa Touch简介: iOS 应用程序的基础 Cocoa Touch 框架重用了许多 Mac 系统的成熟模式,但是它更加专注于触摸的接口和优化.UIKit 为开发者提供了在 iOS 上实现图形,事件驱动程序的基本工具,其建立在和 Mac OS X 中一样的 Foundation 框架上,包括文件处理,网络,字符串操作等. Cocoa Touch 具有和 iPhone 用户接口一致的特殊设计.有了 UIKit,您可以使用 iOS 上的独特的图形接口控件,按钮,以及全屏视图的功能…