一般来说，按钮使用button标签创建，Link Button却是使用a标签创建。

效果图：

创建各式各样常见的LinkButton_html

下面是Link Button按钮的演示效果：

​​http://www.jeasyui.com/tutorial/mb/linkbutton_demo.html​​

创建Link Button，只需要将一个class属性值为“easyui-lingkbutton”的样式添加到a标签中。下面我们演示如何将a标签变成按钮，首先在web目录下创建buttonDemo文件夹，在文件夹下创建buttonDemo.html。linkButtonDemo.html代码如下：


[html] ​​ view plain​​​​copy​​​​print​​​​?​​


  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <htmlxmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
  6. <title>linkButton</title>
  7. <linkrel="stylesheet"type="text/css"href="themes/default/easyui.css">
  8. <linkrel="stylesheet"type="text/css"href="themes/icon.css">
  9. <scripttype="text/javascript"src="jquery-1.8.0.min.js"></script>
  10. <scripttype="text/javascript"src="jquery.easyui.min.js"></script>
  11. </head>

  13. <body>
  14. <divstyle="padding:5px;background:#fafafa;width:500px;border:1px solid #ccc">
  15. <a href="#"class="easyui-linkbutton"iconCls="icon-cancel">Cancel</a>
  16. <ahref="#"class="easyui-linkbutton"iconCls="icon-reload">Refresh</a>
  17. <a href="#"class="easyui-linkbutton"iconCls="icon-search">Query</a>
  18. <ahref="#"class="easyui-linkbutton">text button</a>
  19. <a href="#"class="easyui-linkbutton"iconCls="icon-print">Print</a>
  20. </div>

  22. <divstyle="padding:5px;background:#fafafa;width:500px;border:1px solid #ccc">
  23. <a href="#"class="easyui-linkbutton"plain="true"iconCls="icon-cancel">Cancel</a>
  24. <ahref="#"class="easyui-linkbutton"plain="true"iconCls="icon-reload">Refresh</a>
  25. <a href="#"class="easyui-linkbutton"plain="true"iconCls="icon-search">Query</a>
  26. <ahref="#"class="easyui-linkbutton"plain="true">text button</a>
  27. <a href="#"class="easyui-linkbutton"plain="true"iconCls="icon-print">Print</a>
  28. <ahref="#"class="easyui-linkbutton"plain="true"iconCls="icon-help"></a>
  29. <a href="#"class="easyui-linkbutton"plain="true"iconCls="icon-save"></a>
  30. <ahref="#"class="easyui-linkbutton"plain="true"iconCls="icon-back"></a>
  31. </div>
  32. </body>
  33. </html> 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>linkButton</title> <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <script type="text/javascript" src="jquery-1.8.0.min.js"></script> <script type="text/javascript" src="jquery.easyui.min.js"></script> </head>  <body> <div style="padding:5px;background:#fafafa;width:500px;border:1px solid #ccc">       <a href="#" class="easyui-linkbutton" iconCls="icon-cancel">Cancel</a>       <a href="#" class="easyui-linkbutton" iconCls="icon-reload">Refresh</a>       <a href="#" class="easyui-linkbutton" iconCls="icon-search">Query</a>       <a href="#" class="easyui-linkbutton">text button</a>       <a href="#" class="easyui-linkbutton" iconCls="icon-print">Print</a>   </div>       <div style="padding:5px;background:#fafafa;width:500px;border:1px solid #ccc">       <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-cancel">Cancel</a>       <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-reload">Refresh</a>       <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search">Query</a>       <a href="#" class="easyui-linkbutton" plain="true">text button</a>       <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-print">Print</a>       <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help"></a>       <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>       <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-back"></a>   </div> </body> </html>

注意：不要忘了将引入的文件放入buttonDemo文件夹，和前面的程序相比，引入文件新增加了：<link rel="stylesheet" type="text/css"href="themes/icon.css">。这行代码表示允许我们使用小图标。iconCls属性表示引用不同的图标。