Posts Tagged ‘css’

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的方法。),另外,把它放入到一个函数中,通过页面上某个动作来激活函数也是一个不错的办法。

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

博客换新装

星期二, 八月 19th, 2008

经过了几天的本地调试,终于把这款自己制作的Wordpress主题放到了博客上。您当前看到的这个主题就是我自己制作的主题,名字叫Simple Zero

这个主题有一些特点:

Header上的书签收藏的链接;这个ICON以及链接是从ThinkAgain的wp_addbookmarks上搬过来的,我觉得这种纯HTML的事直接放在主题里就好了,弄成插件略微占了点服务器资源。ThinkAgain的效果更不错,平常情况下ICON是用CSS的ALPHA模糊了,一旦鼠标移上去(热点)又变成正常的图标。我把这个效果试着写入CSS中,在CSS校验的时候被告知FLITER:ALPHA不存在于CSS2.1,存在于CSS3.0,另外一个opacity又是语法错误,只好不弄这个效果了。

10种语言翻译功能。这个功能虽然实用性不大,但如果有了这功能就自我感觉良好,YY一下。这个功能应该也有WP插件能提供的,此外Google也提供了Widget,相比之下,使用插件略微有点浪费,使用Google Widget又担心JS的调用影响速度,而我的做法是内置的HTML的 <a>链接,不会拖累速度。这些国旗的ICON是我先前介绍的FAMFAMFAM出品的世界各国国旗,效果还挺不错的。而Google的网页翻译的URL也容易找到。

内置多种插件支持,包括了Thinkagain的Hot Friends,用于分页的WP-PageNavi,当然,自己的插件Reviewers_Info以及NeekeyBeta服务也是不能缺少的。特别针对WP-PageNavi的设计了更匹配页面的CSS风格。
更加完美的Gravatar支持。由于现在Gravatar在国内也是很普及了,该主题对Gravatar提供了更好的支持,甚至连文章的作者都已经用Gravatar头像来显示了 :)

标准的XHTML和CSS验证。已经通过了XHTML 1.0 Traditional,CSS 2.1认证。XHTML认真中比较容易出错的地方一个是 <img> 标签应该有 alt=”" 说明,另外是<a>或<img>等调用URL时 http://example.com/example.php?var1=A&var2=B,其中的&在HTML下应该用&amp;替换,当然,如果是XHTML 1.0 Strict标准,别忘了<a> 链接里不能用 target=”_blank”(新窗口打开)。通过了CSS和XHTML验证,我就放心地在页面的FOOTER挂上了W3.ORG的链接了。

至于小挂件方面,在FOOTER放置了ALEXA和Google Pagerank的图标显示,都是80*15px大小的图标,方便地让访客了解到你的博客的信息。,这个Alexa排名显示是特别为这个主题准备的,如果您想使用,请在网页的任意地方添加HTML代码 <img src=”http://dev.neekey.com/alexa-80×15.php?s=photozero.net” alt=”" /> ,其中粗体部分更换为你的网址。

支持主流的Firefox 3 和IE 7。通过Clicki的统计和留言的浏览器统计显示,我的博客访客中,Firefox是最常使用的浏览器,这与访客人群多为技术人员或对IT有一定了解的访客为主有关。另外,由于我的电脑上已经没有IE6,且IE6也算已经被淘汰,也没有去测试了,如果用IE6的朋友感觉很乱,还望见谅!

除了主题更换了,页面也做了一定的调整,在Zeus博客的指点下,我也创建了链接页面,今后博客首页只用Hot Friends显示本月最多回复TOP 20以及自己的NeekeyBeta项目的链接,其他链接转到Links页面,还望见谅。此外,我还把插件的页面重新划分了,看起来不会太乱了。

用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

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