标签归档：Javascript

邮箱输入辅助插件 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 对象时出错，所以我去查看服务器返回数据是否格式错误，假如你也认为是这样的话，很抱歉，没有错误。

继续阅读全文 →

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

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

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

首先定义一个方法：

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

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

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

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

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

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

jquery延迟加载图片插件（未完成）

应一位朋友的邀请，尝试着写下这个貌似很热门的插件。昨天晚上构思了一下实现方式，结果没想到今天有点忙 :c4 ，断断续续写了点，初步实现了个非常简单的功能。

先写下我的想法，因为以前看过这方面的源码，实现思路一般两种，一种是打Domready与onload的时间差，不过这在webkit内核下行不通；一种是事先就修改src并添加其他属性（例如html5的data-xxx），所有浏览器都可以实现，缺点是这样用起来太麻烦，而且禁止js的话图片就不显示了。各有各的弊端吧。我本来设想是使用jquery的live方法在dom加载时动态委派事件，结果，事件是委派成功了，怎么执行是个问题 :e7 ，有哪位同学了解这方面麻烦留个言，不胜感谢（别说使用setTimeout··· a:3 ）。
继续阅读全文 →