2.菜单和按钮-easyUi

最新推荐文章于 2023-09-08 12:07:08 发布

启福铭远

最新推荐文章于 2023-09-08 12:07:08 发布

阅读量613

点赞数

分类专栏： Jquery/EasyUi/Bootstrap

本文链接：https://blog.csdn.net/wangwei249/article/details/51578296

版权

Jquery/EasyUi/Bootstrap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一。菜单-menu

1. 使用HTML标签创建菜单必须对<div>标签引用'easyui-menu'类，每个菜单项都将使用<div>标签创建。
为菜单添加'iconCls'属性可以指定一个显示在菜单项左侧的图标。对菜单引用'menu-sep'类将生成一条菜单分隔线。

  <body οnlοad="showMenu();"> 
  <div id="mm" class="easyui-menu" style="width:120px;">  
    <div>New</div>  
    <div>  
        <span>Open</span>  
        <div style="width:150px;">  
            <div><b>Word</b></div>  
            <div>Excel</div>  
            <div>PowerPoint</div>  
        </div>  
    </div>  
    <div data-options="iconCls:'icon-save'">Save</div>  
    <div class="menu-sep"></div>  
    <div>Exit</div>  
  </div>

*menu是默认隐藏的，可以使用脚本让其显示，添加点击动作等

  function showMenu() {
    $('#mm').menu({
        onClick: function(item) {
            alert("ok");
        }
    });

    $('#mm').menu('show', {
        left: 200,
        top: 100
  });

2. 链接按钮 - LinkButton

   <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>

使用编程的方式创建：

   <a id="btn2" href="#">easyui</a> 
   <script>
     $('#btn2').linkbutton({   
	iconCls: 'icon-save'  
     });
   <span style="font-family: Arial, Helvetica, sans-serif;"></script></span>

<span style="font-family: Arial, Helvetica, sans-serif;">
</span>

* 链接按钮用于创建超链接按钮。它是表示正常的<a>标记。它可以显示图标和文字，或只图标或文字。该按钮的宽度可以动态收缩/展开，以适应其文本标签。
* 仍然可以给a添加onclick事件，使其执行需要的js函数

   <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'"   οnclick="javascript:alert('easyui')">easyui</a>

* 或者使用js动态绑定onclick事件：

   <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>   
   <script>
	  $(function(){   
		 $('#btn').bind('click', function(){   
		      alert('easyui');   
		 });   
	  });  
   </script>

3. 菜单按钮 - MenuButton
菜单按钮的是下拉菜单的一部分，由一个链接按钮和菜单组成。这个链接菜单默认将隐藏显示在菜单内。
当用户单击或鼠标移动到链接按钮，菜单将显示允许点击它。

   <a href="javascript:void(0)" id="mb" class="easyui-menubutton"    
        data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a>
	
   <div id="mm" style="width:150px;">  
	    <div data-options="iconCls:'icon-undo'">Undo</div>  
	    <div data-options="iconCls:'icon-redo'">Redo</div>  
	    <div class="menu-sep"></div>  
	    <div>Cut</div>  
	    <div>Copy</div>  
	    <div>Paste</div>  
	    <div class="menu-sep"></div>  
	    <div data-options="iconCls:'icon-remove'">Delete</div>  
	    <div>Select All</div>  
   </div>

* MenuButton 是依赖与menu的，只是点击它是出来menu,也可以不必在a中指定，使用js创建：

   <script>
	 function createMenuButton(){
		$('#mb').menubutton({   
			iconCls: 'icon-edit',   
			menu: '#mm'  
		}); 
	 } 
   </script>

4. 分隔按钮 - SplitButton

   <a href="javascript:void(0)" id="sb" class="easyui-splitbutton"  
		data-options="menu:'#mm',iconCls:'icon-ok'" οnclick="javascript:alert('ok')">Ok</a>  
   <div id="mm" style="width:100px;">  
	    <div data-options="iconCls:'icon-ok'">Ok</div>  
	    <div data-options="iconCls:'icon-cancel'">Cancel</div>  
   </div>

* 跟menu很像，不同的是连接按钮上有个竖分割线，鼠标必须放在分割线右侧的小三角上才会出现下拉菜单
* 同样可以用js动态创建：

   <script>
	   $('#mb').menubutton({   
		 iconCls: 'icon-edit',   
		 menu: '#mm'  
	   });  
   </script>

启福铭远

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.菜单和按钮-easyUi

一。菜单-menu1. 使用HTML标签创建菜单必须对标签引用'easyui-menu'类，每个菜单项都将使用标签创建。为菜单添加'iconCls'属性可以指定一个显示在菜单项左侧的图标。对菜单引用'menu-sep'类将生成一条菜单分隔线。 New Open
复制链接

扫一扫