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錯誤還會讓頁面樣式亂掉。

最后效果如下圖：