- 1、本文档共22页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
实验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:日历实例拓展:通过两个随机生成的日期数字,在日历中找到与之对应的日期,设定不一样的效果
您可能关注的文档
- 平面广告设计(中级) 平面广告设计(中级) 新鲜世界,品牌也需要新玩法.docx
- 平遥推光漆器髹饰技艺 调研报告 百工录:平遥推光漆器消费者问卷调研结果.docx
- 普通地图编制 道路编绘 技能训练 道路编绘.doc
- 普通地图编制 地貌符号编绘 技能训练 地貌符号编绘.doc
- 普通地图编制 地图符号应用 技能训练 地图符号应用.doc
- 普通地图编制 沟渠编绘 技能训练 沟渠编绘.doc
- 普通地图编制 基于矢量文件影像校正 技能训练 基于矢量文件法影像校正.doc
- 其他金属材料成型技术 粉末冶金生产设备简介 粉末冶金生产设备简介.doc
- 其他金属材料成型技术 拉深件坯料展开尺寸计算 拉深件坯料尺寸计算.doc
- 其他金属材料成型技术 拉深生产过程分析 拉深生产过程分析.doc
文档评论(0)