Jquery weui学习

1.action-sheet.html

  1  1 <!DOCTYPE html>
  2   2 <html>
  3   3   <head>
  4   4     <title>jQuery WeUI</title>
  5   5     <meta charset="utf-8">
  6   6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7   7 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  8   8 
  9   9 <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
 10  10 ">
 11  11 
 12  12 <link rel="stylesheet" href="../lib/weui.min.css">
 13  13 <link rel="stylesheet" href="../css/jquery-weui.css">
 14  14 <link rel="stylesheet" href="css/demos.css">
 15  15 
 16  16   </head>
 17  17 
 18  18   <body ontouchstart>
 19  19 
 20  20 
 21  21     <header class='demos-header'>
 22  22       <h1 class="demos-title">Action Sheet</h1>
 23  23     </header>
 24  24 
 25  25     <div class='demos-content-padded'>
 26  26       <a href="javascript:;" id='show-actions' class="weui-btn weui-btn_primary">显示 ActionSheet</a>
 27  27       <a href="javascript:;" id='show-actions-bg' class="weui-btn weui-btn_primary">自定义背景色</a>
 28  28       <a href="javascript:;" id='show-actions-bg2' class="weui-btn weui-btn_primary">自定义背景色2</a>
 29  29     </div>
 30  30     <script src="../lib/jquery-2.1.4.js"></script>
 31  31 <script src="../lib/fastclick.js"></script>
 32  32 <script>
 33  33   $(function() {
 34  34     FastClick.attach(document.body);
 35  35   });
 36  36 </script>
 37  37 <script src="../js/jquery-weui.js"></script>
 38  38 
 39  39     <script>
 40  40     $(document).on("click", "#show-actions", function() {
 41  41          $.actions({
 42  42               title: "选择操作",
 43  43               onClose: function() {
 44  44                 console.log("close");
 45  45               },
 46  46               actions: [
 47  47                 {
 48  48                   text: "发布",
 49  49                   className: "color-primary",
 50  50                   onClick: function() {
 51  51                     $.alert("发布成功");
 52  52                   }
 53  53                 },
 54  54                 {
 55  55                   text: "编辑",
 56  56                   className: "color-warning",
 57  57                   onClick: function() {
 58  58                     $.alert("你选择了“编辑”");
 59  59                   }
 60  60                 },
 61  61                 {
 62  62                   text: "删除",
 63  63                   className: 'color-danger',
 64  64                   onClick: function() {
 65  65                     $.alert("你选择了“删除”");
 66  66                   }
 67  67                 }
 68  68               ]
 69  69             });
 70  70       });
 71  71  
 72  72      
 73  73 
 74  74       $(document).on("click", "#show-actions-bg", function() {
 75  75         $.actions({
 76  76           actions: [
 77  77             {
 78  78               text: "发布",
 79  79               className: "bg-primary",
 80  80             },
 81  81             {
 82  82               text: "编辑",
 83  83               className: "bg-warning",
 84  84             },
 85  85             {
 86  86               text: "删除",
 87  87               className: 'bg-danger',
 88  88             }
 89  89           ]
 90  90         });
 91  91       });
 92  92       
 93  93       $("#show-actions-bg2").click(function(){
 94  94           $.actions({
 95  95               actions: [
 96  96                 {
 97  97                   text: "发布",
 98  98                   className: "bg-primary",
 99  99                 },
100 100                 {
101 101                   text: "编辑",
102 102                   className: "bg-warning",
103 103                 },
104 104                 {
105 105                   text: "删除",
106 106                   className: 'bg-danger',
107 107                 }
108 108               ]
109 109             });
110 110       });
111 111     </script>
112 112   </body>
113 113 </html>
View Code

 

2.action-sheet.html

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title>jQuery WeUI</title>
 5     <meta charset="utf-8">
 6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 8 
 9 <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
10 ">
11 
12 <link rel="stylesheet" href="../lib/weui.min.css">
13 <link rel="stylesheet" href="../css/jquery-weui.css">
14 <link rel="stylesheet" href="css/demos.css">
15 
16   </head>
17 
18   <body ontouchstart>
19 
20     <header class='demos-header'>
21       <h1 class="demos-title">Article</h1>
22     </header>
23     <article class="weui-article">
24       <h1>大标题</h1>
25       <section>
26         <h2 class="title">章标题</h2>
27         <section>
28           <h3>1.1 节标题</h3>
29           <p>
30             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
31             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
32             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
33             consequat.
34           </p>
35           <p>
36             <img src="./images/pic_article.png" alt="">
37             <img src="./images/pic_article.png" alt="">
38           </p>
39         </section>
40         <section>
41           <h3>1.2 节标题</h3>
42           <p>
43             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
44             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
45             cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
46             proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
47           </p>
48         </section>
49       </section>
50     </article>
51 
52     <script src="../lib/jquery-2.1.4.js"></script>
53 <script src="../lib/fastclick.js"></script>
54 <script>
55   $(function() {
56     FastClick.attach(document.body);
57   });
58 </script>
59 <script src="../js/jquery-weui.js"></script>
60 
61   </body>
62 </html>
View Code

 

3.badge.html

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title>jQuery WeUI</title>
 5     <meta charset="utf-8">
 6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 8 
 9 <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
10 ">
11 
12 <link rel="stylesheet" href="../lib/weui.min.css">
13 <link rel="stylesheet" href="../css/jquery-weui.css">
14 <link rel="stylesheet" href="css/demos.css">
15 
16   </head>
17 
18   <body ontouchstart>
19 
20 
21     <header class='demos-header'>
22       <h1 class="demos-title">Badge</h1>
23     </header>
24 
25     <div class="weui-cells__title">新消息提示跟摘要信息后，统一在列表右侧</div>
26     <div class="weui-cells">
27       <div class="weui-cell weui-cell_access">
28         <div class="weui-cell__bd">单行列表</div>
29         <div class="weui-cell__ft" style="font-size: 0">
30           <span style="vertical-align:middle; font-size: 17px;">详细信息</span>
31           <span class="weui-badge weui-badge_dot" style="margin-left: 5px;margin-right: 5px;"></span>
32         </div>
33       </div>
34     </div>
35 
36     <div class="weui-cells__title">未读数红点跟在主题信息后，统一在列表左侧</div>
37     <div class="weui-cells">
38       <div class="weui-cell">
39         <div class="weui-cell__hd" style="position: relative;margin-right: 10px;">
40           <img src="images/pic_160.png" style="width: 50px;display: block">
41           <span class="weui-badge" style="position: absolute;top: -.4em;right: -.4em;">8</span>
42         </div>
43         <div class="weui-cell__bd">
44           <p>联系人名称</p>
45           <p style="font-size: 13px;color: #888888;">摘要信息</p>
46         </div>
47       </div>
48       <div class="weui-cell weui-cell_access">
49         <div class="weui-cell__bd">
50           <span style="vertical-align: middle">单行列表</span>
51           <span class="weui-badge" style="margin-left: 5px;">8</span>
52         </div>
53         <div class="weui-cell__ft"></div>
54       </div>
55       <div class="weui-cell weui-cell_access">
56         <div class="weui-cell__bd">
57           <span style="vertical-align: middle">单行列表</span>
58           <span class="weui-badge" style="margin-left: 5px;">8</span>
59         </div>
60         <div class="weui-cell__ft">详细信息</div>
61       </div>
62       <div class="weui-cell weui-cell_access">
63         <div class="weui-cell__bd">
64           <span style="vertical-align: middle">单行列表</span>
65           <span class="weui-badge" style="margin-left: 5px;">New</span>
66         </div>
67         <div class="weui-cell__ft"></div>
68       </div>
69     </div>
70     <script src="../lib/jquery-2.1.4.js"></script>
71 <script src="../lib/fastclick.js"></script>
72 <script>
73   $(function() {
74     FastClick.attach(document.body);
75   });
76 </script>
77 <script src="../js/jquery-weui.js"></script>
78 
79   </body>
80 </html>
View Code

 

posted @ 2018-01-19 19:24  Leegz  阅读(2518)  评论(0)  编辑  收藏  举报