EasyUI Forum
September 23, 2025, 08:58:37 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Panel custom tools : how to add tool tip and toggle icon?  (Read 6113 times)
Aod47
Jr. Member
**
Posts: 85


View Profile
« on: October 06, 2019, 06:46:55 PM »

From documentation. If I create tool by array. Is possible to add tool tip and toggle icon when click on button?
Could you please advice?

« Last Edit: October 06, 2019, 06:55:05 PM by Aod47 » Logged
jarry
Administrator
Hero Member
*****
Posts: 2298


View Profile Email
« Reply #1 on: October 09, 2019, 08:13:29 PM »

Look at this code, set some tool icon's CSS style to get this feature.
Code:
<div id="tt">
<a href="javascript:void(0)" class="icon-add" title="tooltip" onclick="javascript:alert('add')"></a>
</div>
<style type="text/css">
.icon-add{
orphans: 0.6;
}
.icon-add:hover{
opacity: 1.0;
}
</style>
Logged
Aod47
Jr. Member
**
Posts: 85


View Profile
« Reply #2 on: October 09, 2019, 11:04:37 PM »

Thank you sir. But I mean toggle icon when click button.
Finally back to use Div instead array.

Code:
    <div class="easyui-panel" title="Custom Panel Tools" style="width:700px;height:400px;padding:10px;"
            data-options="iconCls:'icon-save',closable:true,tools:'#tt'">
    </div>
    <div id="tt">
        <a id="btnadd" href="javascript:void(0)" class="icon-add" onclick="toggleIcon(this)"></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>
    
    <script type="text/javascript">
        function toggleIcon(obj) {

            var className = obj.className;

            if (~className.indexOf('icon-add')) {
                obj.className = className.replace('icon-add', 'icon-edit');
            } else {
                obj.className = 'icon-add panel-tool-a';
            }
        }
    </script>
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!