随笔 - 7  文章 - 0 评论 - 19 trackbacks - 0
<2008年6月>
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345

与我联系

搜索

 

常用链接

留言簿

我参加的小组

我的标签

随笔分类(7)

随笔档案(3)

文章分类

最新评论

阅读排行榜

评论排行榜

 

/* 基于jQuery框架的通用插件
 * 作者: 艺林
 * 日期: 2008-05-05
 
*/

/* 插件名称:解决链接被点击后出现虚线的问题
 * 功能描述:链接被点击后,让其自动失去焦点,从而避免出现聚焦时的虚线。
 * 使用说明:无需其他设置
 * 添加日期:2008-06-16
 
*/
 $(
function() {
    $(
"a").focus(
        
function() {
            
this.blur();
        }
    );
 
/* 插件名称:隐藏正文的文章标题列表
 * 功能描述:文章标题列表,默认情况正文通过div隐藏,点击标题div实现正文div的显示与隐藏
 * 使用说明:样式为title和content的div成对出现即可
 * 添加日期:2008-05-05
 
*/
    $(
".title").toggle(
        
function() {
            $(
this).next(".content").show();
            
//$(this).css("border","1px solid #C6D5F5");
            $(this).css("background","url(/Images/button_collapse.gif) no-repeat 5px 2px");
        },
        
function(){
            $(
this).next(".content").hide();
            $(
this).css("background","url(/Images/button_expand.gif) no-repeat 5px 2px");
            
//$(this).css("border","0px");
        }
    );

 

/* 插件名称:设置对象浮雕效果
 * 功能描述:通过对class为relief的对象的鼠标事件的响应,设置其css属性,以实现浮雕效果
 * 使用说明:将需要实现该插件效果的对象的class设置为relief即可
 * 添加日期:2008-05-05
 
*/
    $(
".relief").mouseover(
        
function() {
            $(
this).css("border","1px solid");
            $(
this).css("border-color","#FFFFFF #999999 #999999 #FFFFFF");
        }
    );
    $(
".relief").mouseout(
        
function() {
            $(
this).css("border","1px solid #EEEEEE");
        }
    );
    $(
".relief").mousedown(
        
function() {
            $(
this).css("border","1px solid");
            $(
this).css("border-color","#999999 #FFFFFF #FFFFFF #999999");
        }
    );
    $(
".relief").mouseup(
        
function() {
            $(
this).css("border","1px solid");
            $(
this).css("border-color","#FFFFFF #999999 #999999 #FFFFFF");
        }
    );


/* 插件名称:Treeview控件单击后更改节点背景颜色
 * 功能描述:客户端单击事件触发时改变节点背景颜色
 * 使用说明:所有节点具有NodeStyle的class
 * 添加日期:2008-07-24

 */
    $(
"a.NodeStyle").click(
        
function() {
            $(
"a.NodeStyle").css("color","#5E5E5E");
            $(
"a.NodeStyle").css("background-color","");
            $(
this).css("color","#FFFFFF");
            $(
this).css("background-color","#003366");
        }
    );
});

Tag标签: jQuery
posted on 2008-06-18 13:23 艺林 阅读(2526) 评论(18)  编辑 收藏 所属分类: jQuery

FeedBack:
#1楼  2008-06-18 13:37 kkun      
呵呵,这样的话,还可以写好多出来,
  回复  引用  查看    
#2楼 [楼主] 2008-06-18 13:41 艺林      
@kkun
是啊,所以叫招数,所以不断更新。你可能觉得这些不值一提,但在项目开发中,我发现这种方式很实用。
  回复  引用  查看    
#3楼  2008-06-18 13:47 心有灵犀      
支持!
  回复  引用  查看    
#4楼  2008-06-18 13:51 白发先生      
希望楼主直观一点,做出对应Demo
  回复  引用  查看    
#5楼  2008-06-18 13:53 willieQ      
不错。。。支持~~~~~~~~~~
  回复  引用  查看    
#6楼  2008-06-18 13:58 寒 刚入门      
简化一下
$(".relief").mouseover(
function() {
$(this).css("border","1px solid");
$(this).css("border-color","#FFFFFF #999999 #999999 #FFFFFF");
}
).mouseout(
function() {
$(this).css("border","1px solid #EEEEEE");
}
).mousedown(
function() {
$(this).css("border","1px solid");
$(this).css("border-color","#999999 #FFFFFF #FFFFFF #999999");
}
).mouseup(
function() {
$(this).css("border","1px solid");
$(this).css("border-color","#FFFFFF #999999 #999999 #FFFFFF");
}
);
  回复  引用  查看    
#7楼 [楼主] 2008-06-18 14:02 艺林      
@willieQ
写这篇文章时,还在考虑是否以每个招数做成Demo的形式,想想还是集中发布,然后再另写文章讲解如何使用。

  回复  引用  查看    
#8楼 [楼主] 2008-06-18 14:04 艺林      
@心有灵犀
@willieQ
都是些雕虫小技,以提升用户体验为主。多谢捧场!
  回复  引用  查看    
#9楼  2008-06-18 14:24 attitude      
挺好,顶一个!
  回复  引用  查看    
#10楼  2008-06-18 14:49 sujiantao      
不错啊,支持.
  回复  引用  查看    
#11楼  2008-06-18 15:30 Tony Zhou      
能看个效果否?
  回复  引用  查看    
#12楼  2008-06-18 15:44 化石 [未注册用户]
我觉得第一个招数和您所谓的提升用户体验相背,会导致无法使用键盘操作。
  回复  引用    
#13楼 [楼主] 2008-06-18 15:50 艺林      
@化石
这个倒还真是,没考虑到啊,谢谢!

  回复  引用  查看    
#14楼  2008-06-18 17:27 TT.Net      
第一招感觉很鸡肋
第二招实用性不错
  回复  引用  查看    
#15楼  2008-06-18 18:14 Q.Lee.lulu      
支持!!
顶一个!!
  回复  引用  查看    
#16楼  2008-06-18 21:06 debugger      
支持 放的有点少 哈哈
  回复  引用  查看    
#17楼  2008-06-18 22:31 心有灵犀      
提个建议把,第二个做成插件更棒
  回复  引用  查看    
第一个的效率太低了。还是建议直接在a的onclikc事件里面onblur好了。
  回复  引用    

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2008-07-24 18:43 编辑过


相关链接: