easyUI1.7学习第一天_menu表单

easyUI1.7学习第一天

1.menu表单

菜单（Menu）通常用于上下文菜单。它是创建其他菜单组件（比如：menubutton、splitbutton）的基础组件。它也能用于导航和执行命令。

图片展示

代码实现
创建菜单（Menu）
通过标记创建菜单（menu）应该添加 ‘easyui-menu’ class 到 <div> 标记。每个菜单项（menu item）通过\ <div> 标记创建。我们可以添加 ‘iconCls’ 属性到菜单项（menu item），以定义一个显示在菜单项（menu item）左边的图标。添加 ‘menu-sep’ class 到菜单项（menu item）将产生一个菜单（menu）分隔符。

<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）并侦听 ‘onClick’ 事件。

$('#mm').menu({
    onClick:function(item){
		//...
    }
});

显示菜单（Menu）

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

---

要添加右键点击事件，js代码如下
$(selector)是jquery的选择器,用于选中一个或一组页面元素(HTML DOM),并返回jquery对象
document就是HTML DOM Document 对象,对应整个html文档,
$(document)就是对document的jquery操作
最常用的是$(document).ready(function(){}),即绑定文档加载完毕后事件
而$(document).bind(‘contextmenu’,function(){})是绑定右键菜单事件

<script>
		$(function(){
			$(document).bind('contextmenu',function(e){
				e.preventDefault();
				$('#mm').menu('show', {
					left: e.pageX,
					top: e.pageY
				});
			});
		});
</script>

最后添加一点：
<div class=“menu-sep”></div>这个是意思是加上一条横线

2.菜单按钮 menubutton

菜单按钮（menubutton）是下拉菜单的一部分。它与链接按钮（linkbutton）及菜单（menu）有关。显示链接按钮（linkbutton），隐藏菜单（menu）。当用户点击或移动鼠标到链接按钮（linkbutton）上时，将显示菜单（menu）以允许用户点击菜单。

图片展示

代码实现
html

<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>

js

<a href="javascript:void(0)" id="mb">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>
	
	<script type="text/javascript">
			$(function(){
				$('#mb').menubutton({
					iconCls: 'icon-edit',
					menu: '#mm'
				});
			});
	</script>

3.分割按钮 splitbutton

与菜单按钮（menubutton）相似，分割按钮（splitbutton）也与链接按钮（linkbutton）及菜单（menu）有关。与菜单按钮（menubutton）不同的是，分割按钮（splitbutton）被分割为两部分。当移动鼠标到分割按钮（splitbutton）上时，将显示一条分割线。只有当移动鼠标在分割按钮的右侧部分时才显示菜单（menu）。

图片展示

代码实现

html

<a href="javascript:void(0)" id="sb" class="easyui-splitbutton"
    data-options="menu:'#mm',iconCls:'icon-ok'" onclick="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>

js

<a href="javascript:void(0)" id="sb" onclick="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>

		<script>
			$(function() {
				$('#sb').splitbutton({
					iconCls: 'icon-ok',
					menu: '#mm'
				});

			});
		</script>

属性

方法

4. 链接按钮 Linkbutton

链接按钮（linkbutton）用于创建一个超链接按钮。它是一个正常的 <a> 标记的表示。它可显示图标和文本，或者仅仅显示图标和文本中的一个。按钮宽度可动态收缩/扩展以适应其文本标签。

图片展示

代码实现

html

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

js

<a id="btn" href="#">easyui</a>
<script>
$(function(){
$('#btn').linkbutton({
    iconCls: 'icon-search'
});
});
</script>

属性

方法

5.侧栏菜单 Sidemenu

代码实现

html

  <div id="sm" data-toggle="topjui-sidemenu" data-options="data:data">
               </div>

js

<div style="margin:20px 0;">
		<a href="javascript:;" class="easyui-linkbutton" onclick="toggle()">Toggle</a>
	</div>
	<div id="sm" class="easyui-sidemenu" data-options="data:data"></div>
	<script type="text/javascript">
		var data = [{
	        text: 'Item1',
	        iconCls: 'icon-sum',
	        state: 'open',
	        children: [{
	            text: 'Option1'
	        },{
	            text: 'Option2'
	        },{
	            text: 'Option3',
	            children: [{
	                text: 'Option31'
	            },{
	                text: 'Option32'
	            }]
	        }]
	    },{
	        text: 'Item2',
	        iconCls: 'icon-more',
	        children: [{
	            text: 'Option4'
	        },{
	            text: 'Option5'
	        },{
	            text: 'Option6'
	        }]
	    }];

		function toggle(){
			var opts = $('#sm').sidemenu('options');
			$('#sm').sidemenu(opts.collapsed ? 'expand' : 'collapse');
			opts = $('#sm').sidemenu('options');
			$('#sm').sidemenu('resize', {
				width: opts.collapsed ? 60 : 200
			})
		}
	</script>

属性

方法

6.开关按钮 Switchbutton

用在"form"表单中的开关按钮。按钮有2个状态：“开”和“关”，用户可以点击或轻敲来切换，标签状态是可定制的。（该组件自1.4.3版开始可用）

图片展示

代码实现

html

 <input class="easyui-switchbutton" checked>
                    <input class="easyui-switchbutton" data-options="onText:'Yes',offText:'No'">

至此，easyUI的menu（菜单）和button（按钮）已初步学习完。