记得以前在做Native App的时候类似于人人网侧边滑动的效果非常的热，很多app仿照该效果进行开发，在jqMobi中也有类似的效果被称为Side Menu.下面我们来一步一步实现该效果。
首先新建一个html文件，引入jqMobi的框架，如下：
1. <!DOCTYPE html>
2. <head>
3. <meta charset="utf-8">
4. <title>Side Menu</title>
5. <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
6. <link href="css/icons.css" rel="stylesheet" type="text/css"/>
7. <script src="appframework.js" type="text/javascript"></script>
8. <script src="ui/appframework.ui.js" type="text/javascript"></script>
9. </head>
10.
11. <body>
12. <div id="afui">
13.
14. </div>
15. </body>
16. </html>
接下来再添加一个panel如下
1. <!DOCTYPE html>
2. <head>
3. <meta charset="utf-8">
4. <title>Side Menu</title>
5. <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
6. <link href="css/icons.css" rel="stylesheet" type="text/css"/>
7. <script src="appframework.js" type="text/javascript"></script>
8. <script src="ui/appframework.ui.js" type="text/javascript"></script>
9. </head>
10.
11. <body>
12. <div id="afui">
13. <div id="content">
14. <div id="home" class="panel">
15. 欢迎访问大碗干拌
16. </div>
17. </div>
18. </div>
19. </body>
20. </html>
接下来我们来添加一个<nav>在panel同级标签下
1. <!DOCTYPE html>
2. <head>
3. <meta charset="utf-8">
4. <title>Side Menu</title>
5. <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
6. <link href="css/icons.css" rel="stylesheet" type="text/css"/>
7. <script src="appframework.js" type="text/javascript"></script>
8. <script src="ui/appframework.ui.js" type="text/javascript"></script>
9. </head>
10.
11. <body>
12. <div id="afui">
13. <div id="content">
14. <div id="home" class="panel">
15.
16. </div>
17. </div>
18. <nav>
19. <div class="title">Home</div>
20. <ul>
21. <li><a class="icon home mini" href="">Android</a></li>
22. <li><a class="icon home mini" href="">Linux</a></li>
23. <li><a class="icon home mini" href="">HTML5</a></li>
24. </ul>
25. </nav>
26. </div>
27. </body>
28. </html>
接下来我们再来添加一个panel，并添加header和footer
1. <!DOCTYPE html>
2. <head>
3. <meta charset="utf-8">
4. <title>Side Menu</title>
5. <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
6. <link href="css/icons.css" rel="stylesheet" type="text/css"/>
7. <script src="appframework.js" type="text/javascript"></script>
8. <script src="ui/appframework.ui.js" type="text/javascript"></script>
9. </head>
10.
11. <body>
12. <div id="afui">
13. <div id="content">
14. <div id="home" class="panel" selected="true" data-header="custom_header" data-footer="custom_footer">
15.
16. </div>
17. <div id="android" class="panel" data-header="custom_header" data-footer="custom_footer">
18. 欢迎访问大碗干拌Android菜鸟开发历程专栏
19. </div>
20. </div>
21. <header id="custom_header">
22. <h1>大碗干拌欢迎您</h1>
23. <a class="button" style="float:right;" class="icon home"></a>
24. </header>
25. <footer id="custom_footer">
26. <a href="#home" class="icon info">HOME</a>
27. <a href="#android" class="icon info">Android</a>
28. </footer>
29. <nav>
30. <div class="title">Home</div>
31. <ul>
32. <li><a class="icon home mini" href="">Android</a></li>
33. <li><a class="icon home mini" href="">Linux</a></li>
34. <li><a class="icon home mini" href="">HTML5</a></li>
35. </ul>
36. </nav>
37. </div>
38. </body>
39. </html>
我们会发现此时两个panel对应的side menu是同一个，下面我们为各个panel分别指定一个side menu
1. <!DOCTYPE html>
2. <head>
3. <meta charset="utf-8">
4. <title>Side Menu</title>
5. <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
6. <link href="css/icons.css" rel="stylesheet" type="text/css"/>
7. <script src="appframework.js" type="text/javascript"></script>
8. <script src="ui/appframework.ui.js" type="text/javascript"></script>
9. </head>
10.
11. <body>
12. <div id="afui">
13. <div id="content">
14. <div id="home" class="panel" selected="true" data-header="custom_header" data-footer="custom_footer" data-nav="main_nav">
15. 欢迎访问大碗干拌
16. </div>
17. <div id="android" class="panel" data-header="custom_header" data-footer="custom_footer" data-nav="android_nav">
18. 欢迎访问大碗干拌Android菜鸟开发历程专栏
19. </div>
20. </div>
21. <header id="custom_header">
22. <h1>大碗干拌欢迎您</h1>
23. <a class="button" style="float:right;" class="icon home"></a>
24. </header>
25. <footer id="custom_footer">
26. <a href="#home" class="icon info">HOME</a>
27. <a href="#android" class="icon info">Android</a>
28. </footer>
29. <nav id="main_nav">
30. <div class="title">Home</div>
31. <ul>
32. <li><a class="icon home mini" href="">Android</a></li>
33. <li><a class="icon home mini" href="">Linux</a></li>
34. <li><a class="icon home mini" href="">HTML5</a></li>
35. </ul>
36. </nav>
37. <nav id="android_nav">
38. <div class="title">Home</div>
39. <ul>
40. <li><a class="icon home mini" href="">文章一</a></li>
41. <li><a class="icon home mini" href="">文章二</a></li>
42. <li><a class="icon home mini" href="">文章三</a></li>
43. </ul>
44. </nav>
45. </div>
46. </body>
47. </html>
我们会发现side menu是属于panel的，每个panel都可以给自己指定一个side menu，也可以共用一个side menu
现在最大的问题是怎么使上面的side menu有左右滑动效果，引入如下js便可实现
1. <!DOCTYPE html>
2. <head>
3. <meta charset="utf-8">
4. <title>Side Menu</title>
5. <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
6. <link href="css/icons.css" rel="stylesheet" type="text/css"/>
7. <script src="appframework.js" type="text/javascript"></script>
8. <script src="ui/appframework.ui.js" type="text/javascript"></script>
9.
10. <script type="text/javascript" charset="utf-8" src="./plugins/af.css3animate.js"></script>
11. <script type="text/javascript" charset="utf-8" src="./plugins/af.scroller.js"></script>
12. <script type="text/javascript" charset="utf-8" src="./plugins/af.touchEvents.js"></script>
13. <script type="text/javascript" charset="utf-8" src="./plugins/af.touchLayer.js"></script>
14.
15. <script type="text/javascript" charset="utf-8" src="./ui/transitions/fade.js"></script>
16. <script type="text/javascript" charset="utf-8" src="./ui/transitions/flip.js"></script>
17. <script type="text/javascript" charset="utf-8" src="./ui/transitions/slide.js"></script>
18. <script type="text/javascript" charset="utf-8" src="./ui/transitions/slideDown.js"></script>
19. <script type="text/javascript" charset="utf-8" src="./ui/transitions/slideUp.js"></script>
20.
21. <script type="text/javascript" charset="utf-8" src="./plugins/af.slidemenu.js"></script>
22.
23. <script type="text/javascript">
24. if (!((window.DocumentTouch && document instanceof DocumentTouch) || 'ontouchstart' in
25. window)) {
26. script = document.createElement("script");
27. script.src = "plugins/af.desktopBrowsers.js";
28. tag = $("head").append(script);
29. }
30. </script>
31. </head>
32.
33. <body>
34. <div id="afui">
35. <div id="content">
36. <div id="home" class="panel" selected="true" data-header="custom_header" data-footer="custom_footer" data-nav="main_nav" data-tab="footer_home">
37. 欢迎访问大碗干拌
38. </div>
39. <div id="android" class="panel" data-header="custom_header" data-footer="custom_footer" data-nav="android_nav" data-tab="footer_android">
40. 欢迎访问大碗干拌Android菜鸟开发历程专栏
41. </div>
42. </div>
43. <header id="custom_header">
44. <h1>大碗干拌欢迎您</h1>
45. <a class="button" style="float:right;" class="icon home"></a>
46. </header>
47. <footer id="custom_footer">
48. <a id="footer_home" href="#home" class="icon info">HOME</a>
49. <a id="footer_android" href="#android" class="icon info">Android</a>
50. </footer>
51. <nav id="main_nav">
52. <div class="title">Home</div>
53. <ul>
54. <li><a class="icon home mini" href="">Android</a></li>
55. <li><a class="icon home mini" href="">Linux</a></li>
56. <li><a class="icon home mini" href="">HTML5</a></li>
57. </ul>
58. </nav>
59. <nav id="android_nav">
60. <div class="title">Home</div>
61. <ul>
62. <li><a class="icon home mini" href="">文章一</a></li>
63. <li><a class="icon home mini" href="">文章二</a></li>
64. <li><a class="icon home mini" href="">文章三</a></li>
65. </ul>
66. </nav>
67. </div>
68. </body>
69. </html>