Posts Tagged ‘javascript’

PHP-Javascript“返回上一页”无缓存问题

星期三, 八月 27th, 2008

很多用PHP写脚本的朋友都会遇到这样的问题,比如一个注册页面(不使用任何AJAX),需要填写账号密码等信息,填写完后需要到服务端验证,如果验证不通过,就要让用户重新填写资料,这对很多用户来说这是一大煎熬,有可能就因此放弃了注册。遇到这种问题,一般有这几种解决方法:

1.仍然调用刚才的页面,输出错误提示,并把<input>中 value的值改为刚才用户输入的值。这应该是最好的方法,但缺点是要在这个页面的<input>的VALUE进行处理,比较麻烦。

2.还有很多懒人像我一样,遇到验证不通过,直接输出一个出错提示页面,并在页面中加入JavaScript的代码:

  1. <a href="javascript:window.history.back();">返回</a>
  2. <a href="javascript:window.history.go(-1);">返回</a>

这个代码是返回上一页的代码,返回后,除了密码类型的所有数据均会保留在网页中,这算是比较友好了。

但有很多朋友反应使用JS的返回后,网页上并没有数据的缓存,有时候却又有,真让人捉摸不定。前几天我在开发的时候也碰到了这个问题,上网Google许久未果,只好又从自己的代码分析入手。这时候,一句 session_start(); 引起了我的注意。session_start(); 是开启 $_SESSION 会话的函数,开启SESSION后,似乎是每次访问一个网页都要重新调用一次网页。我把这句话去掉以后,问题就解决了。如果遇到网页数据不能缓存的,不妨去掉SESSION试试 :)

jQuery教程 第一篇

星期一, 八月 25th, 2008

jQuery是一个十分优秀的JavaScript库,使用jQuery,可以让网页客户端的JS编写更为简单,效果也更加出众。

jQuery主要提供了AJAX,CSS操作,控制DOM等功能。无论你是要使用AJAX连接服务器与客户端,还是控制页面上某个按钮(输入框的属性),获取输入框的值,隐藏或显示某个DIV,各种动画效果,jQuery绝对是不二选择。

好了,就简单说说如何使用jQuery吧。

首先要下载jQuery文件,目前jQuery最新版本为1.2.6,jQuery官方已经有经过压缩版的JS文件,可以直接用于产品的使用,这个包大概在30KB左右,用于网络传输丝毫不会影响网页的载入速度。此外,jQuery还提供了没有编译的源代码,想知道jQuery工作原理的不妨下载来看看,不过我是没多大兴趣了,我只是用jQuery来做我的产品。

使用任何一门脚本语言一定不能少了它的文档,没有文档就无从下手,遇到问题就要不停地Google。jQuery似乎对国际化的支持不够完善,官方也没有提供其他语言的文档,而国内已经有人翻译了一个比较完善的文档点此下载

要使用jQuery,首先在HTML文件中调用jQuery文件,调用这个文件就跟调用别的JS文件一样的:

  1. <script src="jquery.js" type="text/javascript"></script>

现在你就可以在页面里随心所欲地使用jQuery提供的功能了。先来一个最简单的应用:

  1. $(document).ready(function() {
  2.     alert('LOADED');
  3. });

这是一个简单的例子,用于在文档载入成功以后弹出提醒“LOADED”。jQuery中所有功能都要用美元符号开头,如果有一个要绑定一个DOM控件,就可以在括号后输入这个DOM,比如要控制一个DIV,ID为“page”,就是使用$(‘#page’),控制一个SPAN,CLASS为“entry”,在jQuery中就是使用$(‘.entry’),如果控制所有的A链接,直接使用$(‘a’)。这与CSS的语法规则有点类似。

隐藏、显示、高度、宽度

在某些AJAX情况下,我们可能会把所有的内容都放入在一个网页中,比如没登陆的时候提示的登录框,通过AJAX登陆成功后提示登陆信息等,这必然要用到一些隐藏、显示的方法。以往用Javascript就要 DOM.style.display=none,显示就要用 DOM.style.display=block ,这样的代码显得冗长,用jQuery就容易多了。在AJAX过程中显示Loading信息:

  1. $('#loading').height($(document).height());//让这个层高度为页面的高度
  2. $('#loading').width($(document).width());//让这个层宽度为页面的宽度
  3. $('#loading').show();

这个Loading的风格可以是背景用Filter:alpha模糊,这样用户就不能点击页面中的任何东西了,防止重复提交。要做这个Loading信息,首先在页面HTML中输入一个DIV,ID为 loading,容器内放上一个合适的Loading文字或图标。为了兼容更多浏览器,需要即时对#loading赋予当前页面的高度和宽度,保证loading能覆盖整个页面。

  1. #loading{position:absolute;z-index:11;top:0px;left:0px; right:0; bottom:0;background-color:#999999;filter:alpha(opacity=50);-moz-opacity:0.50;opacity:0.50;}

这个代码能做一个层,长宽为页面的最大值,z-index层是最上面,把下面的内容透明覆盖(模糊处理),而且鼠标只能在上一层活动,而不能触摸到页面。(该CSS可能不符合CSS语法规范)

$(‘#loading’).show();是一个让#loading显示的代码,同样,有显示就有隐藏,隐藏使用$(‘#loading’).hide();,此外,还可以在show(),hide()里面加入参数,使它发生动作时更为美观。比如$(‘#loading’).show(’slow’);,是让#loading慢慢地显示出来,更多的参数请参考文档。

需要注意的是,如果使用AJAX,在触发AJAX事件时使用$(‘#loading’).show(’slow’);,在AJAX结束时就不要再使用$(‘#loading’).hide(’slow’);因为slow是一个比较慢的过程(可能需要0.5秒),而AJAX是一个异步调用的过程,这样的结果导致了$(‘#loading’).show(’slow’);和$(‘#loading’).hide(’slow’);几乎是同时进行,可能会导致Javascript发生错误或效果无法显示。

$(‘#loading’).height(‘100px’);这个代码能够把一个高度的数值赋予一个控件,如果没有数值 var heightvalue = $(‘#loading’).height(); ,则是返回一个控件的高度。$(‘#loading’).height($(document).height());就是把整个页面的高度赋值给#loading,使#loading的高度为整个页面的高度,width的用法也是一样的。

关于这个Loading的效果,可以去 http://beta.neekey.com 看看。

CSS

有时候我们需要在页面中即时改变CSS的值(比如对某个出错的信息加粗、红色显示),可以用$(‘#box’).css(‘name’,'value’);的方法来做。现在有个DIV,ID为“box”,里面有一些文字“账号密码输入错误”,这时候需要对这个BOX进行一些处理:

  1. $('#box').css('color','red');//字体为红色
  2. $('#box').css('font-weight','bold');//加粗
  3. $('#box').css('border','1px #333333 solid');//加上边框。

其他信息请参考文档。

AJAX

AJAX是jQuery里面比较重要的应用。jQuery的AJAX分为几个函数,适应不同任务的要求,有完整版的$.ajax(); (类似于PHP中用fsockopen函数),有普通的$.post(); ,$.get(); (类似于PHP中的file_get_contents()函数,fsockopen的阉割版),还有调用Script的 $.getScript();(类似于PHP中的include()语句) 具体需要看你需要用于什么用途了。(以上的比喻可能不是很恰当,仅作为理解使用)

一个完整的AJAX范例

  1. $.ajax({
  2.         type: 'GET',//调用方法,有GET和POST之分
  3.         url:'example.php', //请求的页面
  4.         data: 'email=' + $('#email').value() + '&value2=' + value2, //GET中的数据,POST相同
  5.         dataType: 'xml', //期望返回的数据类型,分为xml 和 html
  6.         cache: false, //不需要缓存 ,分为布尔值 true , false
  7.         success: function(xml){ //成功调用
  8.             //成功后执行的函数。。
  9.         },
  10.         error: function(){ //无法调用,可能是无法连接服务器,服务器404,500错误等
  11.             alert('无法连接服务器');
  12.         }
  13.     });

这个代码中除了用到基本版的AJAX调用,后面的注释写得比较完整了。这里用到了$(‘#email’).value(),是调用一个ID为email的值,请在页面中做一个input输入框,ID为“email”,AJAX时就能获取#email的值并进行AJAX调用了。

除了value()还有 html() text() attr()等获取值的方法, html()是获取整个HTML,如果有个DIV,ID为“page”,同时这个层里还嵌套着数个层,调用$(‘#page’).html()时,会把里面包括HTML TAG在内的所有的字符全部调用,而text()方法只调用文本,也就是去除HTML标记后的内容,attr用于调用某个属性,比如一个 input,有ID为“email” ,CLASS为“input1” ,调用$(‘#email’).attr(‘class’) 会返回CLASS的值“input”。

此外,html() text()还像 css() 一样,拥有赋值的功能,使用方法也类似,attr就要用$(‘#email’).attr(‘class’,'NewValue’) 的方法来赋值了。

返回AJAX中,dataType不能胡乱填写,如果以XML形式返回信息就应该填写xml,同时服务端也最好输出header()的Content-Type为XML,如果只是调用某个HTML页面并把它输入到网页中,填写html就可以了。

更多的AJAX方法请参考文档。

注意:很多使用方法需要在文档加载完成以后调用,特别是把JS文件放在头部的尤其应该注意这个问题,浏览器解释时按照从上到下的顺序解释,如果在刚载入JS就做某个命令如 $(‘#box’).css(‘name’,'value’),此时文档上还不存在#box,这样会导致JS错误,所以需要把这个命令放到$.ready({…});中去 (jQuery规定$.ready({…});等同于$(document).ready({…});,因为只有document有ready的方法。),另外,把它放入到一个函数中,通过页面上某个动作来激活函数也是一个不错的办法。

第一篇到此结束,该文章本人的拙作,在某些术语方面可能不是十分准确,请以文档为准,如果有错欢迎纠正。下一篇什么时候写,看看反响是否热烈 :)

Google Ajax Search使用教程

星期三, 八月 20th, 2008

最近更换主题时没有做搜索模块,首先是闲麻烦,再则Wordpress内置的搜索功能仅算一般,索性也不做搜索框了,然而有时候要找以前的存档又不方便,看到ThinkAgain博客上的Google Ajax Search功能强大,速度贼快,自己也搞了一个,期间也算历经千辛万苦,终于搞定了,先贴结果图。

先介绍一下Google Ajax Search,这是Google面向小型网站、博客推出的搜索服务,它在你的网站上内置搜索框,用AJAX方式调用结果显示在你的网站上,此过程不用访问Google的网页,增快了搜索的速度,提供更好的访客体验。

现在开始说一下如何使用吧。首先要注册一个Google Ajax Search的KEY,挺容易的,输入你的网址,如http://photozero.net ,打个勾赞成服务条款就会得到一个KEY,这个KEY只能用于这个域名下的网页调用。

接下来是把一个Javascript文件嵌入你的博客中。在博客后台打开“主题”-》“编辑主题”,找到“header.php” 这个文件编辑。把类似于

  1. <script src="http://www.google.com/jsapi?key=ABQIAAAAxbEbYoIMv2ddhn6TUcYTwhRLVF4ECcLU8-XSpyOqP4CBr2JuVBTOm1FzKI3-GU5dOFYWlWLxpqdlzA" type="text/javascript"></script>

的代码放在

  1. <head>
  2. ..
  3. </head>

之间。

这是第一步,在你的博客里面引用Google的AJAX搜索的文件。如果担心载入速度受到影响,可以把这个JS文件放在最后载入也是没有问题的。

第二步;在合适的位置放置搜索结果的标记。当用户进行搜索后,这个结果显示在你的博客的某个位置。我的建议是放置在Header之后,博客文章开始之前。我在要放的结果放一个

  1. <div id="googlesearchresult"></div><!--表示结果在这里显示-->

第三步,在合适的位置放置搜索框,如我的是在侧边栏,编辑“sidebar.php” ,在合适的位置放上标记:

  1. <div id="googlesearchcontrol"></div><!--表示搜索框在这里显示-->

第四步,也是最重要的一步,对搜索进行配置。Google Ajax Search(文档)提供了包括网页搜索、博客搜索、视频搜索、图片搜索等多项搜索服务,还可以限定结果网站(如 photozero.net ,限定在 photozero.net 里面搜索结果),相当于“站内搜索”。这一步也是比较麻烦的,如果懂得JavaScript还好说,不懂得就照例画葫芦。下面是示范代码。这是一个类似于标签式的排列方式,另一种是由上至下的排列,比较难看了点。

  1. <script language="Javascript" type="text/javascript">//<![CDATA[
  2.       google.load('search', '1.0');//载入Google Ajax Search
  3.      
  4.       function OnLoad() {
  5.  
  6.         // create a tabbed mode search control
  7.         var tabbed = new google.search.SearchControl();//创建一个控制器
  8.        
  9.         var siteSearch = new google.search.WebSearch();//实例化一个搜索器
  10.         siteSearch.setSiteRestriction("photozero.net");//限定搜索范围,相当于站内搜索了
  11.         siteSearch.setUserDefinedLabel("Photozero站内搜索");//该搜索条显示的名称
  12.        
  13.         tabbed.addSearcher(siteSearch);//将站内搜索添加到搜索器中
  14.         tabbed.addSearcher(new google.search.WebSearch());//添加Web搜索
  15.         tabbed.addSearcher(new google.search.BlogSearch());//添加博客搜索
  16.         tabbed.addSearcher(new google.search.NewsSearch());//添加新闻搜索
  17.         tabbed.addSearcher(new google.search.ImageSearch());//添加图片搜索
  18.         tabbed.addSearcher(new google.search.VideoSearch());//添加视频搜索
  19.  
  20.         // draw in tabbed layout mode
  21.         var drawOptions = new google.search.DrawOptions();//设置搜索选项
  22.         drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);//以标签栏显示
  23.         drawOptions.setSearchFormRoot(document.getElementById("googlesearchcontrol"));//放置搜索框的位置,如果应用在博客以外的某些网页,搜索框要和搜索结果显示在一起,就不用这句。
  24.  
  25.         tabbed.setResultSetSize(google.search.Search.LARGE_RESULTSET);//设置搜索结果显示大小,有大(显示8条)和小(显示4条)之分
  26.         tabbed.draw(document.getElementById("googlesearchresult"), drawOptions);//设置搜索结果和选项
  27.  
  28.         //tabbed.execute("neekey");//如果要在载入时就进行搜索请添上这句
  29.       }
  30.       google.setOnLoadCallback(OnLoad, true);
  31.       OnLoad();//启用代码
  32.     //]]>
  33.     </script>

好了,把上面的代码放入网页的任意位置,就可以看到像我的博客一样的效果了。此外,还有人为这个写了插件,好像就叫Google Ajax Search,但似乎很久没更新了,我也没去试用,如果贪图方便的朋友请上官方插件目录搜索一下。

几个不错的相册3D效果插件

星期天, 五月 11th, 2008

    不知道大家注意到没有?很多博客现在开始有自己的相册,比如我的 http://photozero.net/gallery ,对于相册来说,提供一个不错的浏览效果能有效地吸引访客、提高访客粘性,使用类似渐变、载入条提示等效果都是不错的手段。这里讲几个综合的效果:

    HighSlide:符合CSS标准、适合包括IE5.0,FF1.5以上的大多数主流浏览器。当鼠标靠近缩略图片时,会在图片上显示“Click to enlarge”,提示你点击图片


    点击后,会载入完整图片:

    HighSlide不但对图片有效果,对文本框之类的同样有效果,希望为你的网站提供更好浏览效果的话不妨一试,当然,最好有点JavaScript和CSS的功底。HighSlide是基于CreativeCommons协议的代码,非商业用户可以免费使用。

    LightBox同样是一款非常不错的插件。相比HighSlide,LightBox更有那种Slide滑动的效果。但LightBox只支持对图片特效而不支持文本框之类的。LightBox是免费使用的。

    Piclens也是一款不错的相册插件、还能支持3D浏览功能,真有VISTA的感觉。但如果要完全体验PicLens的3D效果还需要下载他们的客户端插件。

    类似的插件还有 Slimbox,Thickbox,Lightview,jQuery Lightbox Plugin 等。

    使用这样的插件让访客在浏览你的相册的时候不再是单调的体验了,而且你不但可以将这个效果放在相册里,放在自己的个人网页简历上不是倍添色彩?

Wordpress还可以完善的几点建议

星期二, 三月 11th, 2008

    WP是最好的个人博客发布平台之一,但在我使用WP的半年时间里,还是找到了一些可以改进的地方:)

    WP的发布页面默认是富文本编辑工具TinyMCE,但是它需要的JS文件太多,功能偏弱,还不及DISCUZ的编辑器,查看发布页面的源文件发现,它载入了数十个JS文件,这就是为什么我们打开它需要很久时间,特别是国外的空间。真希望WP能更换一个更为简易的编辑器,虽然也有这样的插件。

    WP收购了那个提供头像服务的Gravatar公司,并在新版本中原生支持它,但它的访问速度还有待加快,并且,希望更多的博客程序和BSP一起加入进来,而不仅仅是WP博客。

    WP的备份功能也需要提高,DISCUZ在这点上做得不错,虽然有个插件能很好地完成这个工作,自己手动也能做,但毕竟不如官方的快捷。

    还有一点就是增加对WAP的支持了,目前WAP网民在快速增长,我们不能浪费这部分资源。

用JS+CSS打造绚丽弹出登陆框效果

星期二, 十一月 20th, 2007

view

如图,一个常见的网页效果,像QQ书签,百度收藏均使用这种效果,在用户未登录时,“弹”出一个登录框,输入帐号密码后通过AJAX激活后去除该框即可。这个框不是在浏览器之外弹出的,也不是漂浮的,所以也不会被各种浏览器拦截。怎么实现呢?实际上是先创建一个底下的层,长和宽均为全屏,再使用CSS的FLITER的ALPHA滤镜效果,使背景模糊,并且不可选,再在此上创建一个登录框即可。

1.准备好一个网页模板,建议是符合XHTML4.0的,如果没有,也可以到 www.freecsstemplates.org 下载一个。

2.

在页面最尾部的</body>前加上

<div id=mask style=display:none > </div>
//请自行加上引号以符合XHTML标准 :) ,中间最好加一个空格的HTML转义字符,以免某些浏览器当容器的内容是空的时候不会显示。这是一个背景模糊的隐藏层,另外,默认是隐藏的,可以在页面载入的时候用JS ,像<body onload=check();> 这样来激活

在CSS中创建

#mask{position:absolute;z-index:2;top:0px;left:0px; right:0; bottom:0;background-color:#999999;filter:alpha(opacity=50);-moz-opacity:0.50;opacity:0.50;}
//请注意,这里没有定义这个层的长和宽,因为直接定义 100%可能会不兼容某些浏览器,所以要在后面使用JS获取屏幕宽度和高度后再赋值。位置是相对的才行哦!

现在来创建登录框的部分

<div id=loginform style=display:none>
<table>
<tr><td>
    <form>
    <input />
    ……
    </form>
</td>
</tr>
</table>
</div>

//这是登陆框的主题部分,建议在这个容器以内使用TABLE以便定位,否则某些浏览器会变形。

再添加loginform的CSS定义:

#loginform{position:absolute;z-index:4;width:600px;height:360px; background-color:#F5FFE0;border:1px solid #A5CF3D;}

//这里面的长,宽,可以先预设,同样,相对于顶部和左部的距离也最好用JS来设置。

现在来设置一下JavaScript

<script>
function check(){
//请自行根据情况设置条件,或者也可以用 <a onlick=check();>Check</a>这样来使用,那就不需要判断条件了。
if 条件 {
 $(‘mask’).style.height=document.body.clientHeight + ‘px’;
 $(‘mask’).style.width=document.body.clientWidth + ‘px’;
 $(‘mask’).style.display=’block’;
//设置模糊层的宽和高,并让它显示出来,需要在后面加上 ‘px’,否则Firefox浏览器会出错
 $(‘loginform’).style.top=(document.body.clientHeight -350)/2 + ‘px’;
 $(‘loginform’).style.left=(document.body.clientWidth -600)/2 + ‘px’;
 $(‘loginform’).style.display=’block’;
//设置弹出框距离顶部和左部的距离,也可以固定为 xxx px,并让它显示出来

}
}

function close1(){
 $(‘loginform’).style.display=’none’;
 $(‘mask’).style.display=’none’;
}
//如果要关闭这个层只要让他们设置为隐藏就可以了。

</script>

UIMARK 开发进度

星期天, 十一月 11th, 2007

Uimark.com Alpha2 版正在开发中,这个版本对原来的 www.uimark.com 做了很大的调整,主要在于用户界面更清爽了,更加Web2.0一些,用户体验也会更好一些。尚未登录的时候要添加书签,就会自动弹出一个登陆框,但不是在用户的浏览器上弹出,而是借助于页面的JavaScript+CSS控制层弹出,QQ书签,百度搜藏等也是用这种方法的,但这样做很大的问题就是不可能兼容所有的浏览器,比如百度搜藏的,在IE7下惨不忍睹,而QQ搜藏的比较不错,当然,我的也还行啦,做这个很辛苦,要在IE6,IE7,Firefox等主流浏览器下都适应才行,发个截图先:

ie6.jpg

下次有空再把部分代码贴出来讲解。