必优博客

制作个性化的按钮并不只限于button元素， jQuery插件fancyButton可以实现对<a>或<input>等元素制作成具有个性化的按钮效果，其实现原理是在<a>或<input>元素外包裹一层元素，使用非常简单，只需要定制个性化的按钮CSS样式，效果图如下：

使用说明
需要使用jQuery库文件和fancyButton库文件
需要自定义个性化按钮的CSS样式，可参考如下：
必优推荐级别：★★★

使用实例
一，包含文件部分

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

二，HTML部分

1. <a class="fancybutton green" href="http://www.google.com">This will link to google because we can!</a>

如上实例，就实现了一个个性化的链接按钮效果，实现还是非常简单的。

jQuery插件fancyButton具体的JS代码[下载]如上：

1. jQuery.fn.fancyButton = function(settings) {
2. // settings
3. settings = jQuery.extend({
4. className: 'txtbutton'
5. }, settings);
6. jQuery(this).find("."+settings["className"]).each(function() {
7. // preappend the object with a span, append it with a span
8. try {
9. var classes = jQuery(this).removeClass(settings["className"]).attr("class");
10. if (classes == undefined) {
11. classes = "";
12. }
13. jQuery(this).addClass(settings["className"]);
14. jQuery("<span class=\"button "+classes+"\"><\/span>").insertBefore(jQuery(this));
15. jQuery(this).prev().append("<span class=\"buttonleft\">&nbsp;<\/span>");
16. jQuery(this).prev().append(jQuery(this));
17. // width fix for firefox
18. jQuery(this).css("width", jQuery(this).css("width"));
19. jQuery(this).parent().append("<span class=\"buttonright\">&nbsp;<\/span>");
20. if (jQuery(this).parent().find("a").attr("href").indexOf("javascript:") == -1) {
21. jQuery(this).parent().click(function() {
22. document.location.href = jQuery(this).parent().find("a").attr("href");
23. });
24. }
25. } catch (e) {
26. if (window.console) console.error(e);
27. }
28. });
29. // return the element
30. return jQuery(this);
31. };

点我下载jQuery插件fancyButton源程序
http://jquerycodes.googlecode.com/files/jquery.fancyButton.rar