Jquery EasyUI 自定义面板右上角的功能（3）

来源：互联网发布：淘宝客流量过大编辑：程序博客网时间：2024/06/05 19:31

我们可以对面板的右上角功能按钮进行自定义。

如图：

代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" type="text/css" href="easyUI/themes/default/easyui.css">    <link rel="stylesheet" type="text/css" href="easyUI/themes/icon.css">    <link rel="stylesheet" type="text/css" href="easyUI/demo/demo.css">    <script type="text/javascript" src="easyUI/jquery.min.js"></script>    <script type="text/javascript" src="easyUI/jquery.easyui.min.js"></script></head><body><h2>Custom Panel Tools</h2><p>Click the right top buttons to perform actions with panel.</p><div style="margin:20px 0 10px 0;"></div><div class="easyui-panel" title="Custom Panel Tools" style="width:700px;height:200px;padding:10px;"     data-options="iconCls:'icon-save',closable:true,tools:'#tt'">    <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>    <ul>        <li>easyui is a collection of user-interface plugin based on jQuery.</li>        <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>        <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>        <li>complete framework for HTML5 web page.</li>        <li>easyui save your time and scales while developing your products.</li>        <li>easyui is very easy but powerful.</li>    </ul></div><div id="tt">    <a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a>    <a href="javascript:void(0)" class="icon-edit" onclick="javascript:alert('edit')"></a>    <a href="javascript:void(0)" class="icon-cut" onclick="javascript:alert('cut')"></a>    <a href="javascript:void(0)" class="icon-help" onclick="javascript:alert('help')"></a></div></body></html>

代码中tools:'#tt'，在id="tt"的div中，我们创建了四个a标签，每个a标签的class设定了它的样式，我们可以在onclick=“”中自定义javascript函数。这样就可以实现自定义面板右上角的功能了。

阅读全文

0 0