iOS Web APP的滚动部分
2014-08-08

在iOS系统里面,任意webview在可滚动状态下,都是可以拖超出边界然后反弹回来的。这个效果非常的好看和实用。但是如果我要做一个web app,我就不希望我的整个app界面也被用户拖动。

在很久以前,iOS的浏览器是不支持overflow scroll的,也就是说除了整个网页可以滚动以外,其他部分是不能局部滚动的。要实现局部滚动,一般都是用iScroll等插件,用javascript来模拟滚动。这技术说起来容易做起来难,我看了无数个类似的东西,没有任何人能做到原生一样的滚动反弹效果。最接近原生效果的是我从某牛逼网站上8下来的代码:https://github.com/longbill/ScrollPane

后来iOS退出了iOS5,其中的浏览器支持了overflow scroll。在配合  -webkit-overflow-scrolling: touch; 的情况下滚动起来是比较理想的。但是唯一有一个弊端就是当局部滚动区域处于滚动边缘的时候(比如处于最上面),此时继续网下滚动手指,滚动操作不会体现在局部滚动区域,而是会作用于整个网页。这个在做web app的时候,是完全无法忍受的。做出来的效果跟把web app界面的头部和底部用position fixed固定是一样的。

所以,即使overflow scroll从iOS5起就被支持,但是用javascript模拟滚动的需求还是十分旺盛。其中很重要的一点就是滚动会传递到外面的网页。另外也很重要的一点就是原生的滚动很难实现类似pull to refresh的操作。

后来我打算将我的精选文章做成web app的形式。尝试了无数的scroll插件,都让人失望。被逼无奈仔细研究了一下原生的overflow scroll。再后来被我找到了一个奇怪的方法,来阻止滚动操作传递到整个网页。

就是。

在手指放在屏幕上的时候,判断里面的滚动部分的 scrollTop 是不是 0 或者 最底下。如果是,那么将 scrollTop 轻轻位移1个像素。就可以了。

另外,我还实现了一个pull to refresh,虽然效果跟原生的不太一样,但是看起来也还不错。

代码我空了会整理写文档然后放到github上。大家可以先看这个 demo。 暂时只支持iOS系统。安卓请忽略。

http://jszen.com/public/demo/ptr/index.html

完。

1049 read 1 comment(s)
最近做了个海拔高度查询网站
2014-08-08

        最近经常出去自驾游,往川西的高原跑。经常会遇到一个问题就是不知道当前的海拔高度。正好我最近又在学习做站。索性就弄了一个专业查询海拔的网站:海拔高度查询工具  利用Google的API来获取相关信息。不过由于最近天杀的GFW把google全部服务给墙掉了。只能用ditu.google.cn的服务。但是仍然有一些请求走的是maps.googleapis.com,于是搞了个hack,把所有maps.googleapis.com的域名换成ditu.google.cn。还好,大部分都能用。

还是上两张图吧。在红原县附近拍的。

完。

953 read 1 comment(s)
怎样设计密码重设功能
2013-10-01

当我们设计一个带有用户注册/登录功能的网站的时候,一个必须的功能就是重设密码。 重设密码功能有很多种设计方式,比如发送一个新密码到用户邮箱等。不过今天我要介绍一个我经常用实现方式。

用户流程:

  1. 用户忘记密码,来到密码重设界面
  2. 用户输入Email地址,点击重设密码按钮
  3. 用户收到一封密码重设邮件,里面有重设密码的链接,此链接有过期时间
  4. 用户点击链接,来到密码重设页面,输入新密码,完成

这个流程并没有什么创新,很多网站都是用这套流程

后端实现方式:

  1. 当用户输入Email地址后,验证这个Email,如果存在于数据库,那么取得用户的user_id
  2. 将user_id和当前时间戳编码成HASH,需要提前准备好一个KEY,并且这个KEY只存在服务器上。  HASH = md5 ( user_id + timestamp + KEY )
  3. 生成一个URL,并且附带刚刚生成的HASH和用户id以及timestamp,比如 http://domain.com/reset-password.php?hash=HASH&user_id=123&timestamp=1392121211
  4. 当用户访问这个URL, 检查HASH是否合法: HASH == MD5 ( user_id + timestamp + KEY)
  5. 检查 timestamp 是不是过期了
  6. 如果所有检查通过,那么显示一个新密码表单给用户

这种方式的好处:

  1. 不需要额外的数据表
  2. 不用担心参数被用户恶意修改,因为要检查hash是不是等于那几个参数的md5
  3. 密码重设URL自带时间戳
  4. 只要KEY设置的足够长足够复杂,那么可以认为HASH是绝对安全的

更详细的样例代码可以参考这里:http://jszen.com/reset-password-system.6.html

完。

4767 read 5 comment(s)
最方便的纯文本编辑器Mac Only
2013-07-25

    Mac操作系统里面有个好用的东西叫做Dashboard,Windows的桌面小工具就是抄的Dashboard。   Dashboard里面的Widget都是用网页技术做的(HTML, Javascript 等),Dashboard仅仅是提供一个透明的window来显示widget的网页而已。

    Mac操作系统自带的Widgets里面就有一个叫做“便签”的东西,可以实现类似记事本的功能,但是记录的文本有限,不能超过便签窗口的大小,实际使用起来十分蛋疼。

    我这个小东西的特点是这样的:

  • 提供一个白底黑字的文本框显示在dashboard界面
  • 文本框使用textarea控件,里面的文字保证没有任何格式
  • 理论上可以在里面输入无限制长度的字符
  • 关闭dashboard界面的时候,文本框里面的文字内容自动保存到硬盘
  • 窗口大小可以自由调节
  • 支持添加多个窗口到dashboard

 

    下载: here    源代码:Github page

完。

4117 read 1 comment(s)
原创jQuery插件: Date Range Picker
2013-07-23

某些时候,我们需要用户输入一个日期范围,比较直观的想法是用两个date picker控件。但是两个date picker给用户带来的体验并不好。于是我搞了个jQuery插件,可以实现在一个界面里面选择日期范围,并且将选择的值输出到一个input框中。

  • 依赖 jQuery 1.3+, Moment 2.0.0+
  • 支持 IE6+, Firefox, Chrome, Safari 等浏览器
  • 支持多语言
  • 界面完全CSS可控

文档以及代码见我的英文博客:http://jszen.com/jquery-date-range-picker-plugin.4.html

下载:https://github.com/longbill/jquery-date-range-picker

完。

4412 read 2 comment(s)
[1] 2 3 4 ...35 下一页
Copyright © Longbill 2008-2014 , Designed by EndTo , Powered by EndCMS