Foxtable(狐表) → 用户栏目 → 专家坐堂 → 网页设计如何制作这种折叠效果


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

主题：网页设计如何制作这种折叠效果
帅哥哟，离线，有人找我吗？
rjh4078
 小大  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：狐精 帖子：3361 积分：24802 威望：0 精华：0 注册：2012/3/26 21:47:00 		网页设计如何制作这种折叠效果  发帖心情 Post By：2018/8/27 19:08:00 [只看该作者]


图片点击可在新窗口打开查看此主题相关图片如下：微信图片编辑_20180827190651.jpg
图片点击可在新窗口打开查看

点击箭头可以查看明细
 回到顶部
帅哥，在线噢！
有点蓝
 小大  2楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：超级版主 帖子：110581 积分：562801 威望：0 精华：9 注册：2015/6/24 9:21:00 		  发帖心情 Post By：2018/8/27 21:11:00 [只看该作者]

js文件：test.js

function setDisplay(id){
    var el = document.getElementById(id);
if(el){
if(el.style.display == "none"){
el.style.display = "block"
}
else{
el.style.display = "none"
}
}
}

httprequest事件

Select Case e.Path
    Case "test.htm"
        Dim wb As New weui
        wb.AppendHTML("<script src='test.js'></script>") '引入脚本文件
        wb.AddForm("","form1","./test.htm")
        With wb.AddButtonGroup("form1","btg1",True)  '垂直排列
            .Add("btn1", "按钮1","button").Attribute = "onclick='setDisplay(""div01"")'"
        End With
        wb.InsertHTML("form1","<div id='div01' style='display:none'>按钮1的内容</div>")
        With wb.AddButtonGroup("form1","btg2",True)  '垂直排列
            .Add("btn2", "按钮2","button").Attribute = "onclick='setDisplay(""div02"")'"
        End With
        wb.InsertHTML("form1","<div id='div02' style='display:none'>按钮222的内容</div>")
        e.WriteString(wb.Build) '生成网页
End Select
[此贴子已经被作者于2018/8/27 21:11:45编辑过]
 回到顶部
帅哥哟，离线，有人找我吗？
rjh4078
 小大  3楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：狐精 帖子：3361 积分：24802 威望：0 精华：0 注册：2012/3/26 21:47:00 		  发帖心情 Post By：2018/8/28 8:52:00 [只看该作者]


图片点击可在新窗口打开查看此主题相关图片如下：tim截图20180828084847.png
图片点击可在新窗口打开查看

谢谢老师 我大概理解了下 是把内容插入到层中 如果我想实现框架这种美观效果，比如例子里这个PanelGroup 默认只显示标题 我点开再显示下面内容可以实现吗
 回到顶部
帅哥哟，离线，有人找我吗？
有点色
 小大  4楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：超级版主 帖子：13837 积分：69650 威望：0 精华：0 注册：2016/11/1 14:42:00 		  发帖心情 Post By：2018/8/28 8:58:00 [只看该作者]

以下是引用rjh4078在2018/8/28 8:52:00的发言：

图片点击可在新窗口打开查看此主题相关图片如下：tim截图20180828084847.png


谢谢老师 我大概理解了下 是把内容插入到层中 如果我想实现框架这种美观效果，比如例子里这个PanelGroup 默认只显示标题 我点开再显示下面内容可以实现吗

 

只能整体显示或隐藏，参考 http://www.foxtable.com/mobilehelp/scr/0109.htm

 
 回到顶部
帅哥哟，离线，有人找我吗？
有点色
 小大  5楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：超级版主 帖子：13837 积分：69650 威望：0 精华：0 注册：2016/11/1 14:42:00 		  发帖心情 Post By：2018/8/28 8:59:00 [只看该作者]

建议自行学习一些插件

 

http://www.jq22.com/search?seo=%E6%8A%98%E5%8F%A0

 
 回到顶部
帅哥哟，离线，有人找我吗？
rjh4078
 小大  6楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：狐精 帖子：3361 积分：24802 威望：0 精华：0 注册：2012/3/26 21:47:00 		  发帖心情 Post By：2018/8/28 9:38:00 [只看该作者]

我看中了这样一个效果的 http://www.jq22.com/yanshi19067  但是不知道怎么个性化配置

 回到顶部
帅哥哟，离线，有人找我吗？
有点甜
 小大  7楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：版主 帖子：85326 积分：427815 威望：0 精华：5 注册：2012/10/18 22:13:00 		  发帖心情 Post By：2018/8/28 9:50:00 [只看该作者]

1、下载源码看懂人家是如何做到的；你需要有html、css、js的基础；

 

2、然后通过 InsertHTML 把源码引用进来foxtable里面使用。
 回到顶部
RSS2.0 | Xhtml无图版 | Xslt无图版 Copyright © 2000 - 2018 foxtable.com Tel: 4000-810-820 粤ICP备11091905号
   Powered By Dvbbs Version 8.3.0
页面执行时间 0.04688 秒, 4 次数据查询