在讲解开始之前,你可能希望先查看:demo download
不看demo也可以,就平常使用Google 或百度在搜索框输入内容时,搜索框下自动显示关键字的提示。
这篇是《邮箱输入辅助插件 EmailPop》的后续。html结构和css样式一点没变,js也只改动了些许:
在讲解开始之前,你可能希望先查看:demo download
不看demo也可以,就平常使用Google 或百度在搜索框输入内容时,搜索框下自动显示关键字的提示。
这篇是《邮箱输入辅助插件 EmailPop》的后续。html结构和css样式一点没变,js也只改动了些许:
在讲解开始之前,你可能希望先查看:demo download
当用户使用邮箱登录你网站时,你可能希望免去用户一些输入,以及防止用户写错邮箱地址,类似于新浪微博登录时的提示:
首先需要定义它的html结构,这决定了它的显示方式及运行原理,我使用了一个无序列表“UL”:
1 2 3 4 5 6 | <ul id="emailpop" class="autopop"> <li class="notpop">请选择邮箱类型</li> <li class="pop">yu123</li> <li>yu123@gmail.com</li> <li>yu123@sina.com</li> </ul> |
基本结构固定好以后,由于选择表现与逻辑分离,需要给它定义样式:
不知道多少人碰见过这个情况,当你使用jQuery 的ajax 方法调取JSON 或JSONP 对象时,在本地调试一切正常(包括IE6),但上传到服务器时IE6 就无法执行了。
假设代码是这样的:
1 2 | <div id="c"></div> <a href='javascript:' id="btn">test</a> |
1 2 3 4 5 6 7 8 | $("#btn").on("click",function(){ $.ajax({ url:"1.json", dataType:"JSON" //JSON 或 JSONP }).done(function(data){ $("#c").html(data.content); }) }) |
本地调试时包括IE6 在内各大主流浏览器都执行正常,上传到服务器再访问时,ie6 失败了。
以前一直使用的 <a href=”javascript:void(0)”>,自从看了《疑问:为什么要使用href=”javascript:void(0);”?》这篇文章后我也开始使用 <a href=”javascript:”>,所以我尝试修改回去,结果还是不行。
然后我想看看错误信息,改了下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $("#btn").on("click",function(){ $.ajax({ url:"1.json", dataType:"JSON" //JSON 或 JSONP }).done(function(data){ $("#c").html(data.content); }).fail(function(a,b,c){ alert(a.readyState); //输出:4 alert(a.responseText); //输出:undefined alert(a.status); //输出:200 alert(a.statusText); //输出:success alert(b); //输出:parseeror alert(c); //输出:[object error] }) }) |
看情况是数据获取正常,但转换为JSON 对象时出错,所以我去查看服务器返回数据是否格式错误,假如你也认为是这样的话,很抱歉,没有错误。
上周六刚刚辞职,这几天闲着没事把wp升级了下,重做了样式,务求简单易用。
我确实挺懒,每年浪费几百大洋弄这么个博客,结果到现在也没写上几篇,今天天气晴朗,心情不错 ,写点简单好玩的。
博客右下角添加了个返回顶部按钮,当然,假如你使用的是IE8及以下浏览器,是看不见的,使用其他浏览器的同学可以点击 F12 按钮,调出开发者工具选项查看实现方式,这里我来讲解下各样式含义:
1 2 3 4 | <div id="gtt"> <div id="tt"></div> <div id="g"></div> </div> |
这是它的基本结构,由一个圆角方框,一个横条,一个三角组成,样式如下:
继续阅读全文
更新内容:添加多点触控事件,点击图片可以详细查看,可以多点放大,旋转。
请使用Ipad访问此链接: http://ipad.yu123.me/
近来做了个 IpadHtml5触摸展示,使用了touchEvents,audio,video,canvas,Css3等元素。
俗话说“无图无真相,无Demo不足信”,
请使用Ipad访问此链接: http://ipad.yu123.me/
做前端的一般都知道,尽量减少使用alert,主要因为系统的弹出框会终止当前一切进程,甚至连窗口操作也被禁止,实在是不太友好,所以这次讲下如何定制一个你自己的弹出提示框。即:使用html+css制作一个提示框,并使用javascript为它添加常用方法来达到替换系统提示框的目的。
因为时间有限(太忙了,养家糊口的男人你伤不起啊~),我打算分3篇:1、设计制作一个自己的弹出提示框;2、为你的弹出提示框添加交互功能;3、拖拽你的弹出提示框。
在此之前先让我们看下各浏览器的alert效果:
继续阅读全文