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>

 

 

posted on 2010-07-10 11:32  senly  阅读(8607)  评论(6编辑  收藏  举报

导航