本帖最后由 谢厅 于 2019-11-9 16:29 编辑
在所有页面都能呼出（类似于全局的侧面导航栏）
1. 构建母版页
a. 将母版页添加一些空白的列，并且设置为隐藏
b. 在这些隐藏的列中画上菜单
c. 把菜单单元格命名为"treebar"
d. 重要提示：
i. 所有需要这样呼出的菜单的页面必须设置为水平拉伸
ii. 母版页的左右两端不能留有空白列
iii. 菜单的单元格必须紧挨着页面占位区
2. 配置代码
a. 下载附件“treebar.js"
b. 将treebar.js上传到全局的js资源文件夹中
c. 代码如下
- //如果在页面中没有以treebar命名，那么要把这里所有的treebar改位你的命名。
- setTimeout(treebarfct, 2000);//设置延时，建议不更改，第一次启动页面时需要等待2s才能呼出菜单
- function treebarfct() {
- $("[fgcname='treebar']").css("display", "block");
- $("[fgcname='treebar']").css("z-index", "999");
- $("[fgcname='treebar']").mouseleave(function () {
- $("[fgcname='treebar']").animate({ left: "0px", width: "0px" }, 500);
- });
- var value = parseFloat($("[fgcname='treebar']").height());
- var readmore = document.createElement('div');
- readmore.setAttribute('id', 'toucharea');
- readmore.style.width = "3px";//这里可以设置，数值越大，那么鼠标就不用那么靠近最左侧就可以呼出菜单
- readmore.style.height = value+100+'px';
- readmore.style.zIndex = '9';
- readmore.style.position = "absolute";
- readmore.style.display = "block";
- readmore.style.left = '0px';
- readmore.style.top = '0px';
- readmore.style.background = 'rgba(5,15,55,0)';
- readmore.onmouseover = function () {
- $("[fgcname='treebar']").animate({ left: "0px", width: "200px" }, 500);
- };
- $("[fgcname='treebar']").after(readmore);
- }
3. 运行测试
a. 为页面配置母版页
4.测试效果
用按钮形式在某以特定页面呼出部分内容
1. 构建页面
a. 在页面以外新建一些空白列，并且设置为隐藏
b. 在这些空白列中设置好你自己的内容（这里演示是填报表单）
i. 合并所有的隐藏列为一个单元格
ii. 将单元格设置成为“页面容器”单元格类型
iii. 设置单元格名称为“hideArea“
2. 设置代码
a. 打开页面加载时执行命令，添加如下js代码
- $("[fgcname='hideArea']").css("display", "block");
- $("[fgcname='hideArea']").css("z-index", "999");
- target=0;
b. 在页面中设置按钮，用于控制显示还是隐藏，并且为按钮赋予代码
- if(target==0){
- $("[fgcname='hideArea']").animate({ left: "-=120px", width: "120px" }, 500);
- target=1;
- }else{
- $("[fgcname='hideArea']").animate({ left: "+=120px", width: "0px" }, 500);
- target=0;
- }
这里请注意：120px是咱们隐藏的这个控件的单元格宽度，一个默认的活字格格子的宽度是20px，根据自己实际情况算就行。
3.演示效果
演示工程文件如下：
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图