Entries (RSS)
Comments (RSS)

jquery end() 函数

Jan 23, 2008 Author: | Filed under: Uncategorized

类似于 undo 函数，用于返回到调用 find() 或 parents() 函数（或者其它遍历函数）之前的 jQuery 对象。

$(’form#login’)</p> <p>// hide all the labels inside the form with the ‘optional’ class</p> <p>.find(’label.optional’).hide().end()</p> <p>// add a red border to any password fields in the form</p> <p>.find(’input:password’).css(’border’, ‘1px solid red’).end()</p> <p>// add a submit handler to the form</p> <p>.submit(function(){</p> <p>return confirm(’Are you sure you want to submit?’);</p> <p>}); 显示更多

所有空 td 加入 -

$(’td:empty’).html(’-');

非 class=”required” 隐藏

$(’input:not(.required)’).hide();

jquery show() hide() 函数

$(’ul, ol, dl’).hide();

table class=”stried” 下所有 odd（偶数）tr 背景色

$(’table.striped > tr:odd’).css(’background’, ‘#999999′);

jquery 插件例子

$.fn.background = function(bg){

return this.css(’background’, bg);

};

$(”body”).background(”#c00″)

可以使用 jQuery 处理基本的动画和显示效果。animate() 函数是动画代码的核心，它用于更改任何随时间变化的数值型的 CSS 样式值。比方说，您可以变化高度、宽度、不透明度和位置。还可以指定动画的速度，定为毫秒或者预定义的速度：慢速，中速或快速。

下面是一个同时变化某个元素高度和宽度的示例。请注意，这些参数没有开始值，只有最终值。开始值取自元素的当前尺寸。同时我也附加了一个回调函数。

$(’#grow’).animate({ height: 500, width: 500 }, “slow”, function(){

alert(’The element is done growing!’);

});

jQuery 的内置函数使更多常见的动画更容易完成。可以使用 show() 和 hide() 元素，立即显示或者以特定的速度显示。还可以通过使用 fadeIn() 和 fadeOut()，或者 slideDown() 和 slideUp() 显示和隐藏元素，这取决于您所需要的显示效果。下面的示例定义了一个下滑的导航菜单。

0 Comments

firefox css bug

Jan 22, 2008 Author: | Filed under: Uncategorized

firefox background-position bottom bug

当背景图片大于页面时，firefox background-position bottom 显示有bug，不是浏览器的左下角而是当前页面可见元素的左下角。

设置 html {height:100%} 后解决问题（也可以 body {height:100%，但有时候不行}）。还有把设置 100%（或者其他百分比）的说法，但似乎不行。

</p> <style> <p>body {background:url(http://www.butone.com/guoshuang/caijue/themes/orange/images/login-back.jpg) left bottom}</p> </style> <p><body></p> <p>文字一</p> <p>文字2</p> <p>文字3</p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

</p> <style> <p>html {height:100%}</p> <p>body {background:url(http://www.butone.com/guoshuang/caijue/themes/orange/images/login-back.jpg) left bottom}</p> </style> <p><body></p> <p>文字一</p> <p>文字2</p> <p>文字3</p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

firefox 控制 legend 也有bug! 这样这里是legend 来控制。

http://www.tyssendesign.com.au/articles/css/legends-of-style/

label 也有bug，firefox 基本上对 label 的样式表不能正确处理，哪怕是

label#labelid #other 这样的样式也不能识别！

0 Comments

firefox 框架大小的控制代码

Jan 21, 2008 Author: | Filed under: Uncategorized

firefox 中不能象 ie 那样直接 top.AAA.cols=”…” 来修改框架宽度，而必须 document.getElementById(”aa”).setAttribute(”cols”,”…”)

</p> <p>This would work everywhere (except NC4 IE4)</p> <p><html></p> <p><script type="text/javascript"></p> <p>function resizeMenu(sinistra,destra)</p> <p>{</p> <p>var attr = sinistra+'‰,'+destra+'‰';</p> <p>document.getElementById("general").setAttribute('cols',attr);;</p> <p>}</p> <p></script></p> <p><frameset id="general" cols="20%,80%"></p> <p><frame id="leftFrame" src="menu.htm"></p> <p><frame id="rightFrame" noresize scrolling="no" src="frame_a.htm"></p> <p></frameset></p> <p></html></p> <p>file ‘frame_a.htm’ :</p> <p><html></p> <p><a href="#" onclick="top.resizeMenu(0,100);return false;">hide menu</a></p> <p><a href="#" onclick="top.resizeMenu(20,80);return false;">show menu</a></p> <p></html></p> <p> 显示更多

0 Comments

css 文字渐变色效果

Jan 19, 2008 Author: | Filed under: Uncategorized

来自 CSS Gradient Text Effect的效果，我记得去年就见过，但blog里面找不到，再发。

</p> <style> <p>body {background:#000;margin-top:70px;}</p> <p>.full h1 {</p> <p> font: 40px "Lucida Grande", Arial, sans-serif;</p> <p> position: relative;</p> <p> margin: 0;</p> <p> color: #fff;</p> <p> width:480px;</p> <p>}</p> <p>.full h1 span {</p> <p> background: url(http://www.webdesignerwall.com/demo/css-gradient-text/images/gradient-dark.png) repeat-x left bottom;</p> <p> position: absolute;</p> <p> bottom: 0;</p> <p> display: block;</p> <p> width: 100%;</p> <p> height: 29px;</p> </style> <p></p> <div class="full"> <h1>Guoshuang is so great!<span></span></h1> </div> <p><button onclick="document.body.style.backgroundColor='#c00';">背景变红看这里就看清楚了！</button> <button onclick="document.body.style.backgroundColor='#000';">背景变黑</button></p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

原理很简单，在文字上面放一个png（32位）透明的图片。ie 7 以下使用 AlphaImageLoader 滤镜。

如果嫌 span 太不 sematic 的话，可以用 js 方法加入。比如用 jquery

</p> <p><script type="text/java script" src="jquery.js"></script></p> <p><script type="text/java script"></p> <p>$(document).ready(function(){</p> <p> //prepend span tag to H1</p> <p> $("h1").prepend("<span></span>“);</p> <p>});</p> <p></script></p> <p> 显示更多

相关日志：

css 图片渐大效果

CSS 破碎文字效果

CSS 彩虹效果

纯 css 效果的 image hover

CSS 文字效果

Lightbox JS 不错的js+css图片显示效果

用 CSS 模拟的frame 框架效果

纯css制作表头锁定效果！

CSS 阴影标题

更多关于css的日志

0 Comments

javascript 的 MD5 加密代码

Jan 19, 2008 Author: | Filed under: Uncategorized

来自 javascript md5 - Paj’s Home的代码，还有 md4 和 sha1 的js 代码。在前台处理 md5 加密。你可以在 cmd5.com 解密下面的代码，看看对不对（cmd5.com其实还是穷举，复杂的代码不能解密）。

</p> <p><script src="temp/md5.js"></script></p> <p><script type="text/javascript"></p> <p> alert(hex_md5("123456"));</p> <p></script></p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

0 Comments

加入留言者自己的mybloglog或者gravatar头像

Jan 19, 2008 Author: | Filed under: Uncategorized

直接在留言的时候，判断并写入数据库。用户要么有 mybloglog 头像，要么 gravatar的。准备下周加到 blog 系统中。

</p> <p><script src="temp/md5.js"></script></p> <p><script src="temp/Jquery/jquery.js"></script></p> <style> <p>*,td {font-size:12px;}</p> <p>input {width:600px;}</p> </style> <p>输入你的网址（http://www.a.com）或者邮箱（a@a.com）：</p> <input id="urlEmail" name="url" value="http://" /> <p>最终头像图片地址：</p> <input id="guestGravatar" name="gravatarURL" value="http://blog.guoshuang.com/face/face1.gif" /> <hr /> <p>你的<span id="whatGra"></span>头像是：</p> <p><img id="g1" src="http://blog.guoshuang.com/face/face1.gif" /></p> <p><script></p> <p>$(function(){</p> <p>gstr1="http://pub.mybloglog.com/coiserv.php?href=";</p> <p>gstr2="http://www.gravatar.com/avatar.php?gravatar_id=";</p> <p>$("input#urlEmail").blur(function(){oValue=$(this).val();if(oValue.indexOf("@")==-1){gstr=gstr1+$(this).val();$("#guestGravatar").val(gstr);$("#g1").attr("src","http://www.butone.com/btnews/ajax.gif");$("#g1").attr("src",gstr);$("#whatGra").html("Mybloglog");;}else{gstr=gstr2+hex_md5($(this).val());$("#guestGravatar").val(gstr);$("#g1").attr("src","http://www.butone.com/btnews/ajax.gif");$("#g1").attr("src",gstr);$("#whatGra").html("Gravatar");;}})</p> <p>})</p> <p></script></p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

表示没有注册过 gravatar

表示没有注册过 mybloglog

相关资料：

显示 mybloglog 头像代码

显示 gravatar 头像代码

0 Comments

Pages (171): « 1 2 3 4 5 6 » ... Last »

Flickr PhotoStream

ubuntu_avant_window_navigator

ubuntustudio theme

GNU-xga

Screenshot-x-session-manager

Screenshot-synaptic-1

Recent Posts

Recent Comments

James on 简单的 php+mysql 留言板代码
OK on opera 安装 flash 插件的另类方法
lroncoffee on 用 flocker 转换 firefox 的插件到 flock
ff on swfupload 文件上传
ff on 简单的 php+mysql 留言板代码

Pages

关于这里

Categories

Tags

css flickr javascript

Blogroll

Meta

Advertising

Most Popular

Recent Comments

Latest Entries