Print Page - Panel custom tools : how to add tool tip and toggle icon?

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>

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>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Aod47 on October 06, 2019, 06:46:55 PM