easyui学习笔记4—panel的实现

这篇看看easyui是怎么实现panel的，就是类似一个容器，里面可以装具体内容或者其他的easyui控件。

1.这里先看看引用的资源文件

    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/demo/demo.css" />
    <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>

看到这里并没有引用一个类似panel.js的文件，看来D:\Serious\phpdev\easyui\jquery-easyui-1.3.5\plugins这个目录下放置的文件并不是按功能来区分的哦，还是因为这个控件比较简单所以没有单独的放在一个文件里面么？

2.看看html代码都有什么新的特性

    <div>
        <div class="demo-tip icon-tip"></div>
        <div>The panel is container for other components or elements</div>
        <div style="margin:10px 0;">
            <a class="easyui-linkbutton" href="javascript:void(0);" onclick="javascript:$('#p').panel('open')">Open</a>
            <a class="easyui-linkbutton" href="javascript:void(0);" onclick="javascript:$('#p').panel('close')">Close</a>
            <a class="easyui-linkbutton" href="javascript:void(0);" onclick="javascript:$('#p').panel('expand',true)">Expand</a>
            <a class="easyui-linkbutton" href="javascript:void(0);" onclick="javascript:$('#p').panel('collapse',true)">Collapse</a>
        </div>
        <div style="height:350px;border:1px solid #ccc">
            <div id="p" class="easyui-panel" title="Basic Panel" style="width:500px;height:200px;padding:10px;" data-options="iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true">
                <p style="font-size:14px;">jQuery EasyUI framework helps you build your web pages easily</p>
                <ul>
                    <li>easyui is a collection of user-interface plugin based on jQuery.</li>
                    <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
                    <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
                    <li>complete framework for HTML5 web page.</li>
                    <li>easyui save your time and scales while developing your products.</li>
                    <li>easyui is very easy but powerful.</li>
                </ul>
            </div>
        </div>
    </div>

　　注意那4个超链接不属于panel，只是用来外部控制的。看字面意思就应该能够猜出什么功能了，$('#p').panel('open')这句貌似就是讲id=p的元素作为一个opanel并且打开它，$('#p').panel('close')这个是关闭它，$('#p').panel('expand',true)这个是展开它，这一这里有两个参数了，$('#p').panel('collapse',true)这个就是收缩它。

　　下面首先定义了一个div，在这个div里面嵌套了一个div，这里class="easyui-panel"貌似就是把它当成一个panel控件，下面这个特性就比较长了
data-options="iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true"
　　iconCls:'icon-save'：指定它的图标是类似word里面的保存按钮图标
　　collapsible:true：指定可以收缩
　　minimizable:true：指定可以最小化
　　maximizable:true:指定可以最大化
　　closable:true：指定可以关闭

这些都比较容易理解了，但是我遇到一个比较小巧的问题data-options="iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true;"这样写就会报错了，报错内容如下：

SyntaxError: missing } after property list

apsible:true,minimizable:true,maximizable:true,closable:true;}

意思是后面少个}，其实是多了个“;”，写js的时候很自然地在最后一句上价格分号，到这里是不行的，不能加分号了，不仅会报js错误还会让页面样式乱掉。

最后效果如下图：