为了账号安全,请及时绑定邮箱和手机立即绑定

前端框架 jQuery EasyUi 学习笔记三(三种window窗口)

<!-- 直接通过标签创建

单一窗口
<div id="win" class="easyui-window" title="My Window"
    style="width:600px;height:400px"   
        data-options="iconCls:'icon-save',modal:true">   
    Window Content    
</div> 

<!--

复合窗口

,如何将窗体分为两部分:北部和中间。西方的习惯是上北North 下南south左西west右东east。当然我们中国的习惯是right,left,head,foot。
-->

<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"   
        data-options="iconCls:'icon-save',modal:true">   
    <div class="easyui-layout" data-options="fit:true">   
        <div data-options="region:'north',split:true" style="height:100px"></div>   
        <div data-options="region:'center'">   
            The Content.    
        </div>   
    </div>   
</div>

<!--

登录窗口
<div id="win" class="easyui-window" title="Login" style="width:300px;height:180px;">
<form style="padding:10px 20px 10px 40px;">
<p>Name: <input type="text"></p>
<p>Pass: <input type="password"></p>
<div style="padding:5px;text-align:center;">
<a href="#" class="easyui-linkbutton" icon="icon-ok">Ok</a>
<a href="#" class="easyui-linkbutton" icon="icon-cancel">Cancel</a>
</div>
</form>
</div> 

三个窗口的效果图如下图:

图片描述
窗口的一些动作
打开和关闭窗口。

$('#win').window('open');  // open a window    
$('#win').window('close');  // close a window

再次声明。代码API中都有,或许不同版本的api会有出入。我们需要的只是复制粘贴,并对其中的数据大小进行修改就行。也可以自己加入一些图片,这些修改都是开放式的。

也可也通过下面窗口的属性的增减对窗口进行修改。这些都无需记忆,用到的时候翻看api帮助文档就可以了。

图片描述

点击查看更多内容
3人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消