一门APP开发教程

标题: 通过JS判断侧滑边栏是否滑出，获取开关状态 [打印本页]

---

作者: 一门APP@侧边栏    时间: 2019-7-24 16:23
标题: 通过JS判断侧滑边栏是否滑出，获取开关状态
侧滑边栏是否已开启（已滑出）

1. jsBridge.sidebarIsOpen(function(yes) {
   
2.   alert(yes ? "已开启" : "已关闭");
   
3. });

复制代码

(, 下载次数: 227)

上传

点击文件名下载附件

sidebarOpen 打开（滑出）边栏

1. jsBridge.sidebarOpen();

复制代码

sidebarClose 关闭边栏

1. jsBridge.sidebarClose();

复制代码

(, 下载次数: 215)

上传

点击文件名下载附件

sidebarHeader 头部设置（A）

1. jsBridge.sidebarHeader({
   
2.   background: '#DD3333',
   
3.   textColor : '#FFFFFF',
   
4.   icon      : 'https://s.yimenyun.net/sys/avatar.png',
   
5.   text      : '显示在图标下面的文字',
   
6.   action    : 'javascript:alert("你点击了头部")'
   
7. });
   
8. alert("已设置");
   
9. jsBridge.sidebarOpen();
   
10. 
    
11. /**
    
12. {
    
13.   background: //背景色或背景图片，背景色用 #RRBBGG 格式，背景图用图片链接
    
14.   textColor : //文字颜色
    
15.   icon      : //图标链接
    
16.   text      : //显示在图标下面的文字
    
17.   action    : //点击头部需要执行的操作，一个合法的 uri 或者一段 js 脚本
    
18. }
    
19. **/

复制代码

真机效果
(, 下载次数: 222)

上传

点击文件名下载附件

sidebarHeader 头部设置（B）

1. jsBridge.sidebarHeader({
   
2.   background: 'https://s.yimenyun.net/sys/sm6.jpg',
   
3.   textColor : '#FFFFFF',
   
4.   icon      : 'https://s.yimenyun.net/sys/avatar2.png',
   
5.   text      : '请登录',
   
6.   action    : 'javascript:alert("你点击了头部")'
   
7. });
   
8. alert("已设置");
   
9. jsBridge.sidebarOpen();

复制代码

真机效果
(, 下载次数: 204)

上传

点击文件名下载附件

sidebarHeader 头部设置（C）

1. jsBridge.sidebarHeader({
   
2.   background: 'https://s.yimenyun.net/sys/sm3.jpg',
   
3.   textColor : '#FF0000',
   
4.   icon      : 'https://s.yimenyun.net/sys/avatar.png',
   
5.   text      : '相见恨晚',
   
6.   action    : 'https://www.yimenapp.com/'
   
7. });
   
8. alert("已设置");
   
9. jsBridge.sidebarOpen();

复制代码

真机效果
(, 下载次数: 207)

上传

点击文件名下载附件

查看DEMO方式
将https://www.yimenapp.com/doc/demo_sidebar.cshtml打包成APP，即刻体验！
(, 下载次数: 214)

上传

点击文件名下载附件

之后就可以真机体验效果了

---

欢迎光临 一门APP开发教程 (https://bbs.yimenapp.com/)

Powered by Discuz! X3.4