分类
其他

jQuery Cookie 插件

第一次接触 JavaScript 的 Cookie 是在大三的时候,当时用 WordPress 模仿“最土”的团购模板,也就是美团第一个版本,因为后台的东西不太懂,也不会编插件,于是乎,除了评论表单项目增加了内容外,其余功能一概前台处理。当时连清除浮动也不知道是什么玩意,却糊里糊涂的在 WordPress 上实现了团购功能,当然,没有支付功能,因为,是校内团购,给现金,哈哈。

言归正传,那时候的团购网站基本都一个样,首页会显示一个提示框,右上角有关闭按钮,我要实现的就是关闭然后不再显示的功能,我就想到了用 Cookie 来记住这个动作。现在我看回当时的代码,我看不明白了…

分类
其他

制作伸缩上下篇文章导航

上下篇导航

就像大学时说过的,上课是写日志的好时机,现在变成,上班是写日志的好时机。其实我不知道这个上下篇文章导航是不是叫这个名字,也不知道大家知不知道,随缘吧。直接撸代码了。

分类
日志

制作固定定位的导航栏

固定的边栏或者导航栏貌似现在很流行,特别是边栏的广告位,老是跟着你走。这几天大修了一下主题,把顶部缩到只剩导航栏的位置,固定不动,考虑到边栏内容太小,于是边栏一起修改了,比导航栏稍微复杂一点。

效果:导航栏和边栏固定,不随页面滚动。CSS关键代码:

#header{
     width:825px;     //宽度需要确定
     position:fixed;     //固定定位
     z-index:999;     //解决某些情况下固定定位的内容被其他内容遮盖,值越大,表示放的位置越“上”
}

#sidebar{
     width:162px;
     position:fixed;
     margin-right:-411px;     //配合下一条right:50%,使边栏定位在页面之内,值应为网页主题宽度的一半
     right:50%
}
分类
其他

WordPress 如何调用 jQuery 库

本文中将讲解调用 jQuery 的几种方法,当然都是针对 WordPress 的,请自行按喜好进行选择:
WP 的 jQuery 和原版唯一的不同, 就是在最后一行加了

jQuery.noConflict(); 

这个 noConflict() 就是为了与其它的 library 兼容性, 如: Prototype, MooTools, 或 YUI.
第一种方法,直接在网上搜索到的 jQuery 特效,然后对其进行直接调用:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jQuery.js"></script>

2.使用 Google 的 API 库进行调用,貌似很多 jQuery 都是这样调用的,很多插件通过 Google API 替换了 WP 默认的 jQuery,利用谷歌强大的服务器来加快其调用加载速度。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jQuery/1.2.3/jQuery.min.js">

3.直接调用 WordPress 自带的 jQuery 库:

<?php wp_enqueue_script('jQuery'); ?>

但要注意的是:此句必需加在 wp_head(); 的前面!
并且在js文件中的写法是:

jQuery(document).ready(function($) { … }); 

这样 jQuery() 包里的所有 $() 才能被正确识别.
当然也可以使用以下方法,将:

$(document).ready(function() { … });

修改为:

jQuery(document).ready(function($) { … });
分类
日志

简单的 jQuery 前台评论表单验证

WordPress 当然也有表单的验证,不过大家都知道用户体验一点都不好,页面发生跳转,有时还会把表单清空了,而前台表单认证显得非常有必要了。以下是我写的通过改变文本框背景颜色提示用户输入内容,WordPress 只要把以下代码放到 js 文件里就能工作了。验证由点击提交按钮触发,工作原理看注释。

分类
其他

配合使用 Cookie 控制边栏的显示隐藏

发现很多博客都添加了边栏的显示隐藏功能,但是没有保存状态,只要一切换页面边栏又出来的,隐藏功能变得耍帅多于实用。为此我查找了一下 jQuery 的 Cookie 操作教程,使边栏隐藏状态保存到 Cookie ,切换页面照样隐藏,效果就像小博这样。

本来我使用的 jQuery 代码是五木好同志的“完美终结版”,但是使用 cookie 后会出现第一次点击无效的情况,估计是因为他使用的是 toggle 方法,toggle 就是模拟鼠标的连续单击事件,在两种状态下切换,隐藏边栏是第一状态,如果你本来就隐藏了边栏,第一次点击时还是切换到第一状态,其实状态没有改变,出现无效点击的错觉。

分类
其他

jQuery 美妙的标题提示

美妙的标题提示

该特效“不但可以让你的 title 提示效果变得美观,而且可以显示出你将要点击的链接的 url,让用户知道自己将要去哪里”,明显提升了用户感受,至少也吸引了眼球。

jQuery代码,另存为JS或者整合:

jQuery(document).ready(function($){
$("a").mouseover(function(e){
	this.myTitle = this.title;
	this.myHref = this.href;
	this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"..." : this.myHref);
	this.title = "";
	var tooltip = "<div id='tooltip'><p>"+this.myTitle+"<em>"+this.myHref+"</em>"+"</p></div>";
	$('body').append(tooltip);
	$('#tooltip').css({"opacity":"0.8","top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"}).show('fast');
}).mouseout(function(){this.title = this.myTitle;$('#tooltip').remove();
}).mousemove(function(e){$('#tooltip').css({"top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"});
});
});

CSS美化代码:

#tooltip {position:absolute;z-index:1000;max-width:250px;word-wrap:break-word;background:#000;text-align:left;padding:5px;min-height:1em;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
#tooltip p {color:#fff;font:12px 'Microsoft YaHei',Arial,宋体,Tahoma,Sans-Serif;}
#tooltip p em {display:block;margin-top:3px;color:#f60;font-style:normal;}

最后,别忘了载入jQuery库。

分类
其他

几个 JavaScript 库的背景知识

Prototype
概览
– 2005年早期由Sam Stephenson开始
– 随着Ruby on Rails的流行迅速流行
– 由37 Signals支持开发

专注
– 改善JavaScript语言的可用性
– 着重在添加JavaScript”遗忘”的特性
– 清楚的结构、清楚的对象和”类”

细节
– 代码质量非常高
– 所有的动画(和交互)都放在Scriptaculous中
– 更新频繁

分类
其他

jQuery 视觉手册

jQueryVCS

jQuery视觉手册(jQuery Visual Cheat Sheet)是国外知名前端专家Woork制作的对网站设计师和开发人员都灰常有用且实用的参考手册,针对jQuery 1.3。该手册(共6页)包含了全部的附有较详细描述jQuery API参考和部分示例代码。

下载:jQuery视觉手册

分类
其他

模拟 input type=file 实现文件域在不同浏览器下的统一外观

原文地址:http://www.css88.com/archives/2256

表单中的 input type=”file” 在前端开发中经常会用到,但是很悲剧的是 input type=”file” 在各个浏览器下表现不统一,样式很难起作用。

input_type_file

通常我的设计师是非常爱美的,如果真的要还原设计稿,只能通过文本框和按钮去模拟一个 input type=”file”