创建各式各样常见的LinkButton

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

效果图：

下面是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 plaincopyprint?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
  5. <title>linkButton</title>
  6. <linkrel="stylesheet"type="text/css"href="themes/default/easyui.css">
  7. <linkrel="stylesheet"type="text/css"href="themes/icon.css">
  8. <scripttype="text/javascript"src="jquery-1.8.0.min.js"></script>
  9. <scripttype="text/javascript"src="jquery.easyui.min.js"></script>
  10. </head>
  12. <body>
  13. <divstyle="padding:5px;background:#fafafa;width:500px;border:1px solid #ccc">
  14. <a href="#"class="easyui-linkbutton"iconCls="icon-cancel">Cancel</a>
  15. <ahref="#"class="easyui-linkbutton"iconCls="icon-reload">Refresh</a>
  16. <a href="#"class="easyui-linkbutton"iconCls="icon-search">Query</a>
  17. <ahref="#"class="easyui-linkbutton">text button</a>
  18. <a href="#"class="easyui-linkbutton"iconCls="icon-print">Print</a>
  19. </div>
  21. <divstyle="padding:5px;background:#fafafa;width:500px;border:1px solid #ccc">
  22. <a href="#"class="easyui-linkbutton"plain="true"iconCls="icon-cancel">Cancel</a>
  23. <ahref="#"class="easyui-linkbutton"plain="true"iconCls="icon-reload">Refresh</a>
  24. <a href="#"class="easyui-linkbutton"plain="true"iconCls="icon-search">Query</a>
  25. <ahref="#"class="easyui-linkbutton"plain="true">text button</a>
  26. <a href="#"class="easyui-linkbutton"plain="true"iconCls="icon-print">Print</a>
  27. <ahref="#"class="easyui-linkbutton"plain="true"iconCls="icon-help"></a>
  28. <a href="#"class="easyui-linkbutton"plain="true"iconCls="icon-save"></a>
  29. <ahref="#"class="easyui-linkbutton"plain="true"iconCls="icon-back"></a>
  30. </div>
  31. </body>
  32. </html>

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

posted @ 2013-05-11 18:37  yangkai_keven  阅读(487)  评论(0)  编辑  收藏  举报