Foxtable(狐表)用户栏目Web开发 → 每天进步一点(191010):神奇的panel面板,可直接测试!


  共有118人关注过本帖树形打印复制链接

主题:每天进步一点(191010):神奇的panel面板,可直接测试!

帅哥哟,离线,有人找我吗?
reachtone
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 一级勋章
等级:版主 帖子:1887 积分:16307 威望:0 精华:18 注册:2008/9/2 10:09:00
每天进步一点(191010):神奇的panel面板,可直接测试!  发帖心情 Post By:2019/10/10 9:11:00 [只看该作者]

为帮助大家更加方便的学习web项目开发,即日起争取每天都提供一个小例子供大家直接测试,有问题请直接跟帖留言。

本实例测试地址:
http://www.diyofficecode.com/test/study/191010/test.html     (此地址适合在pc端自行复制代码测试)
http://www.diyofficecode.com/test/study/1910101/test.html   (此地址适合在移动端查看效果)

面板作为一种最常见的容器,可以非常方便的嵌入到页面中的任何位置,且同时提供了折叠、关闭、最大化、最小化等各种行为。如本例,初始打开的页面效果是这样的:

图片点击可在新窗口打开查看此主题相关图片如下:1.png
图片点击可在新窗口打开查看


如果按F12打开浏览器控制台,并将其中的内容复制到console中(建议使用谷歌浏览器):

图片点击可在新窗口打开查看此主题相关图片如下:2.png
图片点击可在新窗口打开查看

那么,回车之后,浏览器就会自动生成一个面板了。而且,这个面板还是可以折叠的!

图片点击可在新窗口打开查看此主题相关图片如下:3.gif
图片点击可在新窗口打开查看

这里的obj就是一个变量名称,它的值是object对象,然后将这个变量作为参数赋给面板组件的panel方法就行了!以下是知识点导读:
1、变量知识,请看攻略第二版101-103页;
2、object对象知识,请看攻略第二版107-108页;
3、panel面板属性知识,请看攻略第二版283-284页。

[此贴子已经被作者于2019/10/10 11:43:24编辑过]

 回到顶部