邮箱输入辅助插件 EmailPop

在讲解开始之前,你可能希望先查看:demo download

当用户使用邮箱登录你网站时,你可能希望免去用户一些输入,以及防止用户写错邮箱地址,类似于新浪微博登录时的提示:

emailpop

首先需要定义它的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>

基本结构固定好以后,由于选择表现与逻辑分离,需要给它定义样式:

继续阅读全文

IE6 AJAX BUG [object error]

不知道多少人碰见过这个情况,当你使用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升级了下,重做了样式,务求简单易用。

我确实挺懒,每年浪费几百大洋弄这么个博客,结果到现在也没写上几篇,今天天气晴朗,心情不错 :c5 ,写点简单好玩的。

博客右下角添加了个返回顶部按钮,当然,假如你使用的是IE8及以下浏览器,是看不见的,使用其他浏览器的同学可以点击 F12 按钮,调出开发者工具选项查看实现方式,这里我来讲解下各样式含义:

1
2
3
4
<div id="gtt">
     <div id="tt"></div>
     <div id="g"></div>
</div>

这是它的基本结构,由一个圆角方框,一个横条,一个三角组成,样式如下:
继续阅读全文

为弹出提示框添加动态接口

上期讲解了如何使用 Css来设计一个弹出提示框。只是设计还无法使用,需要给它添加一些接口,才可以动态的控制它的显示效果及各种回调方法。

开始之前你可能希望先查看: Demo

首先定义一个方法:

function alertM(content,opt){
	// content表示提示框内容
	// opt表示提示框各种控制参数
}

我所使用的方法是使用多种参数来控制,并不是说这种方法最好,你也可以设计使用多种方法来控制,这并无定理,只是比较适合我而已。
继续阅读全文

设计制作一个自己的弹出提示框

做前端的一般都知道,尽量减少使用alert,主要因为系统的弹出框会终止当前一切进程,甚至连窗口操作也被禁止,实在是不太友好,所以这次讲下如何定制一个你自己的弹出提示框。即:使用html+css制作一个提示框,并使用javascript为它添加常用方法来达到替换系统提示框的目的。

因为时间有限(太忙了,养家糊口的男人你伤不起啊~),我打算分3篇:1、设计制作一个自己的弹出提示框;2、为你的弹出提示框添加交互功能;3、拖拽你的弹出提示框。

在此之前先让我们看下各浏览器的alert效果:
继续阅读全文