前端CSS框架 前端CSS框架 上机5-提示+信息框+日历.docx

实验5 实验题目：easyui 基础工具类组件 实验原理：基础工具、方法、事件 实验内容： 1、tooltip（提示框） （1）、属性： （2）、方法 （3）事件 练习1：鼠标移入超链接显示提示内容 Html： a href=### id=boxHover Me/a Js： 练习2：在提示框中显示其它指定内容 a href=# id=tt鼠标移到我身上试试？/a div style=display:none div id=toolbar a href=# class=easyui-linkbutton easyui-tooltip title=增加 data-options=iconCls:icon-add,plain:true/a a href=# class=easyui-linkbutton easyui-tooltip title=剪切 data-options=iconCls:icon-cut,plain:true/a a href=# class=easyui-linkbutton easyui-tooltip title=移除 data-options=iconCls:icon-remove,plain:true/a a href=# class=easyui-linkbutton easyui-tooltip title=取消 data-options=iconCls:icon-undo,plain:true/a a href=# class=easyui-linkbutton easyui-tooltip title=重做 data-options=iconCls:icon-redo,plain:true/a /div /div 练习3：修改提示框显示样式 HTML： div style=padding:10px 200px div id=pp1 class=easyui-panel style=width:100px;padding:5pxHover Me/div /div div style=padding:10px 200px div id=pp2 class=easyui-panel style=width:100px;padding:5pxHover Me/div /div Js: 2、messager（消息框） 消息框 警告框 确认框 输入确认框 进度消息框 作业4：创建一个输入确认框（prompt） 作业5：创建一个确认框（confirm） 这里想修改确认框的宽度， 默认值在chrome执行?$.messager.defaults?可以看到，重新设置属性覆盖默认值 作业6：创建一个警告框（alert） 作业7：创建一个消息框5秒后自动关闭（show） 作业8：创建一个进度条，5秒后自动关闭（progress） 3、calendar（日历） 作业9：显示一个日历 div id=c/div weekNumberHeader：自定义返回的周别值 styler属性：用于设置日期的显示样式，且只能返回样式 formatter属性：格式化日期显示内容，必须返回日期值，会覆盖styler validator属性:日期选择验证器，如果不是当前日期还必须用moveTo方法将日历移动到指定的日期才能看到效果 作业10：设置日历的周别、日期样式为周一显示蓝色，并设置只有周一才能选择。选择日期时，弹出提示信息(onSelect)。 附加作业：文本框获取焦点时显示日历，将你选择的日期显示在文本框中，同时隐藏日历控件 获取焦点时： 选择日期后 作业11：日历实例拓展：通过两个随机生成的日期数字，在日历中找到与之对应的日期，设定不一样的效果