Jquery weui學習

本文轉載自查看原文 2018-01-19 19:24 2164 weui/ 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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery WeUI jquery weui picker多次動態賦值 jQuery WeUI實現分頁功能 jquery weui輪播圖的使用從WeUI學習到的知識點從WeUI學習到的知識點 WeUI jQuery WeUI 地址選擇器的使用 Jquery WEUI 滾動加載（infinite）不觸發 jQuery weuiの日期&時間控件