easyui学习笔记4—panel的实现

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

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

easyui学习笔记4—panel的实现
    <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>
easyui学习笔记4—panel的实现

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

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

easyui学习笔记4—panel的实现
    <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>
easyui学习笔记4—panel的实现

  注意那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错误还会让页面样式乱掉。

最后效果如下图:
easyui学习笔记4—panel的实现

easyui学习笔记4—panel的实现

上一篇:Photoshop打造柔美的暖色美女图片方法


下一篇:用户操作界面