jQuery EasyUI 菜单与按钮 - 创建简单的菜单
jQuery EasyUI 菜单与按钮 - 创建简单的菜单
介绍
EasyUI是一种基于jQuery的开源Javascript框架,提供了丰富多样的组件和UI效果,且易于学习和使用。其中菜单和按钮是常用的UI组件,可用于创建导航栏和操作按钮等。
本文介绍如何使用EasyUI创建简单的菜单和按钮,并提供相关的代码示例。
创建菜单
要创建一个菜单,需要使用EasyUI提供的menu组件。以下是创建一个简单的菜单的步骤:
步骤1 - 引入EasyUI库和CSS
首先,在页面的head标签中引入EasyUI的jQuery、EasyUI库和EasyUI的CSS文件,例如:
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
步骤2 - 创建HTML代码
在页面的body标签中,添加以下HTML代码来定义菜单的容器和菜单项:
<div id="mm" class="easyui-menu" style="width:120px;">
<div data-options="iconCls:'icon-save'">保存</div>
<div data-options="iconCls:'icon-cut'">剪切</div>
<div data-options="iconCls:'icon-copy'">复制</div>
<div data-options="iconCls:'icon-paste'">粘贴</div>
<div class="menu-sep"></div>
<div>其他操作</div>
<div>其他操作</div>
</div>
这里定义了一个ID为mm的div元素,并将其设置为菜单容器。其中,数据选项(data-options)可以设置菜单项的样式和其他属性,如图标。
步骤3 - 初始化菜单
通过JavaScript代码,使用EasyUI的menu组件来初始化菜单:
$('#mm').menu();
至此,一个简单的菜单已经创建完成!
创建按钮
要创建一个按钮,需要使用EasyUI提供的linkbutton组件。以下是创建一个带有点击事件的按钮的步骤:
步骤1 - 引入EasyUI库和CSS
和创建菜单一样,首先在页面的head标签中引入EasyUI的jQuery、EasyUI库和EasyUI的CSS文件。
步骤2 - 创建HTML代码
在页面的body标签中,添加以下HTML代码来定义按钮:
<a href="#" class="easyui-linkbutton" id="btn" data-options="iconCls:'icon-add'">添加</a>
这里定义了一个ID为btn的a标签,并将其设置为按钮。数据选项(data-options)可以设置按钮的样式和其他属性,如图标。
步骤3 - 添加点击事件
通过JavaScript代码,使用EasyUI的linkbutton组件来初始化并添加点击事件:
$('#btn').linkbutton({
onClick: function(){
// 执行点击事件的操作
}
});
至此,一个带有点击事件的按钮已经创建完成!
总结
通过使用EasyUI的menu和linkbutton组件,创建菜单和按钮变得非常简单。使用这两种组件可以构建出各种UI界面,提高用户体验和页面的交互性。