我们先来看看效果如何?
通过简单的学习,我发现必须注意如下几点:
注意:1.class="easyui-menu"这个必须有,据我猜测,他就是控制菜单的背景样式,但是我查看css却没有这个,很是奇怪,希望知道的朋友们告诉我一下,在此表示感谢。如果不引用这个样式无法达到菜单效果,一开始学习这个控件的时候没有找到原因,还以为自己代码写错了,查来查去就是不知道什么地方写的不对,只好看他们的例子,最终知道是这个原因。
2.icon很明显的就是图标的意思,在这里就是设置图标的样式。自己老是忘记icon这个属性,结果自己每次都把类似的icon="icon-edit"写成class="icon-edit"。我发现样式照样能够显示的很好,真是不知道为什么?
3.看来名称外面必须使用div标签,其他标签测试了许多个都是无效的。
完整代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>创建一个简单的菜单</title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="themes/icon.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js">
</script>
<script type="text/javascript" src="jquery.easyui.min.js">
</script>
<script type="text/javascript">
$(document).ready(
function () {
$('#mymenu').menu('show', {
left: 300,
top: 180
});
}
);
</script>
</head>
<body>
<div 。我发现样式照样能够显示的很好,真是不知道为什么?
<br />3.看来名称外面必须使用div标签,其他标签测试了许多个都是无效的。
<br />
</p>
</body>
</html>