jquery easyui,简单菜单的使用 (一)
我们先来看看效果如何?
通过简单的学习,我发现必须注意如下几点:
注意: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 id="mymenu" style="width: 120px;" class="easyui-menu">
<div icon="icon-ok">
文件
<div style="width: 150px;">
<div>
新建项目
</div>
<div>
新建网站
</div>
</div>
</div>
<div class="menu-sep">
</div>
<div icon="icon-edit">
编辑</div>
<div class="menu-sep">
</div>
<div icon="icon-redo">
视图</div>
<div class="menu-sep">
</div>
<div>
网站</div>
</div>
<p style="width: 500px; border: 1px solid #ccc; font-size: 12px; text-indent: 27px;
line-height: 18px; padding: 5px;">
<font color="red">注意:</font>1.class="easyui-menu"这个必须有,据我猜测,他就是控制菜单的背景样式,但是我查看css却没有这个,很是奇怪,希望知道的朋友们告诉我一下,在此表示感谢。如果不引用这个样式无法达到菜单效果,一开始学习这个控件的时候没有找到原因,还以为自己代码写错了,查来查去就是不知道什么地方写的不对,只好看他们的例子,最终知道是这个原因。
<br />
2.icon很明显的就是图标的意思,在这里就是设置图标的样式。自己老是忘记icon这个属性,结果自己每次都把类似的icon="icon-edit"写成class="icon-edit"。我发现样式照样能够显示的很好,真是不知道为什么?
<br />3.看来名称外面必须使用div标签,其他标签测试了许多个都是无效的。
<br />
</p>
</body>
</html>