在上一篇中我们学会了ActionSheet的使用，细心的朋友可能会发现其中创建列表的格式是HTML的，代码如下：
1. function showCustomHtmlSheet() {
2. "#afui").actionsheet('<a >Back</a><a οnclick="alert(\'hi\');" >Show Alert 3</a><a οnclick="alert(\'goodbye\');">Show Alert 4</a>');
3. }
这一篇我们来研究一下json格式的ActionSheet,其实很简单，和上一篇中的分析方法一样，我们先找到实例代码中的源代码如下：
1. <a class="button" onclick="showCustomJsonSheet()">Show Custom Json Sheet</a>
1. function showCustomJsonSheet() {
2. "#afui").actionsheet(
3. [{
4. 'back',
5. 'red',
6. function () {
7. $.ui.goBack();
8. }
9. }, {
10. 'show alert 5',
11. 'blue',
12. function () {
13. "hi");
14. }
15. }, {
16. 'show alert 6',
17. '',
18. function () {
19. "goodbye");
20. }
21. }]);
22. }
运行效果：
好吧，我们下面添加一个条目试试。修改代码如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>jqMobi</title>
6. <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
7. <link href="css/icons.css" rel="stylesheet" type="text/css"/>
8. <script src="appframework.js" type="text/javascript"></script>
9. <script src="ui/appframework.ui.js" type="text/javascript"></script>
10. </head>
11. <body>
12. <div id="afui">
13. <div id="content">
14. <div id="home" title="首页" class="panel" selected="true"
15. data-footer="custom_footer">
16. <a class="button" onclick="showCustomJsonSheet()">Show Custom Json Sheet</a>
17. </div>
18. <div id="about" title="关于我们" class="panel"
19. data-footer="custom_footer">
20.
21. </div>
22. <header id="custom_header">
23. <h1>首页</h1>
24. </header>
25. <footer id="custom_footer">
26. <a href='#home' class='icon home'>首页</a>
27. <a href='#about' class='icon info'>关于我们</a>
28. </footer>
29. <nav>
30. <div class='title'>Home</div>
31. <ul>
32. <li><a class="icon home mini" href="#main">Home</a></li>
33. </ul>
34. </nav>
35. </div>
36. </div>
37. <script>
38. function showCustomJsonSheet() {
39. $("#afui").actionsheet(
40. [{
41. text: 'back',
42. cssClasses: 'red',
43. handler: function () {
44. $.ui.goBack();
45. }
46. }, {
47. text: 'show alert 5',
48. cssClasses: 'blue',
49. handler: function () {
50. alert("hi");
51. }
52. }, {
53. text: 'show alert 6',
54. cssClasses: '',
55. handler: function () {
56. alert("goodbye");
57. }
58. },{
59. text: '大碗干拌',
60. cssClasses: 'red',
61. handler: function () {
62. alert("哈哈");
63. }
64. }]);
65. }
66. </script>
67. </body>
68. </html>
运行一下，看看效果：
突然发现我们上面设置的背景没作用，这是什么原因呢？我们再来看看源代码，定位到元素如下：
1. <a href="javascript:;" class="red">大碗干拌</a>
看到上面的background:white;这就是原因，将这一项禁掉会发现有效果了，如下：
好吧，我们进到af.ui.css文件中修改如下：
1. #afui #af_actionsheet a{
2. 0;
3. 0;
4. color:black;
5. /*background:white;*/
6. border:none;
7. text-shadow:none;
8. }
和上面的效果相同，我就不贴图了，那么如果我们想让上面菜单上面的文字为蓝色的怎么办？其实可以像上面一样在af.ui.css中该，但是我建议最好不要在这个配置文件中修改，我们可以在我们的index.html中添加如下代码：
1. <style>
2. #afui #af_actionsheet a{
3. color:blue;
4. }
5. </style>
效果如下：
