前端CSS框架 前端CSS框架 上机4-调整大小+窗口.docx

实验4 实验题目：easyui 基础工具类组件 实验原理：基础工具、方法、事件 实验内容： 1、resizable（调整大小） （1）、属性： 练习1：随便的拖拽或者改变我的大小吧！ Html： div class=easyui-panel easyui-resizable easyui-draggable 随便的拖拽或者改变我的大小吧！ /div Js： 效果： （2）、方法 （3）事件 2、window（窗口） 基于panel，窗口具备了头部标题及折叠、最大化、最小化、关闭等功能； 基于draggable，窗口具备了拖动功能； 基于resizable，窗口具备了可改变大小的功能； 例1：（书上）简单举例 Html： div id=w class=easyui-window/div 让窗口只能在父容器里拖动 div id=p class=easyui-panel title=这是父面板容器 style=width:300px;height:200px;position:relative; div id=w class=easyui-window/div /div 例2：window和layout的结合（李） Html： 练习2：请创建如下的内容 作业3：创建一个登录的窗口 3、Dialog 对话框 对话框扩展自窗口，只是在窗口上加了一些定制（右上角只保留了一个关闭按钮；可以在窗口顶部增加工具栏（toolbar属性），在窗口底部增加按钮栏（buttons属性）） 作业4：以数组的方式创建对话框的工具栏和按钮栏 div id=d class=easyui-dialog/div 以选择器的方式： 4、progressbar（进度条） 作业5：制作一个简单进度条 div id=p class=easyui-progressbar/div 作业6：制作一个动态的增加数字的进度条，数字从1增加到100 button style=margin-top: 20px onclick=start()点击此处试试/button 或者让数字随机个位数增加 事件： 在进度值更改时触发onchange事件，同时弹出新旧值 5、slider（滑动条） 作业7：制作如下滑动条 div id=s class=easyui-slider/div 作业8：拖动滑块改变字体大小 div id=s class=easyui-slider/div div id=ff style=margin-top:50px;font-size:20px我是最棒的/div