分类: Skill

邮箱输入辅助插件 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效果：
继续阅读全文 →