帖子
帖子
用户
博客
课程
123下一页
返回列表 发新帖
显示全部楼层
177
帖子
0
勋章
1万+
Y币

sideMenu模块(界面布局-导航菜单)demo示例

[复制链接]
发表于 2018-1-27 16:19:23
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  6.                 <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7.                 <title>title</title>
  8.                 <link rel="stylesheet" type="text/css" href="../css/api.css" />
  9.                 <style>
  10.                         body {
  11.                         }
  12.                         html, body {
  13.                                 height: 100%
  14.                         }
  15.                         body {
  16.                                 background-color: #fff;
  17.                                 margin: 0;
  18.                         }
  19.                         #wrap {
  20.                                 height: 100%;
  21.                                 position: relative;
  22.                         }
  23.                         #header {
  24.                                 padding-top: 20px;
  25.                                 background-color: #5082c2;
  26.                                 height: 44px;
  27.                                 position: relative;
  28.                         }
  29.                         #header h1 {
  30.                                 font-size: 20px;
  31.                                 height: 44px;
  32.                                 line-height: 44px;
  33.                                 margin: 0em;
  34.                                 color: #fff;
  35.                                 margin-left: 100px;
  36.                                 margin-right: 100px;
  37.                                 text-align: center;
  38.                         }
  39.                         #main {
  40.                                 display: -webkit-box;
  41.                                 -webkit-box-orient: vertical;
  42.                                 -webkit-box-pack: center;
  43.                         }
  44.                         a.button {
  45.                                 display: -webkit-box;
  46.                                 -webkit-box-orient: vertical;
  47.                                 -webkit-box-pack: center;
  48.                                 -webkit-box-align: center;
  49.                                 height: 32px;
  50.                                 margin: 8px;
  51.                                 background-color: rgba(240, 240, 240, 1.0);
  52.                                 border-color: rgba(220, 220, 220, 1.0);
  53.                                 border-width: 2px;
  54.                                 border-style: solid;
  55.                         }
  56.                         a.active {
  57.                                 background-color: rgba(240, 240, 240, 0.7);
  58.                         }
  59.                 </style>
  60.         </head>
  61.         <body>
  62.                 <a class="button" tapmode="active" onclick="fnOpen()">打开</a>
  63.                 <a class="button" tapmode="active" onclick="fnClose()">关闭</a>
  64.                 <a class="button" tapmode="active" onclick="fnHidden()">隐藏菜单</a>
  65.                 <a class="button" tapmode="active" onclick="fnShow()">显示菜单</a>
  66.         </body>
  67.         <script type="text/javascript" src="../script/api.js"></script>
  68.         <script type="text/javascript">
  69.                 var demo;
  70.                 apiready = function() {
  71.                         demo = api.require('sideMenu');
  72.                 };
  73.                 function fnOpen() {
  74.                         sideMenu.open({
  75.                                 trajectoryColor : '#3F9FEA',
  76.                                 btnArray : [{
  77.                                         title : '图标1',
  78.                                         'icon' : 'widget://image/test.jpg',
  79.                                         'bgImg' : 'widget://image/blue.jpg'
  80.                                 }, {
  81.                                         title : '图标2',
  82.                                         'icon' : 'widget://image/test.jpg',
  83.                                         'bgImg' : 'widget://image/blue.jpg'
  84.                                 }, {
  85.                                         title : '图标3',
  86.                                         'icon' : 'widget://image/test.jpg',
  87.                                         'bgImg' : 'widget://image/blue.jpg'
  88.                                 }, {
  89.                                         title : '图标4',
  90.                                         'icon' : 'widget://image/test.jpg',
  91.                                         'bgImg' : 'widget://image/blue.jpg'
  92.                                 }],
  93.                                 fixedOn : api.frameName
  94.                         }, function(ret, err) {
  95.                                 if (ret) {
  96.                                         //alert(JSON.stringify(ret));
  97.                                         id=ret.id;
  98.                                 } else {
  99.                                         alert(JSON.stringify(err));
  100.                                 }
  101.                         });
  102.                 }

  103.                 function fnClose() {
  104.                         sideMenu.close({
  105.                                 id : id
  106.                         });
  107.                 }

  108.                 function fnHidden() {
  109.                         sideMenu.hidden({
  110.                                 id : id
  111.                         });
  112.                 }

  113.                 function fnShow() {
  114.                         sideMenu.show({
  115.                                 id : id
  116.                         });
  117.                 }
  118.         </script>
  119. </html>
复制代码
sideMenu模块demo  多谢捧场

本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册

X
2
帖子
0
勋章
11
Y币

支持一下,拿云币
0
帖子
0
勋章
73
Y币
支持分享。
18
帖子
1
勋章
106
Y币
支持支持,顺便拿云币
11
帖子
1
勋章
377
Y币
感谢分享
26
帖子
2
勋章
372
Y币
支持 支持
3
帖子
0
勋章
121
Y币
支持一下
0
帖子
0
勋章
29
Y币
支付一下
2
帖子
0
勋章
7
Y币

up~~up~~up~~~
0
帖子
0
勋章
Y币
谢谢分享!!!!!!!
123下一页
您需要登录后才可以回帖 登录

本版积分规则