侧面弹出

侧面弹出，对于一些宽屏幕的用户而已，这种侧面弹出，更加直观好看，希望可以内置到弹出页面的弹出模式里去！目前活字格有啥办法可以实现！

https://gcdn.grapecity.com.cn/fo ... id=52902&extra=

看下我这个帖子
虽然有点low
但是应该也算是一种方式

谢厅 发表于 2019-11-8 15:25
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=52902&extra=

看下我这个帖子

思路应该没问题！我主要是通过按钮之后再弹出！

学习谢老板的高超功能！

官方可以把弹出页面的弹出方式多增加加几种，现在有普通方式，下拉方式，再增加，上下左右滑动弹出就行了。

在所有页面都能呼出（类似于全局的侧面导航栏）
        1. 构建母版页
                a. 将母版页添加一些空白的列，并且设置为隐藏
               
               
                b. 在这些隐藏的列中画上菜单
               
               
                c. 把菜单单元格命名为"treebar"
               

                d. 重要提示：
                        i. 所有需要这样呼出的菜单的页面必须设置为水平拉伸
                        ii. 母版页的左右两端不能留有空白列
                        iii. 菜单的单元格必须紧挨着页面占位区
                        
        
        2. 配置代码
                a. 下载附件“treebar.js"
                     
                b. 将treebar.js上传到全局的js资源文件夹中
               
               
               
               
                c. 代码如下
               

1. //如果在页面中没有以treebar命名，那么要把这里所有的treebar改位你的命名。
   
2. 
   
3.                 setTimeout(treebarfct, 2000);//设置延时，建议不更改，第一次启动页面时需要等待2s才能呼出菜单
   
4. 
   
5.                 function treebarfct() {
   
6. 
   
7.                     $("[fgcname='treebar']").css("display", "block");
   
8. 
   
9.                     $("[fgcname='treebar']").css("z-index", "999");
   
10. 
    
11.                     $("[fgcname='treebar']").mouseleave(function () {
    
12. 
    
13.                         $("[fgcname='treebar']").animate({ left: "0px", width: "0px" }, 500);
    
14. 
    
15.                     });
    
16. 
    
17.                     var value = parseFloat($("[fgcname='treebar']").height());
    
18. 
    
19.                     var readmore = document.createElement('div');
    
20. 
    
21.                     readmore.setAttribute('id', 'toucharea');
    
22. 
    
23.                     readmore.style.width = "3px";//这里可以设置，数值越大，那么鼠标就不用那么靠近最左侧就可以呼出菜单
    
24. 
    
25.                     readmore.style.height = value+100+'px';
    
26. 
    
27.                     readmore.style.zIndex = '9';
    
28. 
    
29.                     readmore.style.position = "absolute";
    
30. 
    
31.                     readmore.style.display = "block";
    
32. 
    
33.                     readmore.style.left = '0px';
    
34. 
    
35.                     readmore.style.top = '0px';
    
36. 
    
37.                     readmore.style.background = 'rgba(5,15,55,0)';
    
38. 
    
39.                     readmore.onmouseover = function () {
    
40. 
    
41.                         $("[fgcname='treebar']").animate({ left: "0px", width: "200px" }, 500);
    
42. 
    
43.                     };
    
44. 
    
45.                     $("[fgcname='treebar']").after(readmore);
    
46. 
    
47.                 }

复制代码

               
               
               
        3. 运行测试
                a. 为页面配置母版页
               
               
        4.测试效果               
               
               

用按钮形式在某以特定页面呼出部分内容
        1. 构建页面
                a. 在页面以外新建一些空白列，并且设置为隐藏
               
               
                b. 在这些空白列中设置好你自己的内容（这里演示是填报表单）
                        i. 合并所有的隐藏列为一个单元格
                        ii. 将单元格设置成为“页面容器”单元格类型
                        
                        
                        iii. 设置单元格名称为“hideArea“
                        
                        
        2. 设置代码
                a. 打开页面加载时执行命令，添加如下js代码
               

1. $("[fgcname='hideArea']").css("display", "block");
   
2. 
   
3.                 $("[fgcname='hideArea']").css("z-index", "999");
   
4. 
   
5.                 target=0;

复制代码

               
               
               
                b. 在页面中设置按钮，用于控制显示还是隐藏，并且为按钮赋予代码
               

1. if(target==0){
   
2. 
   
3.                     $("[fgcname='hideArea']").animate({ left: "-=120px", width: "120px" }, 500);
   
4. 
   
5.                     target=1;
   
6. 
   
7.                 }else{
   
8. 
   
9.                     $("[fgcname='hideArea']").animate({  left: "+=120px", width: "0px" }, 500);
   
10. 
    
11.                     target=0;
    
12. 
    
13.                 }

复制代码

               
                这里请注意：120px是咱们隐藏的这个控件的单元格宽度，一个默认的活字格格子的宽度是20px，根据自己实际情况算就行。
               

          3.演示效果
               
               

演示工程文件如下：

        

这个必须赞一下！

谢厅 发表于 2019-11-9 11:43
在所有页面都能呼出（类似于全局的侧面导航栏）
        1. 构建母版页
                a. 将母版页添加 ...

能不能在侧面弹出的页面加上一个带指示箭头的边框，这样隐藏后可以看到边框的指示箭头，点击箭头呼出侧边框，要不然，不知道侧边框去哪里了

夏雪冬阳 发表于 2019-11-14 12:04
能不能在侧面弹出的页面加上一个带指示箭头的边框，这样隐藏后可以看到边框的指示箭头，点击箭头呼出侧边 ...

这个就需要在已有的JS上再去做开发了~让谢老板休息两天再好好研究研究

谢老板太辛苦了