将超链接变成漂亮按钮的jQuery插件

在网页中使用<a href="#">内容</a>之类的超链接很多，利用LinkButton jQuery Plugin就能将其变成漂亮的按钮外观，只需加入class="l-btn"就行了。

项目地址：http://www.etmvc.cn/project/show/58

 

 

使用范例：

		<a id="add" href="#" class="l-btn" icon="icon-add">增加</a>
		<a href="#" class="l-btn" icon="icon-remove">移除</a>
		<a href="#" class="l-btn" icon="icon-save">保存</a>
		<a href="#" disabled="true" class="l-btn" icon="icon-cut">剪切</a>
		<a href="#" class="l-btn" onclick="javascript:alert('ttt')">文本按键</a>

禁用及启用按钮示例：

$('#add').linkbutton({disabled:true});   // 禁用
$('#add').linkbutton({disabled:false});   // 启用

评论

3 楼 stworthy 2009-12-24  

可以修改linkbutton.css，把其他的背景图片更换就好了。

2 楼 zhongxuchen 2009-12-24  

能不能将背景图片改成非圆角的，参看一下jquery漂亮的button
http://www.iteye.com/topic/422278 这个效果感觉更漂亮一些，你的这种方式非常好，当然采用两种方式供选择就更好了

1 楼 stworthy 2009-09-22  

<p>更新了一下程序，让其同时具有平面按钮效果。只需再加个'l-btn-plain'就行了：</p>
<pre name="code" class="html"> &lt;div style="height:30px;padding:5px;background:#efefef;"&gt;
&lt;a href="#" class="l-btn l-btn-plain" icon="icon-cancel"&gt;取消&lt;/a&gt;
&lt;a href="#" class="l-btn l-btn-plain" icon="icon-reload"&gt;刷新&lt;/a&gt;
&lt;a href="#" class="l-btn l-btn-plain" icon="icon-search"&gt;查询&lt;/a&gt;
&lt;a href="#" class="l-btn l-btn-plain"&gt;文本按键&lt;/a&gt;
&lt;a href="#" class="l-btn l-btn-plain" icon="icon-print"&gt;打印&lt;/a&gt;
&lt;/div&gt;
</pre>
<p>效果图如下：</p>
<p><img src="http://www.etmvc.cn/article/showImage/128" alt="" width="331" height="44"></p>
<p> </p>
<p> </p>