H5+学习 之 返回键功能设计

利用H5+和mui框架实现app 在实现过程发现返回键只能应用于mui.openWindow大开的窗口,但是有时候app里嵌入的是外部链接,在外部连接内可能还有连接想要点击里面的连接后按返回键可以实现返回,当返回到不能在返回的时候连续按两次返回键实现退出应用,下面是我写的js代码,利用mui的beforeback回调实现:

H5+ 学习 之 地理定位

最近在学习利用html5开发app的工具和api,发现了利用HBuilder、HTML5plus runtime、mui框架前端自己也可以开发出漂亮的app来,下面是一个利用H5+实现的一个地理定位功能,感兴趣的同学们下面有网址,可以点击去学习 官方首页:http://www.dcloud.io/index.html API文档:http://www.html5plus.org/doc/ mui文档:http://dev.dcloud.net.cn/mui/ui/

浏览器阻止window.open的解决方案

之前在做项目的时候也遇到过浏览器会阻止window.open方法,一直没有找到解决方案,直到这一次在被这个问题所困扰后脑子里突然想起wordpress的后台在发布文章的时候有一个预览按钮,第二次点击的时候不是在新开窗口而是在上一次打开的窗口又刷新了一遍,后来研究了一下window.open的参数设置,发现需要给这个open窗口定义个名称两次打开的是同一个名称的话就会是刷新而不是在次新开窗口,有了这个重大发现,问题就迎刃而解了! 先分析一下浏览器为什么会阻止window.open吧: 用户主动去触发事件的浏览器不会阻止,什么是用户主动触发的呢?就是当用户去点击的一瞬间就弹出这种浏览器是不会阻止的…阅读全文

SASS入门教程

一、什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。 本文总结了SASS的主要用法。我的目标是,有了这篇文章,日常的一般使用就不需要去看官方文档了。 二、安装和使用 2.1 安装 SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。 假定你已经安装好了Ruby,接着在命令行输入下面的命令: 然后,就可以使用了。 2.2 使用 SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss,意思为Sassy CSS。 下面的命令…阅读全文

Sass安装(windows版)

在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,大家可以到 Ruby 的官网(http://rubyinstaller.org/downloads)下载对应需要的 Ruby 版本。 Ruby 安装文件下载好后,可以按应用软件安装步骤进行安装 Ruby。在安装过程中,个人建议将其安装在 C 盘下,在安装过程中选择第二个选项(不选中,就会出现编译时找不到Ruby环境的情况),如下图所示: Ruby 安装完成后,在开始菜单中找到新安装的 Ruby,并启动 Ruby 的 Command 控制面板,如下图所示: 当你的电脑中安装好 Ruby 之后,接下来就可以安装 Sass 了。同…阅读全文

Sass命令编译

命令编译 命令编译是指使用你电脑中的命令终端,通过输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。因为只需要在你的命令终端输入: 单文件编译: sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css 这是对一个单文件进行编译,如果想对整个项目所有 Sass 文件编译成 CSS 文件,可以这样操作: 多文件编译: sass sass/:css/ 上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件,并且将这些 CSS 文件都放在项目中“c…阅读全文

HTML5无刷新实现跳转页面技术

window.onpopstate window.onpopstate是popstate事件在window对象上的事件句柄. 每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发. 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝. 调用history.pushState()或者history.replaceState()不会触发popstate事件. pops…阅读全文

CSS3 @media 查询

实例 如果文档宽度小于 300 像素则修改背景演示(background-color): 定义和使用 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。 浏览器支持 表格中的数字表示支持 @media 规则的第一个浏览器的版本号。 CSS 语法 你也可以真的不同的媒体使用不同 stylesheets : 媒体类型 值 描述 all 用于所有设备 aural 已废弃。用于语音和声音合成器 …阅读全文

汇总前端最最常用的JS代码片段-你值得收藏

html5选择器 鼠标滚轮事件 阻止冒泡 阻止默认行为 说明:该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果 type 属性是 “submit”,在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。 检测浏览器是否支持svg 检测是否是微信浏览器 jQuery获取鼠标在图片上的坐标 js获取验证码倒计时效果 jquery类似模块加载器的方法 JS检测浏…阅读全文

大图预览幻灯

jquery.magnific-popup.js www:http://dimsemenov.com/plugins/magnific-popup/ github:https://github.com/dimsemenov/Magnific-Popup    

全屏滚动特效

jQuery Scrollify www:http://projects.lukehaas.me/scrollify/#home github:https://github.com/lukehaas/Scrollify 基本设置 Scrollify需要的jQuery1.6+。 大多数基本设置如下: 默认配置: 选项 section:选择的部分。 sectionName:您可以定义每个部分的哈希值。这使得有可能以永久链接到特定的部分。这被设定为在各节的数据属性。数据属性的名称被定义sectionName定义。 easing:定义缓动方法。 offset:偏移的距离以像素为单位,以抵消由每个部分的…阅读全文

鼠标滚轮事件插件

jquery.mousewheel.js github:https://github.com/jquery/jquery-mousewheel 使用方法 网上看不用插件来实现鼠标滚轮事件,经过测试兼容性也非常好用