├── README.md ├── animation.html ├── button.html ├── checkbox.html ├── css ├── mui-animate-tab.css ├── mui-base.css ├── mui-button.css ├── mui-checkbox.css ├── mui-dialog.css ├── mui-imageswitch.css ├── mui-input.css ├── mui-list.css ├── mui-progress.css ├── mui-radio.css ├── mui-select.css ├── mui-slide.css ├── mui-slider.css ├── mui-swipechange.css ├── mui-tab.css ├── mui-toggleswitch.css ├── mui-toolbar.css └── ui.css ├── dialog.html ├── gesture.html ├── imagechange.html ├── images └── pbar.gif ├── index.html ├── input.html ├── js ├── JM.js ├── animate_tab.js ├── autogrow_textarea.js ├── autoload_list.js ├── button.js ├── buttonlist.js ├── checkbox.js ├── checkboxlist.js ├── cnMobile0.js ├── cnMobile2.js ├── delbtn_input.js ├── dialog.js ├── grouplist.js ├── imagechange.js ├── lazyLoadImgs.js ├── list.js ├── load_list.js ├── progress.js ├── radio.js ├── radiobuttonlist.js ├── radiolist.js ├── select.js ├── slide.js ├── slide_list.js ├── slider.js ├── swipe_tab.js ├── swipechange.js ├── tab.js └── toggleswitch.js ├── lazy_load_imgs.html ├── list.html ├── list_autoload.html ├── list_load.html ├── progress.html ├── radio.html ├── select.html ├── sl.html ├── slide.html ├── swipe_change.html ├── swipe_list.html ├── tab.html ├── test.html ├── test2.html ├── test3.html ├── test4.html ├── toggleswitch.html └── toolbar.html /README.md: -------------------------------------------------------------------------------- 1 | mobile 2 | ====== 3 | 4 | a mobile js framework 5 | -------------------------------------------------------------------------------- /animation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 26 | 27 | 28 |
29 |

Animation

30 |
MUI
31 | 32 | 33 |
34 | 35 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /button.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 18 | 19 | 20 |
21 |

button

22 |

23 | 26 |

27 |

28 | 31 |

32 |

33 | 36 |

37 |

38 | 41 |

42 | 43 |

button with icon

44 |

45 | 49 | 53 |

54 |

55 | 59 | 63 |

64 |

65 | 69 | 73 |

74 |

75 | 79 | 83 |

84 | 85 |

buttons in group

86 |
87 | 88 | 89 | 90 |
91 |
92 | 93 | 94 | 95 |
96 |
97 | 98 | 99 | 100 |
101 |
102 | 103 | 104 | 105 |
106 | 107 | 108 |
109 | 110 | 111 | 112 |
113 |
114 | 115 | 116 | 117 |
118 | 119 |
120 | 121 | 122 | 123 |
124 |
125 | 126 | 127 | 128 |
129 | 130 | 131 |
132 | 133 | 134 | 135 | 203 | 204 | 205 | -------------------------------------------------------------------------------- /checkbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 18 | 19 | 20 |
21 |

checkbox

22 |

23 | 27 | 31 |

32 |

checkboxs in group

33 |

34 |

35 | 39 | 40 | 44 | 45 | 49 |
50 |
51 | 55 | 56 | 60 | 61 | 65 |
66 | 67 | 68 |
69 | 74 | 75 | 80 | 81 | 86 |
87 | 88 | 89 |
90 | 95 | 96 | 101 | 102 | 107 |
108 |

109 | 110 |
111 | 112 | 113 | 114 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /css/mui-animate-tab.css: -------------------------------------------------------------------------------- 1 | .animate_tab{ 2 | position: absolute; 3 | width: 100%; 4 | height: 100%; 5 | overflow-x:hidden; 6 | } 7 | .animate_tab > .wrap{ 8 | height: 100%; 9 | } 10 | .animate_tab > .wrap > div{ 11 | float: left; 12 | height: 100%; 13 | outline: 1px solid white; 14 | border-radius: 5px; 15 | overflow-x:hidden; 16 | } 17 | .animate_tab > .wrap > div > div{ 18 | height: 100%; 19 | } -------------------------------------------------------------------------------- /css/mui-base.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body{ 6 | -webkit-user-select: none; 7 | -webkit-user-drag: none; 8 | -webkit-text-size-adjust: 100%; 9 | } 10 | a{ 11 | text-decoration: none; 12 | } 13 | input{ 14 | -webkit-user-modify: read-write-plaintext-only; 15 | } 16 | a,input,button,textarea,fieldset,ul,span{ 17 | -webkit-tap-highlight-color: rgba(255,255,255,0); 18 | } 19 | input[type='text'] ,textarea ,fieldset{ 20 | border: none; 21 | outline: none; 22 | } 23 | 24 | .conner_round_group{ 25 | } 26 | .conner_round_group > *:first-child{ 27 | -webkit-border-radius: 8px 0 0 8px; 28 | -moz-border-radius: 8px 0 0 8px; 29 | border-radius: 8px 0 0 8px; 30 | 31 | } 32 | .conner_round_group > *:last-child{ 33 | -webkit-border-radius: 0 8px 8px 0; 34 | -moz-border-radius: 0 8px 8px 0; 35 | border-radius: 0 8px 8px 0; 36 | } 37 | 38 | .conner_round_vertical_group{ 39 | } 40 | .conner_round_vertical_group > *:first-child{ 41 | -webkit-border-radius: 8px 8px 0 0; 42 | -moz-border-radius: 8px 8px 0 0; 43 | border-radius: 8px 8px 0 0; 44 | 45 | } 46 | .conner_round_vertical_group > *:last-child{ 47 | -webkit-border-radius: 0 0 8px 8px; 48 | -moz-border-radius: 0 0 8px 8px; 49 | border-radius: 0 0 8px 8px; 50 | } -------------------------------------------------------------------------------- /css/mui-button.css: -------------------------------------------------------------------------------- 1 | /* 按钮 */ 2 | .btn{ 3 | position: relative; 4 | width: 60%; 5 | display: block; 6 | border: none; 7 | -webkit-border-radius: 8px; 8 | -moz-border-radius: 8px; 9 | border-radius: 8px; 10 | -webkit-text-shadow: 0 1px 1px rgba(0,0,0,0.4); 11 | -moz-text-shadow: 0 1px 1px rgba(0,0,0,0.4); 12 | text-shadow: 0 1px 1px rgba(0,0,0,0.4); 13 | -moz-user-select: none; 14 | -webkit-user-select: none; 15 | -ms-user-select: none; 16 | cursor: pointer; 17 | 18 | -moz-box-shadow: 0px 1px 4px rgba(0,0,0,.3); 19 | -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, .3); 20 | box-shadow: 0px 1px 4px rgba(0, 0, 0, .3) ; 21 | 22 | } 23 | .btn_text{ 24 | display: block; 25 | padding: 0.7em 20px; 26 | color:#fff; 27 | font-size: 16px; 28 | font-weight: bold; 29 | text-align: center; 30 | text-overflow: ellipsis; 31 | overflow: hidden; 32 | white-space: nowrap; 33 | } 34 | /* 不同样式按钮 */ 35 | .btn_white{ 36 | border: 1px solid #ccc; 37 | background: #eee; 38 | background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f1f1f1)); 39 | background: -webkit-linear-gradient(top, #fff, #f1f1f1); 40 | background: -moz-linear-gradient(top, #fff, #f1f1f1); 41 | background: -ms-linear-gradient(top, #fff, #f1f1f1); 42 | background: -o-linear-gradient(top, #fff, #f1f1f1); 43 | background: linear-gradient(top, #fff, #f1f1f1); 44 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#f1f1f1', GradientType=0); 45 | -webkit-text-shadow: 0 1px 1px #fff; 46 | -moz-text-shadow: 0 1px 1px #fff; 47 | text-shadow: 0 1px 1px #fff; 48 | 49 | } 50 | .btn_white.active{ 51 | background: #fff; 52 | background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f6f6f6)); 53 | background: -webkit-linear-gradient(top, #fafafa, #f6f6f6); 54 | background: -moz-linear-gradient(top, #fafafa, #f6f6f6); 55 | background: -ms-linear-gradient(top, #fafafa, #f6f6f6); 56 | background: -o-linear-gradient(top, #fafafa #f6f6f6); 57 | background: linear-gradient(top, #fafafa, #f6f6f6); 58 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#f6f6f6', GradientType=0); 59 | } 60 | .btn_white > .btn_text{ 61 | color: #333; 62 | } 63 | .btn_green{ 64 | border: 1px solid #50a428; 65 | background: #6ebf47; 66 | background: -webkit-gradient(linear, left top, left bottom, from(#6ebf47), to(#5cb232)); 67 | background: -webkit-linear-gradient(top, #6ebf47, #5cb232); 68 | background: -moz-linear-gradient(top, #6ebf47, #5cb232); 69 | background: -ms-linear-gradient(top, #6ebf47, #5cb232); 70 | background: -o-linear-gradient(top, #6ebf47, #5cb232); 71 | background: linear-gradient(top, #6ebf47, #5cb232); 72 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6ebf47', endColorstr='#5cb232', GradientType=0); 73 | -webkit-text-shadow: 0 1px 1px rgba(0,0,0,0.4); 74 | -moz-text-shadow: 0 1px 1px rgba(0,0,0,0.4); 75 | text-shadow: 0 1px 1px rgba(0,0,0,0.4); 76 | } 77 | .btn_green.active{ 78 | background: #50a428; 79 | background: -webkit-gradient(linear, left top, left bottom, from(#50a428), to(#7fd556)); 80 | background: -webkit-linear-gradient(top, #50a428, #7fd556); 81 | background: -moz-linear-gradient(top, #50a428, #7fd556); 82 | background: -ms-linear-gradient(top, #50a428, #7fd556); 83 | background: -o-linear-gradient(top, #50a428 #7fd556); 84 | background: linear-gradient(top, #50a428, #7fd556); 85 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#50a428', endColorstr='#7fd556', GradientType=0); 86 | } 87 | 88 | .btn_black{ 89 | border: 1px solid #111; 90 | background: #333; 91 | background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#2d2d2d)); 92 | background: -webkit-linear-gradient(top, #444, #2d2d2d); 93 | background: -moz-linear-gradient(top, #444, #2d2d2d); 94 | background: -ms-linear-gradient(top, #444, #2d2d2d); 95 | background: -o-linear-gradient(top, #444, #2d2d2d); 96 | background: linear-gradient(top, #444, #2d2d2d); 97 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444', endColorstr='#2d2d2d', GradientType=0); 98 | -webkit-text-shadow: 0 1px 1px rgba(0,0,0,0.4); 99 | -moz-text-shadow: 0 1px 1px rgba(0,0,0,0.4); 100 | text-shadow: 0 1px 1px rgba(0,0,0,0.4); 101 | } 102 | .btn_black.active{ 103 | background: #333; 104 | background: -webkit-gradient(linear, left top, left bottom, from(#2d2d2d), to(#444)); 105 | background: -webkit-linear-gradient(top, #2d2d2d, #444); 106 | background: -moz-linear-gradient(top, #444, #2d2d2d); 107 | background: -ms-linear-gradient(top, #444, #2d2d2d); 108 | background: -o-linear-gradient(top, #444, #2d2d2d); 109 | background: linear-gradient(top, #444, #2d2d2d); 110 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444', endColorstr='#2d2d2d', GradientType=0); 111 | } 112 | .btn_blue{ 113 | border: 1px solid #044062; 114 | background: #396b9e; 115 | background: -webkit-gradient(linear, left top, left bottom, from(#5f9cc5), to(#396b9e)); 116 | background: -webkit-linear-gradient(top, #5f9cc5, #396b9e); 117 | background: -moz-linear-gradient(top,#5f9cc5, #396b9e); 118 | background: -ms-linear-gradient(top, #5f9cc5, #396b9e); 119 | background: -o-linear-gradient(top, #5f9cc5, #396b9e); 120 | background: linear-gradient(top, #5f9cc5, #396b9e); 121 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5f9cc5', endColorstr='#396b9e', GradientType=0); 122 | -webkit-text-shadow: 0 1px 1px #194b7e; 123 | -moz-text-shadow: 0 1px 1px #194b7e; 124 | text-shadow: 0 1px 1px #194b7e; 125 | } 126 | .btn_blue.active{ 127 | background: #5393c5; 128 | background: -webkit-gradient(linear, left top, left bottom, from(#5393c5), to(#6facd5)); 129 | background: -webkit-linear-gradient(top, #5393c5, #6facd5); 130 | background: -moz-linear-gradient(top, #5393c5, #6facd5); 131 | background: -ms-linear-gradient(top, #5393c5, #6facd5); 132 | background: -o-linear-gradient(top, #5393c5, #6facd5); 133 | background: linear-gradient(top, #5393c5, #6facd5); 134 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5393c5', endColorstr='#6facd5', GradientType=0); 135 | } 136 | /* 带icon的按钮 */ 137 | .btn_icon{ 138 | 139 | } 140 | .btn_icon > .left_icon,.btn_icon > .right_icon{ 141 | display: inline-block; 142 | width: 16px; 143 | height: 16px; 144 | position: absolute; 145 | top: 50%; 146 | margin: -8px 0 0 0; 147 | } 148 | .btn_icon > .left_icon{ 149 | left: 0.5em; 150 | } 151 | .btn_icon > .right_icon{ 152 | right: 0.5em; 153 | } 154 | .btn_white > .left_icon , .btn_white > .right_icon{ 155 | background: white; 156 | } 157 | .btn_green > .left_icon , .btn_green > .right_icon{ 158 | background: green; 159 | } 160 | .btn_black > .left_icon , .btn_black > .right_icon{ 161 | background: black; 162 | } 163 | .btn_blue > .left_icon , .btn_blue > .right_icon{ 164 | background: blue; 165 | } 166 | 167 | /* 按钮组 */ 168 | .btn_group{ 169 | width: 60%; 170 | } 171 | .btn_group:after { 172 | content:"."; 173 | display:block; 174 | height:0; 175 | clear:both; 176 | visibility:hidden; 177 | } 178 | .btn_group > .btn + .btn{ 179 | margin-left: -1px; 180 | } 181 | .btn_group > .btn{ 182 | width: 33.3%; 183 | float: left; 184 | display: inline-block; 185 | -webkit-border-radius: 0px; 186 | -moz-border-radius: 0px; 187 | border-radius: 0px; 188 | } 189 | .btn_group > .btn:first-child{ 190 | -webkit-border-radius: 8px 0 0 8px; 191 | -moz-border-radius: 8px 0 0 8px; 192 | border-radius: 8px 0 0 8px; 193 | 194 | } 195 | .btn_group > .btn:last-child{ 196 | -webkit-border-radius: 0 8px 8px 0; 197 | -moz-border-radius: 0 8px 8px 0; 198 | border-radius: 0 8px 8px 0; 199 | } 200 | 201 | .btn_group.vertical> .btn + .btn{ 202 | margin-left: 0; 203 | margin-top: -1px; 204 | } 205 | .btn_group.vertical > .btn{ 206 | width: 100%; 207 | } 208 | .btn_group.vertical > .btn:first-child{ 209 | -webkit-border-radius: 8px 8px 0 0; 210 | -moz-border-radius: 8px 8px 0 0; 211 | border-radius: 8px 8px 0 0; 212 | 213 | } 214 | .btn_group.vertical > .btn:last-child{ 215 | -webkit-border-radius: 0 0 8px 8px; 216 | -moz-border-radius: 0 0 8px 8px; 217 | border-radius: 0 0 8px 8px; 218 | 219 | } 220 | 221 | -------------------------------------------------------------------------------- /css/mui-checkbox.css: -------------------------------------------------------------------------------- 1 | /* 选择框 */ 2 | .checkbox{ 3 | position: relative; 4 | width: 20%; 5 | display: block; 6 | border: none; 7 | -webkit-border-radius: 8px; 8 | -moz-border-radius: 8px; 9 | border-radius: 8px; 10 | -webkit-text-shadow: 0 1px 1px rgba(0,0,0,0.4); 11 | -moz-text-shadow: 0 1px 1px rgba(0,0,0,0.4); 12 | text-shadow: 0 1px 1px rgba(0,0,0,0.4); 13 | -moz-user-select: none; 14 | -webkit-user-select: none; 15 | -ms-user-select: none; 16 | cursor: pointer; 17 | } 18 | .checkbox_white , .checkbox_group.vertical > .checkbox_white.checked { 19 | border: 1px solid #ccc; 20 | background: #eee; 21 | background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f1f1f1)); 22 | background: -webkit-linear-gradient(top, #fff, #f1f1f1); 23 | background: -moz-linear-gradient(top, #fff, #f1f1f1); 24 | background: -ms-linear-gradient(top, #fff, #f1f1f1); 25 | background: -o-linear-gradient(top, #fff, #f1f1f1); 26 | background: linear-gradient(top, #fff, #f1f1f1); 27 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#f1f1f1', GradientType=0); 28 | -webkit-text-shadow: 0 1px 1px #fff; 29 | -moz-text-shadow: 0 1px 1px #fff; 30 | text-shadow: 0 1px 1px #fff; 31 | } 32 | .checkbox_black , .checkbox_group.vertical > .checkbox_black.checked { 33 | border: 1px solid #111; 34 | background: #333; 35 | background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#2d2d2d)); 36 | background: -webkit-linear-gradient(top, #444, #2d2d2d); 37 | background: -moz-linear-gradient(top, #444, #2d2d2d); 38 | background: -ms-linear-gradient(top, #444, #2d2d2d); 39 | background: -o-linear-gradient(top, #444, #2d2d2d); 40 | background: linear-gradient(top, #444, #2d2d2d); 41 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444', endColorstr='#2d2d2d', GradientType=0); 42 | -webkit-text-shadow: 0 1px 1px #111; 43 | -moz-text-shadow: 0 1px 1px #111; 44 | text-shadow: 0 1px 1px #111; 45 | } 46 | .checkbox_white.checked,.checkbox_black.checked{ 47 | border: 1px solid #456f9a; 48 | background: #5393c5; 49 | background: -webkit-gradient(linear, left top, left bottom, from(#5393c5), to(#6facd5)); 50 | background: -webkit-linear-gradient(top, #5393c5, #6facd5); 51 | background: -moz-linear-gradient(top, #5393c5, #6facd5); 52 | background: -ms-linear-gradient(top, #5393c5, #6facd5); 53 | background: -o-linear-gradient(top, #5393c5, #6facd5); 54 | background: linear-gradient(top, #5393c5, #6facd5); 55 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5393c5', endColorstr='#6facd5', GradientType=0); 56 | } 57 | .checkbox_group.vertical > .checkbox_white.checked > .checkbox_text{ 58 | color: #333; 59 | } 60 | .checkbox input[type="checkbox"]{ 61 | display: none; 62 | } 63 | .checkbox_text{ 64 | display: block; 65 | padding: 0.7em 20px; 66 | font-size: 16px; 67 | font-weight: bold; 68 | text-align: center; 69 | text-overflow: ellipsis; 70 | overflow: hidden; 71 | white-space: nowrap; 72 | color: #333; 73 | } 74 | .checkbox_white.checked > .checkbox_text ,.checkbox_black > .checkbox_text{ 75 | color: #fff; 76 | } 77 | /* 选择框组 */ 78 | .checkbox_group{ 79 | width: 60%; 80 | } 81 | 82 | .checkbox_group > .checkbox + .checkbox{ 83 | margin-left: -1px; 84 | } 85 | .checkbox_group > .checkbox , .checkbox_group.vertical > .checkbox{ 86 | width: 32%; 87 | float: left; 88 | -webkit-border-radius: 0px; 89 | -moz-border-radius: 0px; 90 | border-radius: 0px; 91 | } 92 | .checkbox_group > .checkbox:first-child{ 93 | -webkit-border-radius: 8px 0 0 8px; 94 | -moz-border-radius: 8px 0 0 8px; 95 | border-radius: 8px 0 0 8px; 96 | 97 | } 98 | .checkbox_group > .checkbox:last-child{ 99 | -webkit-border-radius: 0 8px 8px 0; 100 | -moz-border-radius: 0 8px 8px 0; 101 | border-radius: 0 8px 8px 0; 102 | } 103 | .checkbox_group.vertical , .checkbox_group.vertical > .checkbox{ 104 | width: 100%; 105 | } 106 | .checkbox_group.vertical > .checkbox + .checkbox{ 107 | margin-left: 0; 108 | margin-top: -1px; 109 | } 110 | .checkbox_group.vertical > .checkbox:first-child{ 111 | -webkit-border-radius: 8px 8px 0 0; 112 | -moz-border-radius: 8px 8px 0 0; 113 | border-radius: 8px 8px 0 0; 114 | 115 | } 116 | .checkbox_group.vertical > .checkbox:last-child{ 117 | -webkit-border-radius: 0 0 8px 8px; 118 | -moz-border-radius: 0 0 8px 8px; 119 | border-radius: 0 0 8px 8px; 120 | } 121 | .checkbox_icon { 122 | position: absolute; 123 | left: 0.5em; 124 | width: 18px; 125 | height: 18px; 126 | top: 50%; 127 | margin: -9px 0 0 0; 128 | background: #fff; 129 | 130 | } 131 | .checkbox_white.checked > .checkbox_icon, .checkbox_black.checked > .checkbox_icon{ 132 | background: #5393c5; 133 | } 134 | 135 | -------------------------------------------------------------------------------- /css/mui-dialog.css: -------------------------------------------------------------------------------- 1 | .mask{ 2 | visibility: hidden; 3 | position: fixed; 4 | left: 0; 5 | top: 0; 6 | width: 100%; 7 | height: 100%; 8 | background: black; 9 | opacity: 0; 10 | 11 | } 12 | .dialog{ 13 | visibility: hidden; 14 | position: relative; 15 | width: 80%; 16 | max-width: 500px; 17 | margin: 10% auto 0; 18 | background: #fff; 19 | opacity: 0; 20 | -moz-border-radius: 5px; 21 | -webkit-border-radius: 5px; 22 | border-radius: 5px; 23 | overflow: hidden; 24 | } 25 | .dialog > .header{ 26 | background: #fadb4e; 27 | background: -webkit-gradient(linear, left top, left bottom, from( #fceda7), to( #fbef7e)); 28 | background: -webkit-linear-gradient( #fceda7, #fbef7e); 29 | background: -moz-linear-gradient( #fceda7, #fbef7e); 30 | background: -ms-linear-gradient( #fceda7, #fbef7e); 31 | background: -o-linear-gradient( #fceda7 , #fbef7e); 32 | background: linear-gradient( #fceda7, #fbef7e); 33 | } 34 | .header > h4{ 35 | text-align: center; 36 | padding: 0.6em 20px; 37 | color: #333; 38 | } 39 | -------------------------------------------------------------------------------- /css/mui-imageswitch.css: -------------------------------------------------------------------------------- 1 | .imagechange{ 2 | width: 300px; 3 | overflow: hidden; 4 | } 5 | .imagechange > .wrap > li{ 6 | height: 150px; 7 | float: left; 8 | outline: 1px solid white; 9 | border-radius: 5px; 10 | list-style-type: none; 11 | } 12 | .imagechange>.wrap img{ 13 | -webkit-border-radius: 10px; 14 | -moz-border-radius: 10px; 15 | -ms-border-radius: 10px; 16 | width: 100%; 17 | height: 100%; 18 | } 19 | .btnsWrap{ 20 | width: 100%; 21 | } 22 | .btnsWrap:after{ 23 | display:block; 24 | content: ""; 25 | clear: both; 26 | } 27 | .btnsWrap > li{ 28 | float: left; 29 | list-style-type: none; 30 | margin:10px 10px 0 0; 31 | width: 10px; 32 | height: 10px; 33 | -webkit-border-radius: 10px; 34 | -moz-border-radius: 10px; 35 | -ms-border-radius: 10px; 36 | border-radius: 10px; 37 | background: gray; 38 | } 39 | .btnsWrap > li.selected{ 40 | background: black; 41 | } -------------------------------------------------------------------------------- /css/mui-input.css: -------------------------------------------------------------------------------- 1 | .input , .icon_input{ 2 | background: none; 3 | padding: 0.8em; 4 | width: 100%; 5 | -moz-border-radius: .6em; 6 | -webkit-border-radius: .6em; 7 | border-radius: .6em; 8 | box-sizing: border-box; 9 | } 10 | .input_white , .icon_input_white{ 11 | color: #333; 12 | background: #f9f9f9; 13 | -moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2); 14 | -webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2); 15 | box-shadow: inset 0px 1px 4px rgba(0,0,0,.2); 16 | } 17 | 18 | .input_group{ 19 | 20 | } 21 | .input_group > .input , .icon_input_group > .icon_input{ 22 | -moz-border-radius: 0; 23 | -webkit-border-radius: 0; 24 | border-radius: 0; 25 | margin-top: -1px; 26 | } 27 | 28 | .input_group > .input:first-child , .icon_input_group > .icon_input:first-child{ 29 | -moz-border-radius: .6em .6em 0 0; 30 | -webkit-border-radius: .6em .6em 0 0; 31 | border-radius: .6em .6em 0 0; 32 | } 33 | .input_group > .input:last-child , .icon_input_group > .icon_input:last-child{ 34 | -moz-border-radius: 0 0 .6em .6em; 35 | -webkit-border-radius:0 0 .6em .6em; 36 | border-radius: 0 0 .6em .6em; 37 | } 38 | 39 | 40 | .icon_input{ 41 | position: relative; 42 | padding: 0 2em; 43 | } 44 | .icon_input > input{ 45 | background: none; 46 | width: 100%; 47 | padding: 0.8em 0; 48 | box-sizing: border-box; 49 | } 50 | .icon_input > .input_icon{ 51 | position: absolute; 52 | background: gray; 53 | width: 16px; 54 | height: 16px; 55 | left: 6px; 56 | top: 50%; 57 | margin-top: -8px; 58 | } 59 | .input_with_del_btn{ 60 | position: relative; 61 | } 62 | .input_del_btn{ 63 | display: none; 64 | position: absolute; 65 | top: 50%; 66 | margin-top: -12px; 67 | right: 12px; 68 | width: 24px; 69 | height: 24px; 70 | background: gray; 71 | -webkit-border-radius: 18px; 72 | -moz-border-radius: 18px; 73 | border-radius: 18px; 74 | } 75 | 76 | -------------------------------------------------------------------------------- /css/mui-list.css: -------------------------------------------------------------------------------- 1 | .list{ 2 | 3 | } 4 | .num_list{ 5 | counter-reset: listnumbering; 6 | } 7 | .num_list .list_text:before{ 8 | counter-increment: listnumbering; 9 | content: counter(listnumbering) ". "; 10 | } 11 | 12 | .read_only_list > .list_item{ 13 | cursor: default; 14 | } 15 | .list_item{ 16 | position: relative; 17 | margin-top: -1px; 18 | cursor: pointer; 19 | } 20 | .list_white{ 21 | 22 | } 23 | .list_white > li{ 24 | border: 1px solid #ccc; 25 | border-width: 1px; 26 | background: #f1f1f1; 27 | background: -webkit-gradient(linear, left top, left bottom, from( #fff ), to( #f1f1f1)); 28 | background: -webkit-linear-gradient( #fff , #f1f1f1); 29 | background: -moz-linear-gradient( #fff , #f1f1f1); 30 | background: -ms-linear-gradient( #fff , #f1f1f1); 31 | background: -o-linear-gradient( #fff , #f1f1f1); 32 | background: linear-gradient( #fff , #f1f1f1); 33 | } 34 | .list_white > li.selected{ 35 | border: 1px solid #2373a5; 36 | border-width: 1px; 37 | background: #5393c5; 38 | background: -webkit-gradient(linear, left top, left bottom, from( #5393c5), to( #6facd5)); 39 | background: -webkit-linear-gradient( #5393c5 , #6facd5); 40 | background: -moz-linear-gradient( #5393c5 , #6facd5); 41 | background: -ms-linear-gradient( #5393c5 , #6facd5); 42 | background: -o-linear-gradient( #5393c5 , #6facd5); 43 | background: linear-gradient( #5393c5 , #6facd5); 44 | 45 | } 46 | .list_white.read_only_list > li{ 47 | background: #eee; 48 | } 49 | .list_text{ 50 | display: block; 51 | padding: 0.7em 15px; 52 | font-weight: bold; 53 | text-overflow: ellipsis; 54 | white-space: nowrap; 55 | } 56 | .list_white > li >.list_text{ 57 | color: #333; 58 | } 59 | .list_white > li.selected > .list_text{ 60 | color: #fff; 61 | } 62 | 63 | .list_icon{ 64 | display: block; 65 | position: absolute; 66 | width: 18px; 67 | height: 18px; 68 | right: 20px; 69 | top: 50%; 70 | margin-top: -9px; 71 | background: gray; 72 | } 73 | .list_icon_left{ 74 | left: 20px; 75 | } 76 | .list_icon_left + .list_text{ 77 | padding-left:45px; 78 | } 79 | .list_icon_right{ 80 | right: 20px; 81 | } 82 | .group_list{ 83 | 84 | } 85 | .list_group_title{ 86 | cursor: pointer; 87 | } 88 | .list_group_title > h4{ 89 | display: block; 90 | padding: .5em 15px; 91 | font-size: 14px; 92 | } 93 | 94 | 95 | 96 | .list_group_blue_title{ 97 | border: 1px solid #456f9a; 98 | background: #5e87b0; 99 | background: -webkit-gradient(linear, left top, left bottom, from( #6facd5), to( #497bae)); 100 | background: -webkit-linear-gradient( #6facd5 , #497bae); 101 | background: -moz-linear-gradient( #6facd5, #497bae); 102 | background: -ms-linear-gradient( #6facd5 , #497bae); 103 | background: -o-linear-gradient( #6facd5, #497bae); 104 | background: linear-gradient( #6facd5, #497bae); 105 | } 106 | .list_group_white_title{ 107 | border: 1px solid #ccc; 108 | border-width: 1px; 109 | background: #f1f1f1; 110 | background: -webkit-gradient(linear, left top, left bottom, from( rgb(235, 235, 235)), to(rgb(211, 211, 211))); 111 | background: -webkit-linear-gradient(rgb(235, 235, 235) , rgb(211, 211, 211)); 112 | background: -moz-linear-gradient(rgb(235, 235, 235) , rgb(211, 211, 211)); 113 | background: -ms-linear-gradient(rgb(235, 235, 235) , rgb(211, 211, 211)); 114 | background: -o-linear-gradient(rgb(235, 235, 235) , rgb(211, 211, 211)); 115 | background: linear-gradient( rgb(235, 235, 235) , rgb(211, 211, 211)); 116 | } 117 | .list_group_blue_title > h4{ 118 | color: #fff; 119 | } 120 | .list_group_white_title > h4{ 121 | color: #333; 122 | } 123 | 124 | 125 | .list_white > .list_loading_tips , .list_white > .list_load_btn{ 126 | margin-top: -1px; 127 | padding: 10px 0; 128 | text-align: center; 129 | } 130 | .list_white > .list_loading_tips{ 131 | background: #eee; 132 | } -------------------------------------------------------------------------------- /css/mui-progress.css: -------------------------------------------------------------------------------- 1 | .progress{ 2 | position: relative; 3 | height: 24px; 4 | } 5 | /* wrap fixed overflow:hidden bug with border-radius */ 6 | .progress > .progress_wrap{ 7 | overflow:hidden; 8 | height:100%; 9 | -moz-border-radius: 1em; 10 | -webkit-border-radius: 1em; 11 | border-radius: 1em; 12 | border: 1px solid #AAA; 13 | } 14 | .progress .bar{ 15 | height: 100%; 16 | } 17 | .bar_image{ 18 | background: url('../images/pbar.gif'); 19 | } 20 | .bar_yellow{ 21 | background: #f2c43d; 22 | } 23 | .bar_blue{ 24 | background: #5393c5; 25 | } 26 | .bar_green{ 27 | background: #74b042; 28 | } 29 | .progress .bar_text 30 | { 31 | position: absolute; 32 | width: 100%; 33 | text-align: center; 34 | line-height: 24px; 35 | 36 | text-shadow: 1px 1px 0 #fff; 37 | font-weight: bold; 38 | color: #222222; 39 | } 40 | -------------------------------------------------------------------------------- /css/mui-radio.css: -------------------------------------------------------------------------------- 1 | /* 单选框 */ 2 | .radio{ 3 | position: relative; 4 | width: 20%; 5 | display: block; 6 | border: none; 7 | -webkit-border-radius: 8px; 8 | -moz-border-radius: 8px; 9 | border-radius: 8px; 10 | -webkit-text-shadow: 0 1px 1px rgba(0,0,0,0.4); 11 | -moz-text-shadow: 0 1px 1px rgba(0,0,0,0.4); 12 | text-shadow: 0 1px 1px rgba(0,0,0,0.4); 13 | -moz-user-select: none; 14 | -webkit-user-select: none; 15 | -ms-user-select: none; 16 | cursor: pointer; 17 | } 18 | .radio_white , .radio_group.vertical > .radio_white.checked { 19 | border: 1px solid #ccc; 20 | background: #eee; 21 | background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f1f1f1)); 22 | background: -webkit-linear-gradient(top, #fff, #f1f1f1); 23 | background: -moz-linear-gradient(top, #fff, #f1f1f1); 24 | background: -ms-linear-gradient(top, #fff, #f1f1f1); 25 | background: -o-linear-gradient(top, #fff, #f1f1f1); 26 | background: linear-gradient(top, #fff, #f1f1f1); 27 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#f1f1f1', GradientType=0); 28 | -webkit-text-shadow: 0 1px 1px #fff; 29 | -moz-text-shadow: 0 1px 1px #fff; 30 | text-shadow: 0 1px 1px #fff; 31 | } 32 | .radio_black , .radio_group.vertical > .radio_black.checked { 33 | border: 1px solid #111; 34 | background: #333; 35 | background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#2d2d2d)); 36 | background: -webkit-linear-gradient(top, #444, #2d2d2d); 37 | background: -moz-linear-gradient(top, #444, #2d2d2d); 38 | background: -ms-linear-gradient(top, #444, #2d2d2d); 39 | background: -o-linear-gradient(top, #444, #2d2d2d); 40 | background: linear-gradient(top, #444, #2d2d2d); 41 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444', endColorstr='#2d2d2d', GradientType=0); 42 | -webkit-text-shadow: 0 1px 1px #111; 43 | -moz-text-shadow: 0 1px 1px #111; 44 | text-shadow: 0 1px 1px #111; 45 | } 46 | .radio_white.checked ,.radio_black.checked { 47 | border: 1px solid #456f9a; 48 | background: #5393c5; 49 | background: -webkit-gradient(linear, left top, left bottom, from(#5393c5), to(#6facd5)); 50 | background: -webkit-linear-gradient(top, #5393c5, #6facd5); 51 | background: -moz-linear-gradient(top, #5393c5, #6facd5); 52 | background: -ms-linear-gradient(top, #5393c5, #6facd5); 53 | background: -o-linear-gradient(top, #5393c5, #6facd5); 54 | background: linear-gradient(top, #5393c5, #6facd5); 55 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5393c5', endColorstr='#6facd5', GradientType=0); 56 | } 57 | .radio_group.vertical > .radio_white.checked > .radio_text{ 58 | color: #333; 59 | } 60 | .radio input[type="radio"]{ 61 | display: none; 62 | } 63 | .radio_text{ 64 | display: block; 65 | padding: 0.7em 20px; 66 | font-size: 16px; 67 | font-weight: bold; 68 | text-align: center; 69 | text-overflow: ellipsis; 70 | overflow: hidden; 71 | white-space: nowrap; 72 | color: #333; 73 | } 74 | .radio_white.checked > .radio_text ,.radio_black > .radio_text{ 75 | color: #fff; 76 | } 77 | 78 | /* 选择框组 */ 79 | .radio_group{ 80 | width: 60%; 81 | } 82 | .radio_group > .radio + .radio{ 83 | margin-left: -1px; 84 | } 85 | .radio_group > .radio , .radio_group.vertical > .radio{ 86 | width: 32%; 87 | float: left; 88 | -webkit-border-radius: 0px; 89 | -moz-border-radius: 0px; 90 | border-radius: 0px; 91 | } 92 | .radio_group > .radio:first-child{ 93 | -webkit-border-radius: 8px 0 0 8px; 94 | -moz-border-radius: 8px 0 0 8px; 95 | border-radius: 8px 0 0 8px; 96 | 97 | } 98 | .radio_group > .radio:last-child{ 99 | -webkit-border-radius: 0 8px 8px 0; 100 | -moz-border-radius: 0 8px 8px 0; 101 | border-radius: 0 8px 8px 0; 102 | } 103 | .radio_group.vertical , .radio_group.vertical > .radio{ 104 | width: 100%; 105 | } 106 | .radio_group.vertical > .radio + .radio{ 107 | margin-left: 0; 108 | margin-top: -1px; 109 | } 110 | .radio_group.vertical > .radio:first-child{ 111 | -webkit-border-radius: 8px 8px 0 0; 112 | -moz-border-radius: 8px 8px 0 0; 113 | border-radius: 8px 8px 0 0; 114 | 115 | } 116 | .radio_group.vertical > .radio:last-child{ 117 | -webkit-border-radius: 0 0 8px 8px; 118 | -moz-border-radius: 0 0 8px 8px; 119 | border-radius: 0 0 8px 8px; 120 | } 121 | .radio_icon { 122 | position: absolute; 123 | left: 0.5em; 124 | width: 18px; 125 | height: 18px; 126 | top: 50%; 127 | margin: -9px 0 0 0; 128 | background: #fff; 129 | 130 | } 131 | .radio_white.checked > .radio_icon , .radio_black.checked > .radio_icon{ 132 | background: #5393c5; 133 | } 134 | 135 | -------------------------------------------------------------------------------- /css/mui-select.css: -------------------------------------------------------------------------------- 1 | /* 下拉菜单 */ 2 | .select{ 3 | display: block; 4 | position: relative; 5 | margin: .5em 0; 6 | padding: 0; 7 | -moz-border-radius: 1em; 8 | -webkit-border-radius: 1em; 9 | border-radius: 1em; 10 | text-align: center; 11 | font-weight: bold; 12 | -moz-box-shadow: 0px 1px 4px rgba(0,0,0,.3); 13 | -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, .3); 14 | box-shadow: 0px 1px 4px rgba(0, 0, 0, .3) ; 15 | } 16 | .select_text{ 17 | color: #fff; 18 | padding: .6em 20px; 19 | display: block; 20 | } 21 | .select_white{ 22 | border: 1px solid #CCC ; 23 | background: #EEE; 24 | background: -webkit-gradient(linear, left top, left bottom, from( white ), to( #F1F1F1)); 25 | background: -webkit-linear-gradient( white , #F1F1F1); 26 | background: -moz-linear-gradient( white , #F1F1F1 ); 27 | background: -ms-linear-gradient( white , #F1F1F1 ); 28 | background: -o-linear-gradient( white , #F1F1F1 ); 29 | background: linear-gradient( white , #F1F1F1 ); 30 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='#F1F1F1', GradientType=0) 31 | } 32 | .select_white > .select_text { 33 | color: #222; 34 | } 35 | 36 | .select_blue{ 37 | border: 1px solid #CCC ; 38 | background: #EEE; 39 | background: -webkit-gradient(linear, left top, left bottom, from( #5f9cc5 ), to( #396b9e)); 40 | background: -webkit-linear-gradient( #5f9cc5 , #396b9e); 41 | background: -moz-linear-gradient( #5f9cc5 , #396b9e ); 42 | background: -ms-linear-gradient( #5f9cc5 , #396b9e ); 43 | background: -o-linear-gradient( #5f9cc5 , #396b9e ); 44 | background: linear-gradient( #5f9cc5 , #396b9e ); 45 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5f9cc5', endColorstr='#396b9e', GradientType=0); 46 | } 47 | .select_black{ 48 | border: 1px solid #111; 49 | background: #333; 50 | background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#2d2d2d)); 51 | background: -webkit-linear-gradient(top, #444, #2d2d2d); 52 | background: -moz-linear-gradient(top, #444, #2d2d2d); 53 | background: -ms-linear-gradient(top, #444, #2d2d2d); 54 | background: -o-linear-gradient(top, #444, #2d2d2d); 55 | background: linear-gradient(top, #444, #2d2d2d); 56 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444', endColorstr='#2d2d2d', GradientType=0); 57 | } 58 | .select_green{ 59 | border: 1px solid #50a428; 60 | background: #6ebf47; 61 | background: -webkit-gradient(linear, left top, left bottom, from(#6ebf47), to(#5cb232)); 62 | background: -webkit-linear-gradient(top, #6ebf47, #5cb232); 63 | background: -moz-linear-gradient(top, #6ebf47, #5cb232); 64 | background: -ms-linear-gradient(top, #6ebf47, #5cb232); 65 | background: -o-linear-gradient(top, #6ebf47, #5cb232); 66 | background: linear-gradient(top, #6ebf47, #5cb232); 67 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6ebf47', endColorstr='#5cb232', GradientType=0); 68 | } 69 | 70 | .select > select{ 71 | width: 100%; 72 | height: 100%; 73 | left: 0; 74 | top: 0; 75 | position: absolute; 76 | opacity: 0; 77 | z-index: 2; 78 | cursor: pointer; 79 | } -------------------------------------------------------------------------------- /css/mui-slide.css: -------------------------------------------------------------------------------- 1 | .slide{ 2 | position: absolute; 3 | width: 100%; 4 | height: 100%; 5 | overflow-x:hidden; 6 | } 7 | .slide > .wrap{ 8 | height: 100%; 9 | } 10 | .slide > .wrap > li{ 11 | list-style-type: none; 12 | float: left; 13 | height: 100%; 14 | outline: 1px solid white; 15 | border-radius: 5px; 16 | overflow-x:hidden; 17 | } 18 | .slide > .wrap > li > div{ 19 | height: 100%; 20 | } -------------------------------------------------------------------------------- /css/mui-slider.css: -------------------------------------------------------------------------------- 1 | .slider{ 2 | position: relative; 3 | height: 14px; 4 | -moz-border-radius: 1em; 5 | -webkit-border-radius: 1em; 6 | border-radius: 1em; 7 | } 8 | .slider_white{ 9 | border: 1px solid #BBB; 10 | background: #D6D6D6; 11 | background: -webkit-gradient(linear, left top, left bottom, from( #D0D0D0), to( #DFDFDF)); 12 | background: -webkit-linear-gradient( #D0D0D0, #DFDFDF); 13 | background: -moz-linear-gradient( #D0D0D0, #DFDFDF); 14 | background: -ms-linear-gradient( #D0D0D0, #DFDFDF); 15 | background: -o-linear-gradient( #D0D0D0 , #DFDFDF); 16 | background: linear-gradient( #D0D0D0, #DFDFDF); 17 | } 18 | .slider > .slider_range{ 19 | height: 100%; 20 | width: 0; 21 | -moz-border-radius: 1em; 22 | -webkit-border-radius: 1em; 23 | border-radius: 1em; 24 | } 25 | .slider_range.white{ 26 | background: white; 27 | } 28 | .slider_range.blue{ 29 | background: #5393c5; 30 | } 31 | .slider_range.green{ 32 | background: #74b042; 33 | } 34 | .slider_white > a{ 35 | border: 1px solid #CCC; 36 | background: #EEE; 37 | background-image: -webkit-gradient(linear, left top, left bottom, from( white), to( #F1F1F1 )); 38 | background-image: -webkit-linear-gradient( white, #F1F1F1 ); 39 | background-image: -moz-linear-gradient( white, #F1F1F1); 40 | background-image: -ms-linear-gradient( white, #F1F1F1); 41 | background-image: -o-linear-gradient( white, #F1F1F1); 42 | background-image: linear-gradient( white, #F1F1F1); 43 | -moz-box-shadow: 0px 1px 4px rgba(0,0,0,.3) ; 44 | -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, .3); 45 | box-shadow: 0px 1px 4px rgba(0, 0, 0, .3) ; 46 | } 47 | 48 | .slider > a{ 49 | display: block; 50 | position: absolute; 51 | top: 50%; 52 | width: 28px; 53 | height: 28px; 54 | margin-top: -14px; 55 | -moz-border-radius: 14px; 56 | -webkit-border-radius: 14px; 57 | border-radius: 14px; 58 | z-index: 1; 59 | cursor: pointer; 60 | } 61 | .slider > input[type=range]{ 62 | display: none; 63 | } 64 | /* vertical */ 65 | .slider.vertical{ 66 | height: 200px; 67 | width: 14px; 68 | } 69 | .slider.vertical > a{ 70 | top: inherit; 71 | bottom: 0; 72 | left: 50%; 73 | margin: 0 0 0 -14px; 74 | } 75 | .slider.vertical > .slider_range{ 76 | position: absolute; 77 | bottom: 0; 78 | width: 100%; 79 | height: 0; 80 | } -------------------------------------------------------------------------------- /css/mui-swipechange.css: -------------------------------------------------------------------------------- 1 | .swipeChange{ 2 | position: absolute; 3 | width: 100%; 4 | height: 100%; 5 | overflow-x:hidden; 6 | } 7 | .swipeChange > .wrap{ 8 | height: 100%; 9 | } 10 | .swipeChange > .wrap > li{ 11 | float: left; 12 | height: 100%; 13 | outline: 1px solid white; 14 | border-radius: 5px; 15 | overflow-x:hidden; 16 | } 17 | .swipeChange > .wrap > li > div{ 18 | height: 100%; 19 | } -------------------------------------------------------------------------------- /css/mui-tab.css: -------------------------------------------------------------------------------- 1 | .tab{ 2 | overflow: hidden; 3 | /*width: 400px;*/ 4 | } 5 | .tab_head:after{ 6 | visibility: hidden; 7 | display: block; 8 | font-size: 0; 9 | content: " "; 10 | clear: both; 11 | height: 0; 12 | } 13 | .tab_head > li{ 14 | width: 25%; 15 | float: left; 16 | list-style-type: none; 17 | border-left: 1px solid white; 18 | border-right: 1px solid #d8d8d8; 19 | -webkit-box-sizing:border-box; 20 | -moz-box-sizing:border-box; 21 | box-sizing:border-box; 22 | text-align: center; 23 | } 24 | .tab_head > li:first-child,.tab_head > li:last-child{ 25 | border: none; 26 | } 27 | .tab_head > li.active{ 28 | margin: 0; 29 | background: #c2c2c2; 30 | background: -webkit-linear-gradient(top, #c2c2c2, #e5e5e5); 31 | background: -webkit-linear-gradient(top, #c2c2c2, #e5e5e5); 32 | background: -moz-linear-gradient(top, #c2c2c2, #e5e5e5); 33 | background: -ms-linear-gradient(top, #c2c2c2, #e5e5e5); 34 | background: -o-linear-gradient(top, #c2c2c2, #e5e5e5); 35 | background: linear-gradient(top, #c2c2c2, #e5e5e5); 36 | -webkit-box-shadow: inset 0 1px 1px #a4a4a4, inset 1px 0 1px #b2b2b2; 37 | -moz-box-shadow: inset 0 1px 1px #a4a4a4, inset 1px 0 1px #b2b2b2; 38 | box-shadow: inset 0 1px 1px #a4a4a4, inset 1px 0 1px #b2b2b2; 39 | } 40 | 41 | .tab_head{ 42 | height: 32px; 43 | border: 1px solid #afafaf; 44 | border-bottom-color:#d2d2d2; 45 | -webkit-border-radius:5px; 46 | -moz-border-radius:5px; 47 | border-radius:5px; 48 | padding:0 1px; 49 | font-size: 16px; 50 | line-height: 32px; 51 | background: #f1f1f1; 52 | background: -webkit-linear-gradient(top, #f1f1f1, #e5e5e5); 53 | background: -webkit-linear-gradient(top, #f1f1f1, #e5e5e5); 54 | background: -moz-linear-gradient(top, #f1f1f1, #e5e5e5); 55 | background: -ms-linear-gradient(top, #f1f1f1, #e5e5e5); 56 | background: -o-linear-gradient(top, #f1f1f1, #e5e5e5); 57 | background: linear-gradient(top, #f1f1f1, #e5e5e5); 58 | -webkit-box-shadow: inset 0 0 1px #cdcdcd, 0 1px 1px #fbfbfb; 59 | -moz-box-shadow: inset 0 0 1px #cdcdcd, 0 1px 1px #fbfbfb; 60 | box-shadow: inset 0 0 1px #cdcdcd, 0 1px 1px #fbfbfb; 61 | } 62 | 63 | .tab_body > li{ 64 | display: none; 65 | } 66 | /*.tab_body>li{ 67 | width: 25%; 68 | list-style-type: none; 69 | float: left; 70 | /*display: none;*/ 71 | /*}*/ 72 | 73 | .tab_animate > .tab_body , .tab_swipe > .tab_body{ 74 | width: 400%; 75 | } 76 | .tab_animate > .tab_body >li , .tab_swipe > .tab_body >li{ 77 | width: 25%; 78 | float: left; 79 | display: block; 80 | } -------------------------------------------------------------------------------- /css/mui-toggleswitch.css: -------------------------------------------------------------------------------- 1 | .toggle_switch{ 2 | display: inline-block; 3 | position: relative; 4 | width: 6em; 5 | -webkit-user-select:none; 6 | -webkit-tap-highlight-color:rgba(0,0,0,0); 7 | } 8 | .toggle_wrap{ 9 | -moz-border-radius: 3em; 10 | -webkit-border-radius: 3em; 11 | border-radius: 3em; 12 | overflow: hidden; 13 | } 14 | .toggle_text{ 15 | width: 200%; 16 | height: 100%; 17 | } 18 | .toggle_text > span{ 19 | width: 50%; 20 | height: 100%; 21 | float: left; 22 | text-align: center; 23 | font-weight: bold; 24 | -moz-border-radius: 3em; 25 | -webkit-border-radius: 3em; 26 | border-radius: 3em; 27 | line-height: 2.5em; 28 | 29 | } 30 | .toggle_text > span:first-child{ 31 | text-indent: -1.5em; 32 | cursor: pointer; 33 | 34 | } 35 | .toggle_text > span:last-child{ 36 | text-indent: 1.5em; 37 | margin-left: -2.5em; 38 | opacity: 0; 39 | } 40 | .toggle_text_blue{ 41 | color: #fff; 42 | /*border: 1px solid #2373A5;*/ 43 | background: #5393C5; 44 | background: -webkit-gradient(linear, left top, left bottom, from( #5393C5), to( #6FACD5)); 45 | background: -webkit-linear-gradient( #5393C5 , #6FACD5); 46 | background: -moz-linear-gradient( #5393C5, #6FACD5); 47 | background: -ms-linear-gradient( #5393C5 , #6FACD5); 48 | background: -o-linear-gradient( #5393C5, #6FACD5); 49 | background: linear-gradient( #5393C5, #6FACD5); 50 | } 51 | .toggle_text_white{ 52 | /* border: 1px solid #BBB;*/ 53 | color: #333; 54 | background: #D6D6D6; 55 | background: -webkit-gradient(linear, left top, left bottom, from( #D0D0D0), to( #DFDFDF)); 56 | background: -webkit-linear-gradient( #D0D0D0, #DFDFDF); 57 | background: -moz-linear-gradient( #D0D0D0, #DFDFDF); 58 | background: -ms-linear-gradient( #D0D0D0, #DFDFDF); 59 | background: -o-linear-gradient( #D0D0D0, #DFDFDF); 60 | background: linear-gradient( #D0D0D0, #DFDFDF); 61 | } 62 | .toggle_text_black{ 63 | color: #fff; 64 | background: #333; 65 | background: -webkit-gradient(linear, left top, left bottom, from(#202020), to(#2c2c2c)); 66 | background: -webkit-linear-gradient(top, #202020, #2c2c2c); 67 | background: -moz-linear-gradient(top, #202020, #2c2c2c); 68 | background: -ms-linear-gradient(top, #202020, #2c2c2c); 69 | background: -o-linear-gradient(top, #202020, #2c2c2c); 70 | background: linear-gradient(top, #202020, #2c2c2c); 71 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#202020', endColorstr='#2c2c2c', GradientType=0); 72 | } 73 | .toggle_text_deepblue{ 74 | color: #fff; 75 | background: #295b8e; 76 | background: -webkit-gradient(linear, left top, left bottom, from(#295b8e), to(#3e79b5)); 77 | background: -webkit-linear-gradient(top, #295b8e, #3e79b5); 78 | background: -moz-linear-gradient(top, #295b8e, #3e79b5); 79 | background: -ms-linear-gradient(top, #295b8e, #3e79b5); 80 | background: -o-linear-gradient(top, #295b8e, #3e79b5); 81 | background: linear-gradient(top, #295b8e, #3e79b5); 82 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#295b8e', endColorstr='#3e79b5', GradientType=0); 83 | } 84 | 85 | .toggle_handler{ 86 | -moz-border-radius: 3em; 87 | -webkit-border-radius: 3em; 88 | border-radius: 3em; 89 | display: block; 90 | position: absolute; 91 | right: 0.1em; 92 | top: 0.1em; 93 | width: 2.3em; 94 | height: 2.3em; 95 | z-index: 10; 96 | cursor: pointer; 97 | } 98 | .toggle_handler_white{ 99 | /*border: 1px solid #CCC;*/ 100 | background: #EEE; 101 | background: -webkit-gradient(linear, left top, left bottom, from( white ), to( #F1F1F1)); 102 | background: -webkit-linear-gradient( white, #F1F1F1); 103 | background: -moz-linear-gradient( white , #F1F1F1 ); 104 | background: -ms-linear-gradient( white , #F1F1F1 ); 105 | background: -o-linear-gradient( white , #F1F1F1 ); 106 | background: linear-gradient( white , #F1F1F1); 107 | 108 | -moz-box-shadow: 4px rgba(0,0,0,.3); 109 | -webkit-box-shadow:4px rgba(0, 0, 0, .3); 110 | box-shadow: 4px rgba(0, 0, 0, .3); 111 | } 112 | 113 | .toggle_handler_black{ 114 | background: #333; 115 | background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#383838)); 116 | background: -webkit-linear-gradient(top, #555, #383838); 117 | background: -moz-linear-gradient(top, #555, #383838); 118 | background: -ms-linear-gradient(top, #555, #383838); 119 | background: -o-linear-gradient(top, #555, #383838); 120 | background: linear-gradient(top, #555, #383838); 121 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555', endColorstr='#383838', GradientType=0); 122 | } 123 | .toggle_handler_blue{ 124 | background: #396b9e; 125 | background: -webkit-gradient(linear, left top, left bottom, from(#5f9cc5), to(#396b9e)); 126 | background: -webkit-linear-gradient(top, #5f9cc5, #396b9e); 127 | background: -moz-linear-gradient(top,#5f9cc5, #396b9e); 128 | background: -ms-linear-gradient(top, #5f9cc5, #396b9e); 129 | background: -o-linear-gradient(top, #5f9cc5, #396b9e); 130 | background: linear-gradient(top, #5f9cc5, #396b9e); 131 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5f9cc5', endColorstr='#396b9e', GradientType=0); 132 | } 133 | 134 | -------------------------------------------------------------------------------- /css/mui-toolbar.css: -------------------------------------------------------------------------------- 1 | .toolbar_header , .toolbar_footer{ 2 | } 3 | .header_black , .footer_black{ 4 | border: 1px solid #333; 5 | background: #111; 6 | color: #fff; 7 | font-weight: bold; 8 | text-shadow: 0 -1px #111; 9 | background: -webkit-gradient(linear, left top, left bottom, from( #3c3c3c), to( #111)); 10 | background: -webkit-linear-gradient( #3c3c3c , #111); 11 | background: -moz-linear-gradient( #3c3c3c , #111); 12 | background: -ms-linear-gradient( #3c3c3c , #111); 13 | background: -o-linear-gradient( #3c3c3c , #111); 14 | background: linear-gradient( #3c3c3c , #111); 15 | } 16 | .header_blue , .footer_blue{ 17 | border: 1px solid #456f9a; 18 | background: #5e87b0; 19 | color: #fff; 20 | font-weight: bold; 21 | text-shadow: 0 -1px #3e6790; 22 | background: -webkit-gradient(linear, left top, left bottom, from( #6facd5), to( #497bae)); 23 | background: -webkit-linear-gradient( #6facd5 , #497bae); 24 | background: -moz-linear-gradient( #6facd5 , #497bae); 25 | background: -ms-linear-gradient( #6facd5 , #497bae); 26 | background: -o-linear-gradient( #6facd5 , #497bae); 27 | background: linear-gradient( #6facd5 , #497bae); 28 | } 29 | .header_white , .footer_white{ 30 | border: 1px solid #bbb; 31 | background: #bbb; 32 | color: #333; 33 | font-weight: bold; 34 | text-shadow: 0 -1px #eee; 35 | background: -webkit-gradient(linear, left top, left bottom, from( #ddd), to( #bbb)); 36 | background: -webkit-linear-gradient( #ddd , #bbb); 37 | background: -moz-linear-gradient( #ddd , #bbb); 38 | background: -ms-linear-gradient( #ddd , #bbb); 39 | background: -o-linear-gradient( #ddd , #bbb); 40 | background: linear-gradient( #ddd , #bbb); 41 | } 42 | .toolbar_header > h1 , .toolbar_footer > h4{ 43 | font-size: 18px; 44 | text-align: center; 45 | padding: 0.6em 0.8em; 46 | } -------------------------------------------------------------------------------- /css/ui.css: -------------------------------------------------------------------------------- 1 | /* base */ 2 | *{ 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | body, 8 | input, 9 | textarea, 10 | select, 11 | button { 12 | font-family: Helvetica, Arial, san-serif; 13 | } 14 | a{ 15 | color: #2489ce; 16 | text-decoration: none; 17 | } 18 | 19 | /* 下拉菜单 */ 20 | .menuSelector{ 21 | display: block; 22 | text-align: center; 23 | 24 | position: relative; 25 | margin: .5em 0; 26 | padding: 0; 27 | -moz-box-shadow: 0px 1px 4px rgba(0,0,0,.3); 28 | -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, .3); 29 | box-shadow: 0px 1px 4px rgba(0, 0, 0, .3) ; 30 | -moz-border-radius: 1em; 31 | -webkit-border-radius: 1em; 32 | border-radius: 1em; 33 | 34 | border: 1px solid #CCC ; 35 | 36 | font-weight: bold; 37 | color: #222; 38 | text-shadow: 0 1px 0 white; 39 | background: #EEE; 40 | background-image: -webkit-gradient(linear, left top, left bottom, from( white ), to( #F1F1F1)); 41 | background-image: -webkit-linear-gradient( white , #F1F1F1); 42 | background-image: -moz-linear-gradient( white , #F1F1F1 ); 43 | background-image: -ms-linear-gradient( white , #F1F1F1 ); 44 | background-image: -o-linear-gradient( white , #F1F1F1 ); 45 | background-image: linear-gradient( white , #F1F1F1 ); 46 | 47 | } 48 | .menuSelector:after{ 49 | position: absolute; 50 | top: 8px; 51 | right: 8px; 52 | content: ""; 53 | display: block; 54 | width: 1.5em; 55 | height: 1.5em; 56 | background: #CCC6C6; 57 | border-radius: 1em; 58 | } 59 | .menuSelector span{ 60 | padding: .6em 20px; 61 | display: block; 62 | 63 | } 64 | .menuSelector select{ 65 | width: 100%; 66 | height: 100%; 67 | left: 0; 68 | top: 0; 69 | position: absolute; 70 | opacity: 0; 71 | z-index: 2; 72 | cursor: pointer; 73 | } 74 | 75 | 76 | /* radio列表 */ 77 | .radioButtonList{ 78 | border: none; 79 | margin-top: 30px; 80 | } 81 | .radioButtonList ul{ 82 | position: relative; 83 | 84 | } 85 | 86 | 87 | .radioButtonList li{ 88 | border: 1px solid #CCC; 89 | background: #EEE ; 90 | font-weight: bold; 91 | color: #222 ; 92 | text-shadow: 0 1px 0 white ; 93 | background-image: -webkit-gradient(linear, left top, left bottom, from( white), to( #F1F1F1)); 94 | background-image: -webkit-linear-gradient( white , #F1F1F1 ); 95 | background-image: -moz-linear-gradient( white, #F1F1F1 ); 96 | background-image: -ms-linear-gradient( white , #F1F1F1 ); 97 | background-image: -o-linear-gradient( white , #F1F1F1 ); 98 | background-image: linear-gradient( white , #F1F1F1); 99 | list-style-type: none; 100 | position: relative; 101 | } 102 | .radioButtonList li:before{ 103 | position: absolute; 104 | top: 12px; 105 | left: 1em; 106 | content: ""; 107 | display: block; 108 | width: 1em; 109 | height: 1em; 110 | background: #CCC6C6; 111 | border-radius: 1em; 112 | z-index: 2; 113 | } 114 | .radioButtonList li.checked:before{ 115 | background: #109EE0; 116 | } 117 | 118 | 119 | .radioButtonList li:first-child{ 120 | border-radius: .6em .6em 0 0; 121 | } 122 | .radioButtonList li:last-child{ 123 | border-radius: 0 0 .6em .6em; 124 | } 125 | .radioButtonList label{ 126 | width: 100%; 127 | height: 100%; 128 | position: absolute; 129 | left: 0; 130 | top: 0; 131 | cursor: pointer; 132 | 133 | } 134 | .radioButtonList span{ 135 | padding: 10px 40px; 136 | display: block; 137 | } 138 | .radioButtonList input{ 139 | position: absolute; 140 | left: 20px; 141 | top: 50%; 142 | width: 10px; 143 | height: 10px; 144 | margin: -5px 0 0 0; 145 | padding: 5px; 146 | opacity: 0; 147 | 148 | } 149 | 150 | 151 | /* slider */ 152 | .slider{ 153 | position: relative; 154 | height: 14px; 155 | margin-top: 30px; 156 | -moz-border-radius: 1em; 157 | -webkit-border-radius: 1em; 158 | border-radius: 1em; 159 | border: 1px solid #BBB; 160 | background: #D6D6D6; 161 | font-weight: bold;; 162 | background-image: -webkit-gradient(linear, left top, left bottom, from( #D0D0D0), to( #DFDFDF)); 163 | background-image: -webkit-linear-gradient( #D0D0D0, #DFDFDF); 164 | background-image: -moz-linear-gradient( #D0D0D0, #DFDFDF); 165 | background-image: -ms-linear-gradient( #D0D0D0, #DFDFDF); 166 | background-image: -o-linear-gradient( #D0D0D0 , #DFDFDF); 167 | background-image: linear-gradient( #D0D0D0, #DFDFDF); 168 | } 169 | 170 | .slider a{ 171 | position: absolute; 172 | z-index: 1; 173 | top: 50%; 174 | width: 28px; 175 | height: 28px; 176 | margin: -15px 0 0 -15px; 177 | outline: 0; 178 | display: block; 179 | 180 | -moz-border-radius: 1em; 181 | -webkit-border-radius: 1em; 182 | border-radius: 1em; 183 | border: 1px solid #CCC; 184 | 185 | background: #EEE; 186 | background-image: -webkit-gradient(linear, left top, left bottom, from( white), to( #F1F1F1 )); 187 | background-image: -webkit-linear-gradient( white, #F1F1F1 ); 188 | background-image: -moz-linear-gradient( white, #F1F1F1); 189 | background-image: -ms-linear-gradient( white, #F1F1F1); 190 | background-image: -o-linear-gradient( white, #F1F1F1); 191 | background-image: linear-gradient( white, #F1F1F1); 192 | -moz-box-shadow: 0px 1px 4px rgba(0,0,0,.3) ; 193 | -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, .3); 194 | box-shadow: 0px 1px 4px rgba(0, 0, 0, .3) ; 195 | 196 | 197 | } 198 | 199 | /* toggle switch */ 200 | .toggleSwitch{ 201 | width: 102px; 202 | height: 32px; 203 | margin: 20px; 204 | position: relative; 205 | 206 | } 207 | .toggleSwitch .wrap{ 208 | -moz-border-radius: 1em; 209 | -webkit-border-radius: 1em; 210 | border-radius: 1em; 211 | overflow: hidden; 212 | } 213 | .toggleSwitch .wrap div{ 214 | 215 | left: 0; 216 | top: 0; 217 | width: 200%; 218 | height: 100%; 219 | } 220 | .toggleSwitch span{ 221 | width: 100px; 222 | height: 30px; 223 | display: block; 224 | float: left; 225 | text-align: center; 226 | font-weight: bold; 227 | -moz-border-radius: 1em; 228 | -webkit-border-radius: 1em; 229 | border-radius: 1em; 230 | line-height: 30px; 231 | 232 | } 233 | .toggleSwitch span:first-child{ 234 | border: 1px solid #2373A5; 235 | background: #5393C5; 236 | color: white; 237 | cursor: pointer; 238 | text-indent: -1.5em; 239 | background-image: -webkit-gradient(linear, left top, left bottom, from( #5393C5), to( #6FACD5)); 240 | background-image: -webkit-linear-gradient( #5393C5 , #6FACD5); 241 | background-image: -moz-linear-gradient( #5393C5, #6FACD5); 242 | background-image: -ms-linear-gradient( #5393C5 , #6FACD5); 243 | background-image: -o-linear-gradient( #5393C5, #6FACD5); 244 | background-image: linear-gradient( #5393C5, #6FACD5); 245 | } 246 | .toggleSwitch span:last-child{ 247 | border: 1px solid #BBB; 248 | text-indent: 0; 249 | background: #D6D6D6; 250 | background-image: -webkit-gradient(linear, left top, left bottom, from( #D0D0D0), to( #DFDFDF)); 251 | background-image: -webkit-linear-gradient( #D0D0D0, #DFDFDF); 252 | background-image: -moz-linear-gradient( #D0D0D0, #DFDFDF); 253 | background-image: -ms-linear-gradient( #D0D0D0, #DFDFDF); 254 | background-image: -o-linear-gradient( #D0D0D0, #DFDFDF); 255 | background-image: linear-gradient( #D0D0D0, #DFDFDF); 256 | margin-left: -30px; 257 | } 258 | .toggleSwitch a{ 259 | -moz-border-radius: 1em; 260 | -webkit-border-radius: 1em; 261 | border-radius: 1em; 262 | display: block; 263 | position: absolute; 264 | left: 72px; 265 | 266 | top: 0; 267 | width: 30px; 268 | height: 30px; 269 | border: 1px solid #CCC; 270 | background: #EEE; 271 | background-image: -webkit-gradient(linear, left top, left bottom, from( white ), to( #F1F1F1)); 272 | background-image: -webkit-linear-gradient( white, #F1F1F1); 273 | background-image: -moz-linear-gradient( white , #F1F1F1 ); 274 | background-image: -ms-linear-gradient( white , #F1F1F1 ); 275 | background-image: -o-linear-gradient( white , #F1F1F1 ); 276 | background-image: linear-gradient( white , #F1F1F1); 277 | 278 | -moz-box-shadow: 4px rgba(0,0,0,.3); 279 | -webkit-box-shadow:4px rgba(0, 0, 0, .3); 280 | box-shadow: 4px rgba(0, 0, 0, .3); 281 | z-index: 99; 282 | } 283 | -------------------------------------------------------------------------------- /dialog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 18 | 19 | 20 |
21 |

Dialog Demo

22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
32 |
33 |

Dialog Header

34 |
35 |
36 |

37 | click me to hide 38 |

39 |
40 |
41 | 42 |
43 | 44 | 45 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /gesture.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 |

tap doubletap swipe drag transform hold等手势

19 |
20 |
21 |
22 | 25 | 26 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /imagechange.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Mobile Cookbook 5 | 6 | 7 | 8 | 9 | 21 | 22 | 23 |

图片切换

24 |
25 | 42 | 44 |
45 | 46 | 68 | 69 | 70 | 71 | 72 | 73 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /images/pbar.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlloyTeam/JMUI/f341a8fac8eb91ea552f672bcddeb588289432d2/images/pbar.gif -------------------------------------------------------------------------------- /input.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 18 | 19 | 20 |
21 |

text input

22 |

23 | 24 | 25 |

26 | 27 |

text input with delete button

28 |

29 |

30 | 31 | 32 |
33 |

34 | 35 |

auto grow textarea

36 |

37 | 38 |

39 |

text inputs in group

40 |

41 |

42 | 43 | 44 | 45 |
46 |

47 |

incon input

48 |

49 |

50 | 51 | 52 |
53 |

54 |

icon inputs in groups

55 |

56 |

57 |
58 | 59 | 60 |
61 |
62 | 63 | 64 |
65 |
66 | 67 | 68 |
69 |
70 |

71 | 72 | 73 |
74 | 75 | 76 | 77 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /js/animate_tab.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event; 4 | 5 | var isTouchDevice = J.platform.touchDevice; 6 | var touchEvt = isTouchDevice ? "tap":"click"; 7 | var AnimateTab = J.Class({extend:MUI.Tab},{ 8 | init:function(options){ 9 | 10 | 11 | this.tabBodySlide = MUI.Slide({ 12 | id:options.id, 13 | slideTime:options.slideTime || 1000, 14 | wrapClassName:"tab_body", 15 | fastChange:options.fastChange 16 | }); 17 | AnimateTab.callSuper(this,"init",options); 18 | 19 | }, 20 | _handleEvent:function(e){ 21 | AnimateTab.callSuper(this,"_handleEvent",e); 22 | var type = e.type; 23 | if(type == "changed"){ 24 | this._onBodySlideChanged(e); 25 | } 26 | }, 27 | bindHandlers:function(){ 28 | AnimateTab.callSuper(this,"bindHandlers"); 29 | var _handleEvent = this._handleEvent = J.bind(this._handleEvent,this); 30 | $E.on(this.tabBodySlide,"changed",_handleEvent); 31 | }, 32 | _onBodySlideChanged:function(e){ 33 | $E.fire(this,"changefinished",e); 34 | }, 35 | _setSelectedClass:function(selectedIndex){ 36 | var tabs = this.tabs; 37 | var currentIndex = this.currentIndex; 38 | if(currentIndex == selectedIndex) return; 39 | 40 | $D.removeClass(tabs[currentIndex],this.selectedClass); 41 | $D.addClass(tabs[selectedIndex],this.selectedClass); 42 | }, 43 | select:function(selectedIndex){ 44 | if(selectedIndex == this.currentIndex) return; 45 | AnimateTab.callSuper(this,"select",selectedIndex); 46 | this.tabBodySlide.slideTo(selectedIndex); 47 | }, 48 | destory:function(){ 49 | AnimateTab.callSuper(this,"destory"); 50 | $E.off(this.tabBodySlide,"changed",this._handleEvent); 51 | this.tabBodySlide.destory(); 52 | } 53 | 54 | }); 55 | this.AnimateTab = AnimateTab; 56 | }); -------------------------------------------------------------------------------- /js/autogrow_textarea.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event; 4 | 5 | var AutoGrowTextarea = J.Class({ 6 | init:function(options){ 7 | this.id = options.id; 8 | this.elem = $D.id(this.id); 9 | this.textLineHeight = parseInt(document.defaultView.getComputedStyle(this.elem,null).lineHeight) || 12; 10 | this.bindHandler(); 11 | $D.setStyle(this.elem ,"overflow" ,"hidden"); 12 | }, 13 | _handleEvent:function(e){ 14 | var type = e.type; 15 | if(type == "input"){ 16 | this._onInput(e); 17 | } 18 | }, 19 | bindHandler:function(){ 20 | var _handleEvent = this._handleEvent = J.bind(this._handleEvent,this); 21 | $E.on(this.elem ,"input",_handleEvent); 22 | }, 23 | _onInput:function(e){ 24 | var ele = this.elem; 25 | var clientHeight = ele.clientHeight; 26 | var scrollHeight = ele.scrollHeight; 27 | //textarea出现滚动条 28 | if(scrollHeight > clientHeight){ 29 | $D.setStyle(ele,"height" ,scrollHeight + this.textLineHeight + "px"); 30 | } 31 | }, 32 | destory:function(){ 33 | $E.off(this.elem,"input",this._handleEvent); 34 | $D.remove(this.elem); 35 | } 36 | }); 37 | this.AutoGrowTextarea = AutoGrowTextarea; 38 | }); -------------------------------------------------------------------------------- /js/autoload_list.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event; 4 | 5 | var AutoLoadList = J.Class({extend:MUI.List},{ 6 | init:function(options){ 7 | AutoLoadList.callSuper(this,"init",options); 8 | this.isLoading = false; 9 | this.loadingWord = options.loadingWord || "加载中..."; 10 | this.loadingTipsClassName = options.loadingTipsClassName || "list_loading_tips"; 11 | }, 12 | _handleEvent:function(e){ 13 | var type = e.type; 14 | AutoLoadList.callSuper(this,"handleEvent",e); 15 | if(type == "scrolltobottom"){ 16 | this._onScrollToBottom(e); 17 | return; 18 | } 19 | }, 20 | bindHandlers:function(){ 21 | AutoLoadList.callSuper(this,"bindHandlers"); 22 | var _handleEvent = this._handleEvent = J.bind(this._handleEvent,this); 23 | $E.on(window,"scrolltobottom",_handleEvent); 24 | }, 25 | _onScrollToBottom:function(e){ 26 | if(!this.isLoading){ 27 | this.loadData(); 28 | this.isLoading = true; 29 | } 30 | }, 31 | hideLoadingTips:function(){ 32 | this.elem.removeChild(this.loadingTips); 33 | }, 34 | showLoadingTips:function(){ 35 | if(!this.loadingTips){ 36 | var loadingTips = $D.node("li"); 37 | loadingTips.className = this.loadingTipsClassName; 38 | loadingTips.innerHTML = this.loadingWord; 39 | this.loadingTips = loadingTips; 40 | } 41 | this.elem.appendChild(this.loadingTips); 42 | }, 43 | loadData:function(){ 44 | this.showLoadingTips(); 45 | $E.fire(this,"loadingData"); 46 | //这里添加加载方法 47 | //... 48 | }, 49 | createLoadedList:function(data){ 50 | }, 51 | destory:function(){ 52 | AutoLoadList.callSuper(this,"destory"); 53 | $E.off(window,"scrolltobottom",this._handleEvent); 54 | } 55 | }); 56 | this.AutoLoadList = AutoLoadList; 57 | }); -------------------------------------------------------------------------------- /js/button.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event; 4 | var isTouchDevice = J.platform.touchDevice; 5 | 6 | var startEvt = isTouchDevice ? "touchstart" : "mousedown"; 7 | var moveEvt = isTouchDevice ? "touchmove" : "mousemove"; 8 | var endEvt = isTouchDevice ? "touchend" : "mouseup"; 9 | 10 | var Button = J.Class({ 11 | init:function(options){ 12 | this.elem = $D.id(options.id); 13 | this.activeClassName = options.activeClassName || "active"; 14 | this.disableClassName = options.disableClassName || "disable"; 15 | this.bindHandler(); 16 | }, 17 | _handleEvent:function(e){ 18 | switch (e.type) { 19 | case startEvt: this._onStartEvt(e); break; 20 | case moveEvt: this._onMoveEvt(e); break; 21 | case endEvt: this._onEndEvt(e); break; 22 | } 23 | }, 24 | _onStartEvt:function(e){debugger; 25 | if(this._disable) return; 26 | var b = this.elem; 27 | var activeClassName = this.activeClassName; 28 | if(!$D.hasClass(b,activeClassName)){ 29 | $D.addClass(b,activeClassName); 30 | } 31 | }, 32 | _onMoveEvt:function(e){ 33 | if(this._disable) return; 34 | e.preventDefault();//修复android touchend不触发的bug 35 | }, 36 | _onEndEvt:function(e){ 37 | if(this._disable) return; 38 | var b = this.elem; 39 | var activeClassName = this.activeClassName; 40 | if($D.hasClass(b,activeClassName)){ 41 | $D.removeClass(b,activeClassName); 42 | } 43 | 44 | }, 45 | bindHandler:function(){ 46 | var self = this; 47 | var b = this.elem; 48 | var _handleEvent = this._handleEvent = J.bind(this._handleEvent,this); 49 | 50 | $E.on(b,startEvt,_handleEvent); 51 | $E.on(b,moveEvt,_handleEvent); 52 | $E.on(document.body,endEvt,_handleEvent); 53 | }, 54 | _setEnable:function(enable){ 55 | $D[enable?"removeClass":"addClass"](this.elem,this.disableClassName); 56 | }, 57 | enable:function(){ 58 | this._disable = false; 59 | this._setEnable(true); 60 | }, 61 | disable:function(){ 62 | this._disable = true; 63 | this._setEnable(false); 64 | }, 65 | destory:function(){ 66 | var b = this.elem; 67 | $E.off(b,[startEvt,moveEvt,endEvt].join(" "),this._handleEvent); 68 | $D.remove(b); 69 | } 70 | }); 71 | this.Button = Button; 72 | 73 | }); -------------------------------------------------------------------------------- /js/buttonlist.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event, 4 | $T = J.type; 5 | var isTouchDevice = J.platform.touchDevice, 6 | startEvt, 7 | moveEvt, 8 | endEvt; 9 | 10 | isTouchDevice ? startEvt = "touchstart" : "mousedown"; 11 | isTouchDevice ? moveEvt = "touchmove" : "mousemove"; 12 | isTouchDevice ? endEvt = "touchend" : "mouseup"; 13 | 14 | 15 | var ButtonList = J.Class({ 16 | init:function(options){ 17 | this.elem = $D.id(options.id); 18 | this.list = $D.tagName("button" ,this.elem); 19 | this.activeClassName = options.activeClassName || "active"; 20 | this._initIndex(); 21 | this.bindHandlers(); 22 | }, 23 | _initIndex:function(){ 24 | var self = this; 25 | J.each(this.list,function(c,i){ 26 | c.setAttribute("_index",i); 27 | }); 28 | }, 29 | _onStart:function(e){ 30 | var target = e.target || e.srcElement; 31 | var activeClassName = this.activeClassName; 32 | var btn = target.parentNode; 33 | if(!$D.hasClass(btn,activeClassName)){ 34 | $D.addClass(btn,activeClassName); 35 | } 36 | }, 37 | _onEnd:function(e){ 38 | var target = e.target || e.srcElement; 39 | var activeClassName = this.activeClassName; 40 | var btn = target.parentNode; 41 | if($D.hasClass(btn,activeClassName)){ 42 | $D.removeClass(btn,activeClassName); 43 | } 44 | }, 45 | bindHandlers:function(){ 46 | var self = this; 47 | var ele = this.elem; 48 | $E.on(ele,startEvt,function(e){ 49 | self._onStart(e); 50 | }); 51 | $E.on(ele,moveEvt,function(e){ 52 | e.preventDefault();//修复android touchend不触发的bug 53 | }); 54 | $E.on(ele,endEvt,function(e){ 55 | self._onEnd(e); 56 | }); 57 | } 58 | }); 59 | this.ButtonList = ButtonList; 60 | }); -------------------------------------------------------------------------------- /js/checkbox.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event; 4 | 5 | var Checkbox = J.Class({ 6 | init:function(options){ 7 | this.elem = $D.id(options.id); 8 | this.checkboxElem = $D.$("input[type=checkbox]",this.elem)[0]; 9 | this.checked = this.checkboxElem.checked; 10 | this.value = this.checkboxElem.value; 11 | this.checkedClass = options.checkedClass || "checked"; 12 | this.bindHandler(); 13 | }, 14 | setValue:function(val){ 15 | this.checkboxElem.value = this.value = val; 16 | }, 17 | _handleEvent:function(e){ 18 | var type = e.type; 19 | if(type == "click"){ 20 | this._onChange(e); 21 | } 22 | }, 23 | bindHandler:function(){ 24 | var _handleEvent = this._handleEvent = J.bind(this._handleEvent,this); 25 | $E.on(this.checkboxElem,"click",_handleEvent); 26 | }, 27 | _onChange:function(e){ 28 | var target = e.target || e.srcElement; 29 | this._changeState(target.checked); 30 | }, 31 | check:function(){ 32 | this._changeState(true); 33 | }, 34 | uncheck:function(){ 35 | this._changeState(false); 36 | }, 37 | _changeState:function(checked){ 38 | if(this.checked == checked) return; 39 | 40 | var ele = this.elem; 41 | var checkedClass = this.checkedClass; 42 | this.checked = this.checkboxElem.checked = checked; 43 | 44 | if(checked){ 45 | $D.addClass(ele,checkedClass); 46 | } 47 | else{ 48 | $D.removeClass(ele,checkedClass); 49 | } 50 | $E.fire(this,"changed",{ 51 | checked:checked 52 | }); 53 | }, 54 | destory:function(){ 55 | $E.off(this.checkboxElem,"click",this._handleEvent); 56 | $D.remove(this.checkboxElem); 57 | } 58 | 59 | }); 60 | this.Checkbox = Checkbox; 61 | }); -------------------------------------------------------------------------------- /js/checkboxlist.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event, 4 | $T = J.type; 5 | 6 | var isCheckbox = function(elem){ 7 | return elem.tagName == "INPUT" && elem.type == "checkbox"; 8 | } 9 | 10 | 11 | var CheckboxList = J.Class({ 12 | init:function(options){ 13 | this.elem = $D.id(options.id); 14 | this.list = $D.$("input[type=checkbox]",this.elem); 15 | this.checkedClass = options.checkedClass || "checked"; 16 | this._initCheckboxes(); 17 | this.bindHandlers(); 18 | }, 19 | getSelectedCheckBoxes:function(){ 20 | var selectedArr = []; 21 | J.each(this.list ,function(c,i){ 22 | if(c.checked) selectedArr.push(c); 23 | }); 24 | return selectedArr; 25 | }, 26 | getCheckbox:function(index){ 27 | if($T.isNumber(index)){ 28 | return this.radioBtns[index]; 29 | } 30 | else if(isCheckbox(index)){ 31 | return index; 32 | } 33 | }, 34 | _initCheckboxes:function(){ 35 | var self = this; 36 | var checkedClass = this.checkedClass; 37 | J.each(this.list,function(c,i){ 38 | if(c.checked) $D.addClass(c.parentNode ,checkedClass); 39 | c.setAttribute("_index",i); 40 | }); 41 | }, 42 | _onClick:function(e,target){ 43 | var cp = target.parentNode; 44 | var checkedClass = this.checkedClass; 45 | if(target.checked){ 46 | $D.addClass(cp ,checkedClass); 47 | } 48 | else{ 49 | $D.removeClass(cp ,checkedClass); 50 | } 51 | 52 | $E.fire(this,"change",{ 53 | originalEventObj:e, 54 | checkboxChanged:target, 55 | index:parseInt(target.getAttribute("_index")) 56 | }); 57 | }, 58 | bindHandlers:function(){ 59 | var self = this; 60 | $E.on(this.elem,"click",function(e){ 61 | var target = e.target || e.srcElement; 62 | //避免点击label触发两次事件 63 | if(!isCheckbox(target)) return; 64 | self._onClick(e,target); 65 | }); 66 | } 67 | }); 68 | this.CheckboxList = CheckboxList; 69 | }); -------------------------------------------------------------------------------- /js/cnMobile0.js: -------------------------------------------------------------------------------- 1 | //base 2 | (function(){ 3 | var J={ 4 | $namespace: function(name) { 5 | if ( !name ) { 6 | return window; 7 | } 8 | 9 | nsArr = name.split("."); 10 | var ns=window; 11 | 12 | for(i = 0 , l = nsArr.length; i < l; i++){ 13 | var n = nsArr[i]; 14 | ns[n] = ns[n] || {}; 15 | ns = ns[n]; 16 | } 17 | 18 | return ns; 19 | }, 20 | $package:function(ns,func){ 21 | var target; 22 | if(typeof ns == "function"){ 23 | func=ns; 24 | target = window; 25 | } 26 | else if(typeof ns == "string"){ 27 | target = this.$namespace(ns); 28 | } 29 | else if(typeof ns == "object"){ 30 | target = ns; 31 | } 32 | func.call(target,this); 33 | }, 34 | extend:function(destination,source){ 35 | for(var n in source){ 36 | if(source.hasOwnProperty(n)){ 37 | destination[n]=source[n]; 38 | } 39 | } 40 | return destination; 41 | 42 | }, 43 | bind:function(func, context, var_args) { 44 | var slice = [].slice; 45 | var a = slice.call(arguments, 2); 46 | return function(){ 47 | return func.apply(context, a.concat(slice.call(arguments))); 48 | }; 49 | }, 50 | Class:function(){ 51 | var length = arguments.length; 52 | var option = arguments[length-1]; 53 | option.init = option.init || function(){}; 54 | 55 | if(length === 2){ 56 | var superClass = arguments[0].extend; 57 | 58 | var tempClass = function() {}; 59 | tempClass.prototype = superClass.prototype; 60 | 61 | var subClass = function() { 62 | this.init.apply(this, arguments); 63 | } 64 | 65 | subClass.superClass = superClass.prototype; 66 | subClass.callSuper = function(context,func){ 67 | var slice = Array.prototype.slice; 68 | var a = slice.call(arguments, 2); 69 | var func = subClass.superClass[func]; 70 | 71 | if(func){ 72 | func.apply(context, a.concat(slice.call(arguments))); 73 | } 74 | }; 75 | subClass.prototype = new tempClass(); 76 | subClass.prototype.constructor = subClass; 77 | 78 | J.extend(subClass.prototype, option); 79 | 80 | 81 | subClass.prototype.init = function(){ 82 | option.init.apply(this, arguments); 83 | }; 84 | return subClass; 85 | }else if(length === 1){ 86 | var newClass = function() { 87 | return this.init.apply(this, arguments); 88 | } 89 | newClass.prototype = option; 90 | return newClass; 91 | } 92 | }, 93 | indexOf:function(arr,elem){ 94 | var $T= J.type; 95 | //数组或类数组对象 96 | if(arr.length){ 97 | return [].indexOf.call(arr,elem); 98 | } 99 | else if($T.isObject(arr)){ 100 | for(var i in arr){ 101 | if(arr.hasOwnProperty(i) && arr[i] === elem){ 102 | return i; 103 | } 104 | } 105 | } 106 | }, 107 | every:function(arr,callback){ 108 | if(arr.length){ 109 | return [].every.call(arr,callback); 110 | } 111 | else if($T.isObject(arr)){ 112 | var flag = true; 113 | this.each(arr,function(e,i,arr){ 114 | if(!callback(e,i,arr)) flag = false; 115 | }); 116 | return flag; 117 | } 118 | }, 119 | some:function(arr,callback){ 120 | if(arr.length){ 121 | return [].some.call(arr,callback); 122 | } 123 | else if($T.isObject(arr)){ 124 | var flag = false; 125 | this.each(arr,function(e,i,arr){ 126 | if(callback(e,i,arr)) flag = true; 127 | }); 128 | return flag; 129 | } 130 | }, 131 | each:function(arr,callback){ 132 | var $T = J.type; 133 | if(arr.length){ 134 | [].forEach.call(arr,callback); 135 | } 136 | else if($T.isObject(arr)){ 137 | for(var i in arr){ 138 | if(arr.hasOwnProperty(i)) 139 | if(callback.call(arr[i],arr[i],i,arr) === false) return; 140 | } 141 | } 142 | }, 143 | map:function(arr,callback){ 144 | var $T = J.type; 145 | if(arr.length){ 146 | [].map.call(arr,callback); 147 | } 148 | else if($T.isObject(arr)){ 149 | for(var i in arr){ 150 | if(arr.hasOwnProperty(i)) 151 | arr[i] = callback.call(arr[i],arr[i],i,arr); 152 | } 153 | } 154 | }, 155 | filter:function(arr,callback){ 156 | var $T = J.type; 157 | if(arr.length){ 158 | return [].filter.call(arr,callback); 159 | } 160 | else if($T.isObject(arr)){ 161 | var newObj={}; 162 | this.each(arr,function(e,i){ 163 | if(callback(e,i)){ 164 | newObj[i] = e; 165 | } 166 | }); 167 | return newObj; 168 | } 169 | }, 170 | isEmptyObject:function(obj){ 171 | for(var n in obj){ 172 | return false; 173 | } 174 | return true; 175 | } 176 | 177 | } 178 | window.JM=window.J=J; 179 | })(); 180 | //connection 181 | J.$package(function(J){ 182 | var c = navigator.connection || {type:0}; 183 | var ct = ["unknow","ethernet","wifi","cell_2g","cell_3g"]; 184 | J.connectType = ct[c.type]; 185 | }); 186 | //type 187 | J.$package(function(J){ 188 | 189 | var ots=Object.prototype.toString; 190 | 191 | var type={ 192 | isArray : function(o){ 193 | return o && (o.constructor === Array || ots.call(o) === "[object Array]"); 194 | }, 195 | isObject : function(o) { 196 | return o && (o.constructor === Object || ots.call(o) === "[object Object]"); 197 | }, 198 | isBoolean : function(o) { 199 | return (o === false || o) && (o.constructor === Boolean); 200 | }, 201 | isNumber : function(o) { 202 | return (o === 0 || o) && o.constructor === Number; 203 | }, 204 | isUndefined : function(o) { 205 | return typeof(o) === "undefined"; 206 | }, 207 | isNull : function(o) { 208 | return o === null; 209 | }, 210 | isFunction : function(o) { 211 | return o && (o.constructor === Function); 212 | }, 213 | isString : function(o) { 214 | return (o === "" || o) && (o.constructor === String); 215 | } 216 | } 217 | J.type=type; 218 | }); 219 | //browser 220 | J.$package(function(J){ 221 | var ua = navigator.userAgent; 222 | var platform = {}; 223 | 224 | platform.android = ua.indexOf("Android") > -1 , 225 | platform.iPhone = ua.indexOf("iPhone") > -1 , 226 | platform.iPad = ua.indexOf("iPad") > -1 , 227 | platform.iPod = ua.indexOf("iPod") > -1 , 228 | platform.winPhone = ua.indexOf("IE") > -1 , 229 | platform.IOS = platform.iPad || platform.iPhone; 230 | platform.touchDevice = "ontouchstart" in window; 231 | 232 | J.platform = platform; 233 | }); 234 | //dom 235 | J.$package(function(J){ 236 | var doc = document, 237 | $T = J.type, 238 | tagNameExpr = /^[\w-]+$/, 239 | idExpr = /^#([\w-]*)$/, 240 | classExpr = /^\.([\w-]+)$/, 241 | selectorEngine; 242 | 243 | var hasClassListProperty = 'classList' in document.documentElement; 244 | var vendors = ['o', 'ms' ,'moz' ,'webkit']; 245 | var div = document.createElement('div'); 246 | 247 | var $D={ 248 | 249 | $:function(selector,context){ 250 | var result; 251 | var qsa; 252 | context = context || doc; 253 | 254 | //优先使用原始的 255 | if(idExpr.test(selector)) { 256 | result = this.id(selector.replace("#","")); 257 | if(result) return [result] ; 258 | else return [] ; 259 | } 260 | else if(tagNameExpr.test(selector)){ 261 | result = this.tagName(selector); 262 | } 263 | else if(classExpr.test(selector)){ 264 | result = this.className(selector.replace(".","")); 265 | } 266 | //自定义选择器 267 | else if(selectorEngine) result = selectorEngine(selector,context); 268 | //querySelectorAll 269 | else if(qsa=context.querySelectorAll) result = qsa.call(context,selector); 270 | else throw Error("querySelectorAll required"); 271 | 272 | //nodeList转为array 273 | return [].slice.call(result); 274 | 275 | }, 276 | id:function(id){ 277 | return doc.getElementById(id); 278 | }, 279 | tagName:function(tagName,context){ 280 | context=context||doc; 281 | return context.getElementsByTagName(tagName); 282 | }, 283 | className:function(className,context){ 284 | context=context||doc; 285 | return context.getElementsByClassName(className); 286 | }, 287 | setSelectorEngine:function(func){ 288 | selectorEngine=func; 289 | }, 290 | matchesSelector:function(ele,selector){ 291 | if(!ele || !selector) return; 292 | var matchesSelector = ele.webkitMatchesSelector || ele.mozMatchesSelector || ele.oMatchesSelector || ele.matchesSelector; 293 | if(matchesSelector) return matchesSelector.call(ele,selector); 294 | var list = this.$(selector); 295 | if(J.indexOf(list,ele) > 0) return true; 296 | return false; 297 | }, 298 | closest:function(elem,selector){ 299 | while(elem){ 300 | if($D.matchesSelector(elem,selector)){ 301 | return elem; 302 | } 303 | elem = elem.parentNode; 304 | } 305 | }, 306 | toDomStyle:function(cssStyle){ 307 | if(!$T.isString(cssStyle)) return; 308 | return cssStyle.replace(/\-[a-z]/g,function(m) { return m.charAt(1).toUpperCase(); }); 309 | }, 310 | toCssStyle:function(domStyle){ 311 | if(!$T.isString(domStyle)) return; 312 | return domStyle.replace(/[A-Z]/g, function(m) { return '-'+m.toLowerCase(); }); 313 | }, 314 | setStyle:function(elem ,styleName,styleValue){ 315 | var self = this; 316 | if($T.isArray(elem)){ 317 | J.each(elem ,function(e){ 318 | self.setStyle(e,styleName,styleValue); 319 | }); 320 | return; 321 | } 322 | if($T.isObject(styleName)){ 323 | for(var n in styleName){ 324 | if(styleName.hasOwnProperty(n)){ 325 | elem.style[n] = styleName[n]; 326 | } 327 | } 328 | return; 329 | } 330 | if($T.isString(styleName)){ 331 | elem.style[styleName] = styleValue; 332 | } 333 | }, 334 | //获取带有出产商的属性名 335 | getVendorPropertyName : function(prop) { 336 | var style = div.style; 337 | var _prop; 338 | if (prop in style) return prop; 339 | // _prop = prop; 340 | _prop = prop.charAt(0).toUpperCase() + prop.substr(1); 341 | for(var i = vendors.length; i--;){ 342 | var v = vendors[i]; 343 | var vendorProp = v + _prop; 344 | if (vendorProp in style) { 345 | return vendorProp; 346 | } 347 | } 348 | }, 349 | //检测是否支持3D属性 350 | isSupprot3d : function(){ 351 | // var transformStr = $D.getVendorPropertyName("transform"); 352 | // $D.setStyle(div ,transformStr ,"rotatex(90deg)"); 353 | // if(div.style[transformStr] == "") return false; 354 | // return true; 355 | var p_prop = $D.getVendorPropertyName("perspective"); 356 | return p_prop && p_prop in div.style; 357 | }, 358 | filterSelector:function(arr,selector){ 359 | return J.filter(arr,function(elem){ 360 | return $D.matchesSelector(elem,selector); 361 | }); 362 | }, 363 | addClass:function(){ 364 | if(hasClassListProperty){ 365 | return function (elem, className) { 366 | if (!elem || !className || $D.hasClass(elem, className)){ 367 | return; 368 | } 369 | elem.classList.add(className); 370 | }; 371 | } 372 | else{ 373 | return function(elem, className){ 374 | if (!elem || !className || $D.hasClass(elem, className)) { 375 | return; 376 | } 377 | elem.className += " "+ className; 378 | } 379 | } 380 | }(), 381 | hasClass:function(){ 382 | if (hasClassListProperty) { 383 | return function (elem, className) { 384 | if (!elem || !className) { 385 | return false; 386 | } 387 | return elem.classList.contains(className); 388 | }; 389 | } else { 390 | return function (elem, className) { 391 | if (!elem || !className) { 392 | return false; 393 | } 394 | return -1 < (' ' + elem.className + ' ').indexOf(' ' + className + ' '); 395 | }; 396 | } 397 | }(), 398 | removeClass:function(){ 399 | if (hasClassListProperty) { 400 | return function (elem, className) { 401 | if (!elem || !className || !$D.hasClass(elem, className)) { 402 | return; 403 | } 404 | elem.classList.remove(className); 405 | }; 406 | } else { 407 | return function (elem, className) { 408 | if (!elem || !className || !$D.hasClass(elem, className)) { 409 | return; 410 | } 411 | elem.className = elem.className.replace(new RegExp('(?:^|\\s)' + className + '(?:\\s|$)'), ' '); 412 | }; 413 | } 414 | }(), 415 | toggleClass:function(ele,className){ 416 | if($D.hasClass(ele,className)){ 417 | $D.removeClass(ele,className); 418 | } 419 | else{ 420 | $D.addClass(ele,className); 421 | } 422 | } 423 | }; 424 | 425 | J.dom=$D; 426 | }); 427 | 428 | //event 429 | J.$package(function(J){ 430 | 431 | var $T=J.type; 432 | 433 | var isDomEvent=function(obj,evtType){ 434 | //addEventListener supported by ie9+ 435 | return obj.addEventListener && "on" + evtType in obj; 436 | } 437 | 438 | var $E={ 439 | on:function(obj, evtType, handler){ 440 | if($T.isArray(obj)){ 441 | for(var i=obj.length;i--;){ 442 | $E.on(obj[i], evtType, handler); 443 | } 444 | } 445 | //evtType is a string split by space 446 | if($T.isString(evtType)&&evtType.indexOf(" ")>0){ 447 | evtType = evtType.split(" "); 448 | for(var i=evtType.length;i--;){ 449 | $E.on(obj, evtType[i], handler); 450 | } 451 | return; 452 | } 453 | //handler is an array 454 | if($T.isArray(handler)){ 455 | for(var i=handler.length;i--;){ 456 | $E.on(obj, evtType, handler[i]); 457 | } 458 | return; 459 | } 460 | //evtType is an object 461 | if($T.isObject(evtType)){ 462 | for(var eName in evtType){ 463 | $E.on(obj, eName, evtType[eName]); 464 | } 465 | return; 466 | } 467 | //is dom event may need fixed 468 | // if(domFixedEvent[evtType]){ 469 | // if(domFixedEvent[evtType](ele,handler)){ 470 | // return; 471 | // } 472 | // } 473 | //is dom event support 474 | if(isDomEvent(obj,evtType)){ 475 | obj.addEventListener(evtType ,handler ,false); 476 | return; 477 | } 478 | //is specific custom event 479 | if(customEvent[evtType]){ 480 | customEvent[evtType](obj,handler); 481 | return; 482 | } 483 | //other custom event 484 | if(!obj.events) obj.events={}; 485 | if(!obj.events[evtType]) obj.events[evtType]=[]; 486 | 487 | obj.events[evtType].push(handler); 488 | 489 | 490 | }, 491 | once:function(obj,evtType,handler){ 492 | var f = function(){ 493 | handler(); 494 | $E.off(obj ,evtType ,f); 495 | } 496 | $E.on(obj ,evtType ,f); 497 | }, 498 | off:function(obj,evtType,handler){ 499 | //evtType is a string split by space 500 | if($T.isString(evtType)&&evtType.indexOf(" ")>0){ 501 | evtType = evtType.split(" "); 502 | for(var i=evtType.length;i--;){ 503 | $E.off(obj, evtType[i], handler); 504 | } 505 | return; 506 | } 507 | //handler is an array 508 | if($T.isArray(handler)){ 509 | for(var i=handler.length;i--;){ 510 | $E.off(obj, evtType, handler[i]); 511 | } 512 | return; 513 | } 514 | //evtType is an object 515 | if($T.isObject(evtType)){ 516 | for(var eName in evtType){ 517 | $E.off(obj, eName, evtType[eName]); 518 | } 519 | return; 520 | } 521 | 522 | if(isDomEvent(obj,evtType)){ 523 | obj.removeEventListener( evtType , handler ,false ); 524 | return; 525 | } 526 | //is specific custom event 527 | if(customEvent[evtType]){ 528 | customEvent._off(obj,evtType,handler); 529 | return; 530 | } 531 | 532 | if(!evtType) { 533 | obj.events={}; 534 | return; 535 | } 536 | 537 | if(obj.events){ 538 | if(!handler) { 539 | obj.events[evtType]=[]; 540 | return; 541 | } 542 | if(obj.events[evtType]){ 543 | var evtArr=obj.events[evtType]; 544 | for(var i=evtArr.length;i--;){ 545 | if(evtArr[i]==handler){ 546 | evtArr.splice(i,1); 547 | return; 548 | } 549 | } 550 | } 551 | } 552 | }, 553 | fire:function(obj,evtType){ 554 | var arg = [].slice.call(arguments,2); 555 | //obj is dom element 556 | if(isDomEvent(obj,evtType)){ 557 | var evt = document.createEvent('HTMLEvents'); 558 | evt.initEvent(evtType, true, true); 559 | obj.dispatchEvent(evt); 560 | return; 561 | } 562 | if(obj.events&&obj.events[evtType]){ 563 | var handler=obj.events[evtType]; 564 | for(var i=0,l=handler.length;i -45) return "right"; 773 | if(angle >= 45 && angle < 135) return "top"; 774 | if(angle >= 135 || angle < -135) return "left"; 775 | if(angle >= -135 && angle <= -45) return "bottom"; 776 | 777 | } 778 | var startEvtHandler = function(e){ 779 | var touches = e.touches; 780 | if(!touches || touches.length == 1){//鼠标点击或者单指点击 781 | pt_pos = ct_pos = getTouchPos(e); 782 | pt_time = Date.now(); 783 | 784 | } 785 | } 786 | var moveEvtHandler = function(e){ 787 | e.preventDefault(); 788 | ct_pos = getTouchPos(e); 789 | } 790 | var endEvtHandler = function(e){ 791 | var dir; 792 | pt_up_pos = ct_pos; 793 | pt_up_time = Date.now(); 794 | 795 | if(getDist(pt_pos,pt_up_pos) > SWIPE_DISTANCE && pt_up_time - pt_time < SWIPE_TIME){ 796 | dir = getSwipeDirection(pt_up_pos,pt_pos); 797 | handler.call(ele,{ 798 | oriEvt:e, 799 | type:"swipe", 800 | direction:dir 801 | }); 802 | } 803 | } 804 | $E.on(ele,startEvt,startEvtHandler); 805 | $E.on(ele,moveEvt,moveEvtHandler); 806 | $E.on(ele,endEvt,endEvtHandler); 807 | 808 | var evtOpt = { 809 | ele:ele, 810 | evtType:"swipe", 811 | handler:handler 812 | } 813 | evtOpt.actions = {}; 814 | evtOpt.actions[startEvt] = startEvtHandler; 815 | evtOpt.actions[moveEvt] = moveEvtHandler; 816 | evtOpt.actions[endEvt] = endEvtHandler; 817 | 818 | customEventHandlers.push(evtOpt); 819 | }, 820 | transform:function(ele,handler){ 821 | var pt_pos1; 822 | var pt_pos2; 823 | var pt_len;//初始两指距离 824 | var pt_angle;//初始两指所成角度 825 | var startEvtHandler = function(e){ 826 | var touches = e.touches; 827 | if(!touches) return; 828 | 829 | if(touches.length == 2){//双指点击 830 | pt_pos1 = getTouchPos( e.touches[0]); 831 | pt_pos2 = getTouchPos( e.touches[1]); 832 | pt_len = getDist(pt_pos1,pt_pos2); 833 | pt_angle = getAngle(pt_pos1,pt_pos2); 834 | } 835 | } 836 | var moveEvtHandler = function(e){ 837 | e.preventDefault(); 838 | var touches = e.touches; 839 | if(!touches) return; 840 | if(touches.length == 2){//双指点击 841 | 842 | var ct_pos1 = getTouchPos( e.touches[0]); 843 | var ct_pos2 = getTouchPos( e.touches[1]); 844 | var ct_len = getDist(ct_pos1 , ct_pos2); 845 | var ct_angle = getAngle(ct_pos1,ct_pos2); 846 | var scale = ct_len / pt_len; 847 | var rotate = ct_angle - pt_angle; 848 | 849 | handler.call(ele,{ 850 | oriEvt:e, 851 | type:"transform", 852 | scale:scale, 853 | rotate:rotate 854 | }); 855 | } 856 | } 857 | 858 | $E.on(ele,startEvt,startEvtHandler); 859 | $E.on(ele,moveEvt,moveEvtHandler); 860 | var evtOpt = { 861 | ele:ele, 862 | evtType:"transform", 863 | handler:handler 864 | } 865 | evtOpt.actions = {}; 866 | evtOpt.actions[startEvt] = startEvtHandler; 867 | evtOpt.actions[moveEvt] = moveEvtHandler; 868 | 869 | customEventHandlers.push(evtOpt); 870 | }, 871 | scrollstart:function(ele,handler){ 872 | var isScrolling; 873 | var scrollTimeId; 874 | var scrollHandler = function(e){ 875 | if(!isScrolling){ 876 | isScrolling = true; 877 | handler.call(ele,{ 878 | oriEvt:e, 879 | type:"scrollstart" 880 | }); 881 | } 882 | clearTimeout(scrollTimeId); 883 | scrollTimeId = setTimeout(function(){ 884 | isScrolling = false; 885 | },250); 886 | } 887 | $E.on(ele,"scroll",scrollHandler); 888 | 889 | var evtOpt = { 890 | ele:ele, 891 | evtType:"scrollstart", 892 | handler:handler 893 | }; 894 | evtOpt.actions = {}; 895 | evtOpt.actions["scroll"] = scrollHandler; 896 | customEventHandlers.push(evtOpt); 897 | }, 898 | scrollend:function(ele,handler){ 899 | var scrollTimeId; 900 | var scrollHandler = function(e){ 901 | clearTimeout(scrollTimeId); 902 | scrollTimeId = setTimeout(function(){ 903 | handler.call(ele,{ 904 | oriEvt:e, 905 | type:"scrollend" 906 | }); 907 | },250); 908 | } 909 | $E.on(ele,"scroll",scrollHandler); 910 | 911 | var evtOpt = { 912 | ele:ele, 913 | evtType:"scrollend", 914 | handler:handler 915 | }; 916 | evtOpt.actions = {}; 917 | evtOpt.actions["scroll"] = scrollHandler; 918 | customEventHandlers.push(evtOpt); 919 | } 920 | 921 | } 922 | // var fixedEventHandlers = []; 923 | 924 | // var resizeHandler = function(e){ 925 | // var p = window.innerWidth / window.innerHeight; 926 | // p > 1 ? window.orientation = 90 : window.orientation = 0; 927 | // handler.call(window); 928 | // } 929 | // //dom事件修复 930 | // var domFixedEvent = { 931 | // _off:function(ele,evtType,handler){ 932 | // if(evtType == "orientationchange"){ 933 | // if(ele != window) return; 934 | // $E.off(window,"resize",resizeHandler); 935 | // } 936 | // }, 937 | // orientationchange:function(ele,handler){ 938 | // //对window的orientationchange进行fix 939 | // if(ele != window || "onorientationchange" in ele){ 940 | // return false; 941 | // } 942 | // $E.on(ele,"resize",resizeHandler); 943 | // return true; 944 | // } 945 | // } 946 | 947 | J.event = $E; 948 | }); 949 | //Util 950 | J.$package(function(J){ 951 | var $D = J.dom, 952 | $E = J.event, 953 | $T = J.type; 954 | var preventScroll = function(e){ 955 | if (e.target.type === 'range') { return; } 956 | e.preventDefault(); 957 | } 958 | var hideScroll = function(){ 959 | setTimeout(function(){ 960 | if(!location.hash){ 961 | var ph = window.innerHeight + 60; 962 | if(document.documentElement.clientHeight < ph){ 963 | $D.setStyle(document.body,"minHeight",ph + "px"); 964 | } 965 | window.scrollTo(0,1); 966 | } 967 | },200); 968 | } 969 | 970 | 971 | var Util = { 972 | //隐藏URL栏 973 | hideUrlBar:function(){ 974 | $E.on(window ,"load" ,hideScroll); 975 | }, 976 | //禁止滚动 977 | preventScrolling : function() { 978 | $E.on(document ,'touchmove' ,preventScroll); 979 | }, 980 | //启用滚动 981 | activeScrolling:function(){ 982 | $E.off(document ,'touchmove' ,preventScroll); 983 | }, 984 | //滚动到顶部动画(css3动画) 985 | scrollToTop:function(duration,runType){ 986 | var $A = J.Animation; 987 | var body = document.body; 988 | var scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; 989 | 990 | $D.setStyle(body, $D.getVendorPropertyName("transform"), "translate3d(0,"+ (- scrollTop) + "px,0)"); 991 | body.scrollTop ? body.scrollTop = 0:document.documentElement.scrollTop = 0; 992 | 993 | new $A({ 994 | selector:body, 995 | duration:duration, 996 | runType:runType, 997 | use3d:true 998 | }).translateY(0).transit(); 999 | 1000 | } 1001 | }; 1002 | J.Util = Util; 1003 | }); 1004 | 1005 | //animation time, runType ,scale, rotate, rotateX, rotateY, translateX, translateY, skewX, skewY 1006 | J.$package(function(J){ 1007 | var $D = J.dom, 1008 | $E = J.event, 1009 | $T = J.type; 1010 | 1011 | //3d支持 1012 | var support3d = $D.isSupprot3d(); 1013 | var finishedCount = 0; 1014 | 1015 | var Animation = J.Class({ 1016 | init:function(options){ 1017 | 1018 | this.setElems(options.selector); 1019 | this.setDuration(options.duration || 1000); 1020 | this.setRunType(options.runType || "ease-in-out"); 1021 | this.setDelay(options.delay || 0); 1022 | this.setUsed3d(options.use3d); 1023 | this.transformArr = []; 1024 | }, 1025 | setDuration:function(duration){ 1026 | this.duration = duration; 1027 | return this; 1028 | }, 1029 | setDelay:function(delay){ 1030 | this.delay = delay; 1031 | return this; 1032 | }, 1033 | setElems:function(selector){ 1034 | if($T.isString(selector)){ 1035 | this.elems = $D.$(selector); 1036 | } 1037 | else if($T.isArray(selector)){ 1038 | this.elems = selector; 1039 | } 1040 | else if(selector.tagName){ 1041 | this.elems = [selector]; 1042 | } 1043 | return this; 1044 | }, 1045 | setRunType:function(runType){ 1046 | this.runType = runType; 1047 | return this; 1048 | }, 1049 | setUsed3d:function(use3d){ 1050 | this.use3d = use3d; 1051 | return this; 1052 | }, 1053 | scale:function(scale){ 1054 | this.transformArr.push("scale(" + scale + ")"); 1055 | return this; 1056 | }, 1057 | scaleX:function(scaleX){ 1058 | this.transformArr.push("scalex(" + scaleX + ")"); 1059 | return this; 1060 | }, 1061 | scaleY:function(scaleY){ 1062 | this.transformArr.push("scaley(" + scaleY + ")"); 1063 | return this; 1064 | }, 1065 | rotate:function(rotate){ 1066 | this.transformArr.push("rotate(" + rotate + "deg)"); 1067 | return this; 1068 | }, 1069 | rotateX:function(rotateX){ 1070 | this.transformArr.push("rotatex(" + rotateX + "deg)"); 1071 | return this; 1072 | }, 1073 | rotateY:function(rotateX){ 1074 | this.transformArr.push("rotatey(" + rotateY + "deg)"); 1075 | return this; 1076 | }, 1077 | rotateZ:function(rotateZ){ 1078 | this.transformArr.push("rotatez(" + rotateZ + "deg)"); 1079 | return this; 1080 | }, 1081 | translate:function(translateX,translateY,translateZ){ 1082 | if(support3d && translateZ) 1083 | this.transformArr.push("translate3d" + '(' + translateX + ',' + translateY + ','+ translateZ +')'); 1084 | else 1085 | this.transformArr.push("translate" + '(' + translateX + ',' + translateY + ')'); 1086 | return this; 1087 | }, 1088 | translateX:function(translateX){ 1089 | this.translate(translateX,0); 1090 | return this; 1091 | }, 1092 | translateY:function(translateY){ 1093 | this.translate(0,translateY); 1094 | return this; 1095 | }, 1096 | skew:function(x,y){ 1097 | this.transformArr.push("skew(" + x + "deg," + y + "deg)"); 1098 | return this; 1099 | }, 1100 | skewX:function(x){ 1101 | this.transformArr.push("skewx(" + x + "deg)"); 1102 | return this; 1103 | }, 1104 | skewY:function(y){ 1105 | this.transformArr.push("skewy(" + y + "deg)"); 1106 | return this; 1107 | }, 1108 | setStyle:function(styleName,styleValue){ 1109 | var s = ""; 1110 | if($T.isUndefined(this.styleStr)) this.styleStr = ""; 1111 | //样式变化 1112 | if($T.isObject(styleName)){ 1113 | J.each(styleName ,function(sv,sn){ 1114 | s += $D.toCssStyle($D.getVendorPropertyName(sn)) + ":" + sv + ";"; 1115 | }); 1116 | } 1117 | else if($T.isString(styleName)){ 1118 | s += $D.toCssStyle($D.getVendorPropertyName(styleName)) + ":" + styleValue + ";"; 1119 | } 1120 | this.styleStr += s; 1121 | return this; 1122 | 1123 | }, 1124 | toOrigin:function(){ 1125 | this.transformArr = []; 1126 | return this; 1127 | }, 1128 | transit:function(onFinished){ 1129 | var self = this; 1130 | var elems = this.elems; 1131 | J.each(elems ,function(e){ 1132 | self._transit(e); 1133 | }); 1134 | window.setTimeout(function(){ 1135 | $E.fire(self,"end"); 1136 | J.each(elems,function(elem){ 1137 | $D.setStyle(elem ,$D.getVendorPropertyName("transition") ,""); 1138 | }); 1139 | onFinished && onFinished.call(self); 1140 | },this.duration); 1141 | return this; 1142 | }, 1143 | _transit:function(elem){ 1144 | 1145 | var self = this; 1146 | var transformStr = this.transformArr.join(" "); 1147 | if(support3d && this.use3d){ 1148 | transformStr += " translatez(0)"; 1149 | } 1150 | 1151 | var aStr = "all" 1152 | + ' ' + this.duration/1000 + 's ' 1153 | + this.runType 1154 | + ' ' + this.delay/1000 + 's'; 1155 | 1156 | $D.setStyle(elem ,$D.getVendorPropertyName("transition") ,aStr); 1157 | 1158 | elem.style[$D.getVendorPropertyName("transform")] = transformStr; 1159 | elem.style.cssText += this.styleStr; 1160 | 1161 | $E.fire(this ,"start"); 1162 | } 1163 | }); 1164 | J.Animation = Animation; 1165 | }); 1166 | 1167 | //http 1168 | J.$package(function(J){ 1169 | var http = { 1170 | serializeParam : function ( param ) { 1171 | if ( !param ) return ''; 1172 | var qstr = []; 1173 | for ( var key in param ) { 1174 | qstr.push( encodeURIComponent(key) + '=' + encodeURIComponent(param[key]) ); 1175 | }; 1176 | return qstr.join('&'); 1177 | }, 1178 | getUrlParam : function ( name ,href ,noDecode ) { 1179 | var re = new RegExp( '(?:\\?|#|&)' + name + '=([^&]*)(?:$|&|#)', 'i' ), m = re.exec( href ); 1180 | var ret = m ? m[1] : '' ; 1181 | return !noDecode ? decodeURIComponent( ret ) : ret; 1182 | }, 1183 | ajax : function ( option ) { 1184 | var o = option; 1185 | var m = o.method.toLocaleUpperCase(); 1186 | var isPost = 'POST' == m; 1187 | var isComplete = false; 1188 | var overtime = o.overtime; 1189 | 1190 | var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : false; 1191 | if ( !xhr ) { 1192 | o.error && o.error.call( null, { ret : 999 , msg : 'Create XHR Error!' } ); 1193 | return false; 1194 | } 1195 | 1196 | var qstr = http.serializeParam( o.param ); 1197 | 1198 | // get 请求 参数处理 1199 | !isPost && ( o.url += ( o.url.indexOf( '?' ) > -1 ? '&' : '?' ) + qstr ); 1200 | 1201 | xhr.open( m, o.url, true ); 1202 | 1203 | isPost && xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' ); 1204 | 1205 | xhr.onreadystatechange = function(){ 1206 | if ( 4 == xhr.readyState ) { 1207 | var status = xhr.status; 1208 | if ( (status >= 200 && status < 300) || status == 304) { 1209 | var response = xhr.responseText.replace( /(\r|\n|\t)/gi, '' ); 1210 | // var m = /callback\((.+)\)/gi.exec( response ); 1211 | // var result = { ret : 998, msg : '解析数据出错，请稍后再试' }; 1212 | // try{ result = eval( '(' + m[1] + ')' ) } catch ( e ) {}; 1213 | // result = eval( '(' + m[1] + ')' ) 1214 | o.success && o.success(JSON.parse(response),xhr); 1215 | }else{ 1216 | o.error && o.error(xhr); 1217 | }; 1218 | isComplete = true; 1219 | } 1220 | 1221 | }; 1222 | 1223 | 1224 | xhr.send( isPost ? qstr : void(0) ); 1225 | 1226 | if(overtime){ 1227 | setTimeout(function(){ 1228 | if(!isComplete){ 1229 | xhr.abort();//不abort同一url无法重新发送请求？ 1230 | o.timeout && o.timeout(xhr); 1231 | } 1232 | },overtime); 1233 | } 1234 | 1235 | return xhr; 1236 | } 1237 | } 1238 | J.http = http; 1239 | }); 1240 | 1241 | 1242 | 1243 | -------------------------------------------------------------------------------- /js/delbtn_input.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event; 4 | var isTouchDevice = J.platform.touchDevice; 5 | var touchEvt = isTouchDevice ? "tap":"click"; 6 | var DelBtn_Input = J.Class({ 7 | init:function(options){ 8 | this.elem = $D.id(options.id); 9 | this.inputDelBtnClassName = options.inputDelBtnClassName || "input_del_btn"; 10 | this.inputEle = $D.tagName("input",this.elem)[0]; 11 | this.delBtn = $D.className(this.inputDelBtnClassName,this.elem)[0]; 12 | this.bindHandler(); 13 | }, 14 | _handleEvent:function(e){ 15 | switch (e.type) { 16 | case "focus": this._onFocus(e); break; 17 | case "input": this._onInput(e); break; 18 | case "blur": this._onBlur(e); break; 19 | case touchEvt: this._onTap(e); break; 20 | } 21 | }, 22 | _onTap:function(e){ 23 | var inputEle = this.inputEle; 24 | $D.setStyle(this.delBtn,"display","none"); 25 | inputEle.value = ""; 26 | inputEle.focus(); 27 | }, 28 | _onBlur:function(e){ 29 | var delBtn = this.delBtn; 30 | setTimeout(function(){ 31 | $D.setStyle(delBtn,"display","none"); 32 | },300); 33 | }, 34 | _onFocus:function(e){ 35 | if(this.inputEle.value!=""){ 36 | $D.setStyle(this.delBtn,"display","block"); 37 | } 38 | }, 39 | _onInput:function(){ 40 | var delBtn = this.delBtn; 41 | if(this.inputEle.value!=""){ 42 | $D.setStyle(delBtn,"display","block"); 43 | } 44 | else{ 45 | $D.setStyle(delBtn,"display","none"); 46 | } 47 | }, 48 | bindHandler:function(){ 49 | var _handleEvent = this._handleEvent = J.bind(this._handleEvent,this); 50 | $E.on(this.inputEle,"focus input blur",_handleEvent); 51 | $E.on(this.delBtn,touchEvt,_handleEvent); 52 | }, 53 | destory:function(){ 54 | var _handleEvent = this._handleEvent; 55 | $E.off(this.inputEle,"focus input blur",_handleEvent); 56 | $E.off(this.delBtn,touchEvt,_handleEvent); 57 | $D.remove(this.delBtn); 58 | $D.remove(this.inputEle); 59 | } 60 | }); 61 | this.DelBtn_Input = DelBtn_Input ; 62 | }); -------------------------------------------------------------------------------- /js/dialog.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event, 4 | $U = J.Util; 5 | var _transform = $D.getVendorPropertyName("transform"); 6 | 7 | //show 效果 8 | var showEffect = { 9 | none:function(elem,mask,onShow){ 10 | 11 | $D.setStyle(elem,{ 12 | "opacity":1, 13 | "visibility":"visible" 14 | }); 15 | $D.setStyle(mask,{ 16 | "opacity":.8, 17 | "visibility":"visible" 18 | }); 19 | $E.fire(this ,"show"); 20 | }, 21 | fade:function(elem,mask){ 22 | var self = this; 23 | $D.setStyle(mask,"opacity",0); 24 | setTimeout(function(){ 25 | new J.Animation({ 26 | selector:mask, 27 | duration:300, 28 | use3d:self.use3d 29 | }).setStyle({ 30 | "opacity":.8, 31 | "visibility":"visible" 32 | }).transit().setElems(elem).setStyle({ 33 | "opacity":1, 34 | "visibility":"visible" 35 | }).transit(function(){ 36 | $E.fire(self ,"show"); 37 | }); 38 | },0); 39 | 40 | }, 41 | pop:function(elem,mask){ 42 | var self = this; 43 | $D.setStyle(mask ,"opacity" ,0); 44 | $D.setStyle(elem , _transform,"scale(0.5)"); 45 | 46 | setTimeout(function(){ 47 | new J.Animation({ 48 | selector:mask, 49 | duration:300, 50 | use3d:self.use3d 51 | }).setStyle({ 52 | "opacity":.8, 53 | "visibility":"visible" 54 | }).transit().setElems(elem).setStyle({ 55 | "opacity":1, 56 | "visibility":"visible" 57 | }).scale(1).transit(function(){ 58 | $E.fire(self ,"show"); 59 | }); 60 | },0); 61 | }, 62 | slideup:function(elem,mask){ 63 | var self = this; 64 | $D.setStyle(mask ,"opacity" ,0); 65 | $D.setStyle(elem ,_transform ,"translateY(300px)"); 66 | setTimeout(function(){ 67 | new J.Animation({ 68 | selector:mask, 69 | duration:300, 70 | use3d:self.use3d 71 | }).setStyle({ 72 | "opacity":.8, 73 | "visibility":"visible" 74 | }).transit().setElems(elem).translateY(0).setStyle({ 75 | "opacity":1, 76 | "visibility":"visible" 77 | }).transit(function(){ 78 | $E.fire(self ,"show"); 79 | }); 80 | },0); 81 | }, 82 | slidedown:function(elem,mask){ 83 | var self = this; 84 | $D.setStyle(mask ,"opacity" ,0); 85 | $D.setStyle(elem ,_transform ,"translateY(-300px)"); 86 | setTimeout(function(){ 87 | 88 | new J.Animation({ 89 | selector:mask, 90 | duration:300, 91 | use3d:self.use3d 92 | }).setStyle({ 93 | "opacity":.8, 94 | "visibility":"visible" 95 | }).transit().setElems(elem).translateY(0).setStyle({ 96 | "opacity":1, 97 | "visibility":"visible" 98 | }).transit(function(){ 99 | $E.fire(self ,"show"); 100 | }); 101 | },0); 102 | } 103 | }; 104 | //hide 效果 105 | var hideEffect = { 106 | none:function(elem,mask){ 107 | $D.setStyle([elem,mask],"visibility" ,"hidden"); 108 | $E.fire(this ,"hide"); 109 | }, 110 | fade:function(elem,mask){ 111 | var self = this; 112 | new J.Animation({ 113 | selector:[elem,mask], 114 | duration:300, 115 | use3d:self.use3d 116 | }).setStyle({ 117 | "opacity":0, 118 | "visibility":"hidden" 119 | }).transit(function(){ 120 | $E.fire(self ,"hide"); 121 | }); 122 | }, 123 | pop:function(elem,mask){ 124 | var self = this; 125 | new J.Animation({ 126 | selector:[mask], 127 | duration:300, 128 | use3d:self.use3d 129 | }).setStyle({ 130 | "opacity":0, 131 | "visibility":"hidden" 132 | }).transit().setElems(elem).setStyle({ 133 | "opacity":0, 134 | "visibility":"hidden" 135 | }).scale(.5).transit(function(){ 136 | $D.setStyle(elem , _transform,""); 137 | $E.fire(self ,"hide"); 138 | }); 139 | }, 140 | slidedown:function(elem,mask){ 141 | var self = this; 142 | new J.Animation({ 143 | selector:mask, 144 | duration:300, 145 | use3d:self.use3d 146 | }).setStyle({ 147 | "opacity":0, 148 | "visibility":"hidden" 149 | }).transit().setElems(elem).translateY("300px").setStyle({ 150 | "opacity":0, 151 | "visibility":"hidden" 152 | }).transit(function(){ 153 | $D.setStyle(elem , _transform,""); 154 | $E.fire(self ,"hide"); 155 | }); 156 | }, 157 | slideup:function(elem,mask){ 158 | var self = this; 159 | new J.Animation({ 160 | selector:mask, 161 | duration:300, 162 | use3d:self.use3d 163 | }).setStyle({ 164 | "opacity":0, 165 | "visibility":"hidden" 166 | }).transit().setElems(elem).translateY("-300px").setStyle({ 167 | "opacity":0, 168 | "visibility":"hidden" 169 | }).transit(function(){ 170 | $D.setStyle(elem , _transform,""); 171 | $E.fire(self ,"hide"); 172 | }); 173 | } 174 | 175 | } 176 | var Dialog = J.Class({ 177 | init:function(options){ 178 | this.id = options.id; 179 | this.elem = $D.id(this.id); 180 | this.maskClassName = this.maskClassName || "mask"; 181 | this.mask = $D.className(this.maskClassName)[0]; 182 | this.use3d = options.use3d; 183 | this.preventScroll = options.preventScroll; 184 | 185 | }, 186 | show:function(type){ 187 | type = type || "none"; 188 | showEffect[type].call(this ,this.elem ,this.mask ,this.onShow); 189 | if(this.preventScroll){ 190 | $U.preventScrolling(); 191 | } 192 | $E.fire(this,"show"); 193 | }, 194 | hide:function(type){ 195 | type = type || "none"; 196 | hideEffect[type].call(this ,this.elem ,this.mask); 197 | if(this.preventScroll){ 198 | $U.activeScrolling(); 199 | } 200 | $E.fire(this,"hide"); 201 | }, 202 | destory:function(){ 203 | $D.remove(this.mask); 204 | $D.remove(this.elem); 205 | } 206 | }); 207 | this.Dialog = Dialog; 208 | }); -------------------------------------------------------------------------------- /js/grouplist.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event; 4 | var isTouchDevice = J.platform.touchDevice; 5 | var touchEvt = isTouchDevice ? "tap":"click"; 6 | var GroupList = J.Class({ 7 | init:function(options){ 8 | this.id = options.id; 9 | this.elem = $D.id(this.id); 10 | this.groupClassName = options.groupClassName || "list_group"; 11 | this.groupTitleClassName = options.groupTitleClassName || "list_group_title"; 12 | this.groupBodyClassName = options.groupBodyClassName || "list_group_body"; 13 | this.groups = $D.className(this.groupClassName); 14 | this.groupTitles = $D.className(this.groupTitleClassName); 15 | this.groupBodies = $D.className(this.groupBodyClassName); 16 | 17 | this.bindHandlers(); 18 | this._setIndex(); 19 | this._initList(); 20 | 21 | }, 22 | _handleEvent:function(e){ 23 | var type = e.type; 24 | if(type == touchEvt){ 25 | this._onClick(e); 26 | } 27 | }, 28 | _initList:function(){ 29 | this.list = new MUI.List({ 30 | id:this.id 31 | }); 32 | }, 33 | bindHandlers:function(){ 34 | var _handleEvent = this._handleEvent = J.bind(this._handleEvent , this); 35 | $E.on(this.elem ,touchEvt ,_handleEvent); 36 | }, 37 | _setIndex:function(){ 38 | J.each(this.groupTitles ,function(e,i){ 39 | e.setAttribute("_index" ,i); 40 | }); 41 | }, 42 | selectTitle:function(index){ 43 | var g_title = this.groupTitles[index]; 44 | var g_body = this.groupBodies[index]; 45 | if(g_body){ 46 | var computedStyle = document.defaultView.getComputedStyle(g_body,null);//getComputedStyle supported by ie9 47 | if( computedStyle.display == "none" ){ 48 | $D.setStyle(g_body ,"display" ,"block"); 49 | } 50 | else{ 51 | $D.setStyle(g_body ,"display" ,"none"); 52 | } 53 | } 54 | //触发selected事件 55 | $E.fire(this ,"titleselected" ,{ 56 | selectedTitle : g_title, 57 | selectedList : g_body, 58 | selectedIndex : index 59 | }); 60 | }, 61 | _onClick:function(e){ 62 | var target = e.target || e.srcElement; 63 | var pn = target.parentNode; 64 | 65 | if($D.closest(pn ,"." + this.groupTitleClassName)){ 66 | var g_index = parseInt(pn.getAttribute("_index")); 67 | this.selectTitle(g_index); 68 | } 69 | }, 70 | destory:function(){ 71 | $E.off(this.elem ,touchEvt ,this._handleEvent); 72 | $D.remove(this.elem); 73 | } 74 | }); 75 | this.GroupList = GroupList; 76 | }); -------------------------------------------------------------------------------- /js/imagechange.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event; 4 | 5 | var ImageChange = J.Class({ 6 | init:function(options){ 7 | this.elem = $D.id(options.id); 8 | this.imgsWrapClassName = options.imgsWrapClassName || "wrap"; 9 | this.btnsWrapClassName = options.btnsWrapClassName || "btnsWrap"; 10 | this.imgsContainer = $D.className(this.imgsWrapClassName,this.elem)[0]; 11 | this.btnsContainer = $D.className(this.btnsWrapClassName,this.elem)[0]; 12 | this.currentIndex = options.currentIndex || 0; 13 | 14 | this.contentsSwipe = MUI.SwipeChange({ 15 | id:options.id, 16 | wrapClassName:this.imgsWrapClassName, 17 | fastChange:true 18 | }); 19 | 20 | this.preIndex = this.currentIndex; 21 | this.count = this.contentsSwipe.count; 22 | 23 | this.isAutoChange = options.isAutoChange; 24 | this.autoChangeTime = options.autoChangeTime || 3000; 25 | this._initBtns(); 26 | this.bindHandlers(); 27 | if(this.isAutoChange) this.autoChange(); 28 | 29 | }, 30 | _handleEvent:function(e){ 31 | var type = e.type; 32 | if(type == "changed"){ 33 | this._onSwipeChanged(e); 34 | } 35 | }, 36 | _onSwipeChanged:function(e){ 37 | var currentIndex = e.currentIndex; 38 | $D.removeClass(this.btns[this.preIndex],"selected"); 39 | $D.addClass(this.btns[currentIndex],"selected"); 40 | this.currentIndex = this.preIndex = currentIndex; 41 | if(this.isAutoChange) this.autoChange(); 42 | 43 | }, 44 | autoChange:function(){ 45 | var self = this; 46 | var count = this.count; 47 | clearTimeout(this.runTimeId); 48 | this.runTimeId = setTimeout(function(){ 49 | var currentIndex = self.currentIndex; 50 | if(currentIndex >= count-1) currentIndex = 0; 51 | else currentIndex ++; 52 | self.slideTo(currentIndex); 53 | },self.autoChangeTime); 54 | }, 55 | slideTo:function(index){ 56 | this.contentsSwipe.slideTo(index); 57 | }, 58 | _initBtns:function(){ 59 | var count = this.count; 60 | var currentIndex = this.currentIndex; 61 | var content = ""; 62 | for(var i=0;i"; 64 | else content += "
  • "; 65 | } 66 | this.btnsContainer.innerHTML = content; 67 | this.btns = $D.tagName("li",this.btnsContainer); 68 | }, 69 | bindHandlers:function(){ 70 | var _handleEvent = this._handleEvent = J.bind(this._handleEvent , this); 71 | $E.on(this.contentsSwipe,"changed",_handleEvent); 72 | }, 73 | destory:function(){ 74 | $E.off(this.contentsSwipe,"changed",this._handleEvent); 75 | this.contentsSwipe.destory(); 76 | $D.remove(this.elem); 77 | 78 | } 79 | }); 80 | 81 | this.ImageChange = ImageChange; 82 | }); -------------------------------------------------------------------------------- /js/lazyLoadImgs.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event; 4 | 5 | //图片懒加载 只实现了垂直的情况 6 | var LazyLoadImgs = J.Class({ 7 | init:function(options){ 8 | var self = this; 9 | this.elem = $D.id(options.id); 10 | this.souceProperty = options.souceProperty || "_ori_src"; 11 | this.isFade = options.isFade; 12 | 13 | this._loadFunc = this.isFade ? function(img,loadSrc){ 14 | var newImg = img.cloneNode(); 15 | $D.setStyle(newImg,{ 16 | "-webkit-transition":"all 1s", 17 | "opacity":"0" 18 | }) 19 | $E.once(newImg,"load",function(){ 20 | img.parentNode.replaceChild(newImg,img); 21 | setTimeout(function(){ 22 | $D.setStyle(newImg,"opacity","1"); 23 | },0); 24 | 25 | }); 26 | newImg.src = loadSrc; 27 | newImg.removeAttribute(self.souceProperty); 28 | } : function(img,loadSrc){ 29 | img.src = loadSrc; 30 | img.removeAttribute(self.souceProperty); 31 | } 32 | this.bindHandlers(); 33 | }, 34 | _handleEvent:function(e){ 35 | switch (e.type) { 36 | case "load": 37 | case "resize": 38 | case "scrollend": this._onResize(e); 39 | } 40 | }, 41 | _onResize:function(e){ 42 | var _loadFunc = this._loadFunc; 43 | var souceProperty = this.souceProperty; 44 | var container = this.elem; 45 | var viewHeight = document.documentElement.clientHeight; 46 | var imgs = $D.$("img["+ souceProperty +"]" ,container); 47 | 48 | if(imgs.length == 0) return; 49 | 50 | J.each(imgs,function(img){ 51 | var imgTop = img.getBoundingClientRect().top; 52 | var imgH = img.clientHeight; 53 | //图片在可视范围内 54 | if(imgTop > - imgH/2){ 55 | if(imgTop < viewHeight) { 56 | _loadFunc(img ,img.getAttribute(souceProperty)); 57 | } 58 | else { 59 | return false;//中断遍历 60 | } 61 | } 62 | }); 63 | }, 64 | bindHandlers:function(){ 65 | var _handleEvent = this._handleEvent = J.bind(this._handleEvent , this); 66 | $E.on(window,"load resize scrollend",_handleEvent); 67 | }, 68 | destory:function(){ 69 | $E.off(window,"load resize scrollend",this._handleEvent); 70 | } 71 | }); 72 | this.LazyLoadImgs = LazyLoadImgs; 73 | }); -------------------------------------------------------------------------------- /js/list.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event, 4 | $T = J.type; 5 | var isTouchDevice = J.platform.touchDevice; 6 | var touchEvt = isTouchDevice ? "tap":"click"; 7 | var isListItem = function(ele){ 8 | return $D.hasClass(ele ,"list_item"); 9 | } 10 | var List = J.Class({ 11 | init:function(options){ 12 | this.elem = $D.id(options.id); 13 | this.listItemClassName = options.listItemClassName || "list_item"; 14 | this.selectedClassName = options.selectedClassName || "selected"; 15 | this.listItems = $D.className(this.listItemClassName,this.elem); 16 | this.selectedIndex = options.selectedIndex; 17 | 18 | this._setIndex(); 19 | this.bindHandlers(); 20 | this.select(this.selectedIndex); 21 | }, 22 | _handleEvent:function(e){ 23 | var type = e.type; 24 | if(type == touchEvt){ 25 | this._onClick(e); 26 | } 27 | }, 28 | bindHandlers:function(){ 29 | var _handleEvent = this._handleEvent = J.bind(this._handleEvent , this); 30 | $E.on(this.elem ,touchEvt ,_handleEvent); 31 | }, 32 | select:function(selectedIndex){ 33 | if(selectedIndex == this.selectedIndex) return; 34 | if($T.isNumber(this.selectedIndex)) 35 | $D.removeClass(this.listItems[this.selectedIndex],this.selectedClassName); 36 | 37 | if($T.isNumber(selectedIndex)){ 38 | $D.addClass(this.listItems[selectedIndex],this.selectedClassName); 39 | this.selectedIndex = selectedIndex; 40 | } 41 | //触发selected事件 42 | $E.fire(this ,"selected" ,{ 43 | type:"selected", 44 | selectedItem : this.listItems[selectedIndex], 45 | selectedIndex : selectedIndex 46 | }); 47 | }, 48 | _setIndex:function(){ 49 | J.each(this.listItems ,function(l,i){ 50 | l.setAttribute("_index" ,i); 51 | }); 52 | }, 53 | _onClick:function(e){ 54 | var target = e.target || e.srcElement; 55 | var pn = target.parentNode; 56 | 57 | if(isListItem(pn)){ 58 | var li = pn; 59 | var l_index = parseInt(li.getAttribute("_index")); 60 | this.select(l_index); 61 | } 62 | }, 63 | destory:function(){ 64 | $E.off(this.elem,touchEvt,this._handleEvent); 65 | $D.remove(this.elem); 66 | } 67 | }); 68 | this.List = List; 69 | }); -------------------------------------------------------------------------------- /js/load_list.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event; 4 | 5 | var LoadList = J.Class({extend:MUI.List},{ 6 | init:function(options){ 7 | 8 | this.loadingWord = options.loadingWord || "加载中..."; 9 | this.loadBtnWord = options.loadBtnWord || "查看更多"; 10 | LoadList.callSuper(this,"init",options); 11 | 12 | this.isLoading = false; 13 | }, 14 | showLoadBtn:function(){ 15 | if(!this.loadBtn){ 16 | var loadBtn = $D.node("li"); 17 | loadBtn.className = 'list_load_btn'; 18 | loadBtn.innerHTML = this.loadBtnWord; 19 | this.loadBtn = loadBtn; 20 | } 21 | this.elem.appendChild(this.loadBtn); 22 | }, 23 | _handleEvent:function(e){ 24 | var type = e.type; 25 | if(type == "click"){ 26 | this._onClick(e); 27 | } 28 | }, 29 | _onClick:function(e){ 30 | if(!this.isLoading){ 31 | this.loadData(); 32 | this.isLoading = true; 33 | } 34 | }, 35 | showLoadingTips:function(){ 36 | if(!this.loadingTips){ 37 | var loadingTips = $D.node("li"); 38 | loadingTips.className = 'list_loading_tips'; 39 | loadingTips.innerHTML = this.loadingWord; 40 | this.loadingTips = loadingTips; 41 | } 42 | this.elem.appendChild(this.loadingTips); 43 | }, 44 | bindHandlers:function(){ 45 | var _handleEvent = this._handleEvent = J.bind(this._handleEvent , this); 46 | LoadList.callSuper(this,"bindHandlers"); 47 | this.showLoadBtn(); 48 | $E.on(this.loadBtn ,"click",_handleEvent); 49 | }, 50 | hideLoadBtn:function(){ 51 | this.elem.removeChild(this.loadBtn); 52 | }, 53 | hideLoadingTips:function(){ 54 | this.elem.removeChild(this.loadingTips); 55 | }, 56 | loadData:function(){ 57 | this.hideLoadBtn(); 58 | this.showLoadingTips(); 59 | $E.fire(this,"loadingData"); 60 | //这里添加加载方法 61 | //... 62 | }, 63 | createLoadedList:function(data){ 64 | } 65 | }); 66 | this.LoadList = LoadList; 67 | }); -------------------------------------------------------------------------------- /js/progress.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event; 4 | 5 | var Progress = J.Class({ 6 | init:function(options){ 7 | this.elem = $D.id(options.id); 8 | this.barClassName = options.barClassName || "bar"; 9 | this.barTextClassName = options.barTextClassName || "bar_text"; 10 | this.bar = $D.className(this.barClassName ,this.elem)[0]; 11 | this.barText = $D.className(this.barTextClassName ,this.elem)[0]; 12 | this.setPercent(options.percent || 0); 13 | }, 14 | setPercent:function(p){ 15 | this.percent = Math.max(Math.min(p ,100) ,0); 16 | if(this.barText) this.barText.innerHTML = this.percent + "%"; 17 | $D.setStyle(this.bar ,"width" ,this.percent + "%"); 18 | }, 19 | getPercent:function(){ 20 | return this.percent; 21 | }, 22 | destory:function(){ 23 | $D.remove(this.elem); 24 | } 25 | }); 26 | this.Progress = Progress; 27 | }); -------------------------------------------------------------------------------- /js/radio.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event; 4 | 5 | var Radio = J.Class({ 6 | init:function(options){ 7 | this.elem = $D.id(options.id); 8 | this.radioElem = $D.$("input[type=radio]",this.elem)[0]; 9 | this.checkedClassName = options.checkedClassName || "checked"; 10 | this.checked = this.radioElem.checked; 11 | this.value = this.radioElem.value; 12 | this.bindHandler(); 13 | }, 14 | _handleEvent:function(e){ 15 | var type = e.type; 16 | if(type == "click"){ 17 | this._onClick(e); 18 | } 19 | }, 20 | bindHandler:function(){ 21 | var _handleEvent = this._handleEvent = J.bind(this._handleEvent,this); 22 | $E.on(this.radioElem,"click",_handleEvent); 23 | }, 24 | setValue:function(val){ 25 | this.radioElem.value = this.value = val; 26 | }, 27 | uncheck:function(){ 28 | this._changeState(false); 29 | }, 30 | check:function(){ 31 | this._changeState(true); 32 | }, 33 | _changeState:function(checked){ 34 | var re = this.radioElem; 35 | var checkedClassName = this.checkedClassName; 36 | 37 | this.checked = re.checked = checked; 38 | if(checked) 39 | $D.addClass(this.elem,checkedClassName); 40 | else 41 | $D.removeClass(this.elem,checkedClassName); 42 | //触发selected事件 43 | $E.fire(this,"chaged",{ 44 | checked:checked 45 | }); 46 | }, 47 | _onClick:function(e){ 48 | //当已经是选中状态，不触发selected事件 49 | if(this.checked) return; 50 | this._changeState(this.radioElem.checked); 51 | }, 52 | destory:function(){ 53 | $E.off(this.radioElem,"click",this._handleEvent); 54 | $D.remove(this.elem); 55 | } 56 | 57 | }); 58 | this.Radio = Radio; 59 | }); -------------------------------------------------------------------------------- /js/radiobuttonlist.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event; 4 | 5 | var isRadio = function(elem){ 6 | return elem.tagName == "INPUT" && elem.type == "radio"; 7 | } 8 | 9 | var addSelectedRadioStyle = function(radioBtn,checkedClassName){ 10 | $D.addClass(radioBtn.parentNode,checkedClassName); 11 | } 12 | 13 | var removeSelectedRadioStyle = function(radioBtn,checkedClassName){ 14 | $D.removeClass(radioBtn.parentNode,checkedClassName); 15 | } 16 | 17 | var RadioButtonList = function(options){ 18 | this.init(options); 19 | } 20 | RadioButtonList.prototype = { 21 | init:function(options){ 22 | this.elem = $D.id(options.id); 23 | this.radioBtns = $D.tagName("input",this.elem); 24 | this.checkedClassName = options.checkedClassName || "checked"; 25 | this.selectedIndex = this.getSelectedIndex(); 26 | 27 | addSelectedRadioStyle(this.radioBtns[this.selectedIndex],this.checkedClassName); 28 | this.bindHandlers(); 29 | 30 | }, 31 | 32 | getSelectedIndex:function(){ 33 | for(var i = this.radioBtns.length; i--;){ 34 | if(this.radioBtns[i].checked) return i; 35 | } 36 | return 0;//默认首个选中 37 | }, 38 | _onChange:function(e,target){ 39 | var currentSelectedIndex = this.getSelectedIndex(); 40 | 41 | if(currentSelectedIndex != this.selectedIndex){ 42 | addSelectedRadioStyle(target,this.checkedClassName); 43 | removeSelectedRadioStyle(this.radioBtns[this.selectedIndex],this.checkedClassName); 44 | this.selectedIndex = currentSelectedIndex; 45 | } 46 | 47 | $E.fire(this,"change",{ 48 | originalEventObj:e, 49 | radioSelected:target, 50 | selectedIndex:this.selectedIndex 51 | }); 52 | }, 53 | bindHandlers:function(){ 54 | var self = this; 55 | $E.on(this.elem,"click",function(e){ 56 | var target = e.target || e.srcElement; 57 | if(isRadio(target)){ 58 | self._onChange(e,target); 59 | } 60 | }); 61 | } 62 | } 63 | this.RadioButtonList = RadioButtonList; 64 | }); -------------------------------------------------------------------------------- /js/radiolist.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event, 4 | $T = J.type; 5 | 6 | var isRadio = function(elem){ 7 | return elem.tagName == "INPUT" && elem.type == "radio"; 8 | } 9 | 10 | var RadioList = J.Class({ 11 | init:function(options){ 12 | this.elem = $D.id(options.id); 13 | this.list = $D.$("input[type=radio]",this.elem); 14 | this.checkedClassName = options.checkedClassName || "checked"; 15 | 16 | this._initRadios(); 17 | this.bindHandlers(); 18 | }, 19 | getSelectedIndex:function(){ 20 | return this.selectedIndex; 21 | }, 22 | getSelectedRadio:function(){ 23 | return this.list[this.selectedIndex]; 24 | }, 25 | _initRadios:function(){ 26 | var self = this; 27 | var checkedClassName = this.checkedClassName; 28 | J.each(this.list,function(r,i){ 29 | if(r.checked) { 30 | $D.addClass(r.parentNode ,checkedClassName); 31 | self.selectedIndex = i; 32 | } 33 | r.setAttribute("_index",i); 34 | }); 35 | }, 36 | _onClick:function(e,target){ 37 | var checkedClassName = this.checkedClassName; 38 | var selectedIndex = target.getAttribute("_index"); 39 | //点击相同项不触发chang事件 40 | if(selectedIndex == this.selectedIndex) return; 41 | //更换样式 42 | $D.addClass(target.parentNode ,checkedClassName); 43 | if(!$T.isUndefined(this.selectedIndex)) 44 | $D.removeClass(this.list[this.selectedIndex].parentNode,checkedClassName); 45 | //重置selectedIndex 46 | this.selectedIndex = selectedIndex; 47 | 48 | //触发change事件 49 | $E.fire(this,"change",{ 50 | originalEventObj:e, 51 | radioSelected:target, 52 | selectedIndex:selectedIndex 53 | }); 54 | }, 55 | bindHandlers:function(){ 56 | var self = this; 57 | $E.on(this.elem,"click",function(e){ 58 | var target = e.target || e.srcElement; 59 | //避免点击label触发两次事件 60 | if(!isRadio(target)) return; 61 | self._onClick(e,target); 62 | }); 63 | } 64 | }); 65 | this.RadioList = RadioList; 66 | }); -------------------------------------------------------------------------------- /js/select.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event; 4 | 5 | 6 | var Select = J.Class({ 7 | 8 | init:function(options){ 9 | this.elem = $D.id(options.id); 10 | this.selectElem = $D.tagName("select",this.elem)[0]; 11 | this.selectTextClassName = options.selectTextClassName || "select_text"; 12 | this.selectTextElem = $D.className(this.selectTextClassName,this.elem)[0]; 13 | 14 | this.select(this.selectElem.selectedIndex); 15 | this.bindHandlers(); 16 | }, 17 | _handleEvent:function(e){ 18 | var type = e.type; 19 | if(type == "change"){ 20 | this._onChange(e); 21 | } 22 | }, 23 | _onChange:function(e){ 24 | this.select(this.selectElem.selectedIndex); 25 | }, 26 | select:function(index){ 27 | if(this.selectedIndex == index) return; 28 | this.selectedIndex = index; 29 | this.selectText = this.selectTextElem.innerHTML = this.selectElem.options[index].innerHTML; 30 | //触发change事件 31 | $E.fire(this, "change",{ 32 | selectedIndex:index, 33 | selectedText:this.selectText 34 | }); 35 | }, 36 | bindHandlers:function(){ 37 | var _handleEvent = this._handleEvent = J.bind(this._handleEvent,this); 38 | $E.on(this.selectElem,"change",_handleEvent); 39 | }, 40 | destory:function(){ 41 | $E.off(this.selectElem,"change",this._handleEvent); 42 | $D.remove(this.elem); 43 | } 44 | }); 45 | this.Select = Select; 46 | }); -------------------------------------------------------------------------------- /js/slide.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event; 4 | var isTouchDevice = J.platform.touchDevice; 5 | var dragingElem; 6 | var isTouchDevice = J.platform.touchDevice; 7 | var startEvt = isTouchDevice ? "touchstart" : "mousedown"; 8 | var moveEvt = isTouchDevice ? "touchmove" : "mousemove"; 9 | var endEvt = isTouchDevice ? "touchend" : "mouseup"; 10 | var hasClientRect = "getBoundingClientRect" in document.body; 11 | 12 | var Slide = J.Class({ 13 | init:function(options){ 14 | 15 | this.elem = $D.id(options.id)||options.id; 16 | this.wrapClassName = options.wrapClassName || "wrap"; 17 | 18 | this.contentWrap = $D.$("." + this.wrapClassName,this.elem)[0]; 19 | this.contents = $D.$("." + this.wrapClassName + ">li",this.contentWrap); 20 | this.count = this.contents.length; 21 | this.currentIndex = options.currentIndex || 0; 22 | this.moveDist = 0; 23 | this.runType = options.runType || "ease-out"; 24 | this.slideTime = options.slideTime || 200; 25 | this.fastChange = options.fastChange; 26 | this._sizeAdjust(); 27 | this._moveTo(this.currentIndex * -this.contentWidth); 28 | this.bindHandlers(); 29 | }, 30 | bindHandlers:function(){ 31 | var startX = 0; 32 | var self = this; 33 | var elem = this.elem; 34 | $E.on(this.contentWrap,"webkitTransitionEnd",function(e){ 35 | // self._removeAnimation(); 36 | $E.fire(self ,"changed" ,{ 37 | type:"changed", 38 | currentIndex:self.currentIndex 39 | }); 40 | }); 41 | //用于fastchange恢复 42 | $E.on(self ,"changed" ,function(e){ 43 | if(!self.fastChange || !self.hideArr) return; 44 | while(self.hideArr[0]){ 45 | $D.setStyle(self.hideArr[0],"display",""); 46 | self.hideArr.shift(); 47 | } 48 | self._removeAnimation(); 49 | self._moveTo(e.currentIndex * -self.contentWidth); 50 | }); 51 | }, 52 | _removeAnimation:function(ele){ 53 | this.contentWrap.style["-webkit-transition"] = "";//删除动画效果 54 | }, 55 | _sizeAdjust:function(){ 56 | var ele = this.elem; 57 | var count = this.count; 58 | //幻灯片宽度 59 | var contentWidth = hasClientRect ? ele.getBoundingClientRect().width : ele.offsetWidth; 60 | 61 | $D.setStyle(this.contentWrap , "width" ,contentWidth * count + "px"); 62 | J.each(this.contents ,function(e){ 63 | $D.setStyle(e,"width",contentWidth + "px"); 64 | }); 65 | 66 | this.contentWidth = contentWidth; 67 | }, 68 | _moveTo:function(x){ 69 | //webkit和moz可用3D加速，ms和o只能使用translate 70 | this.contentWrap.style["-webkit-transform"] = "translate3d("+ x + "px, 0,0 )"; 71 | }, 72 | slideTo:function(index){ 73 | var self = this; 74 | var currentIndex = this.currentIndex; 75 | var d_index = index - currentIndex; 76 | this.currentIndex = index ; 77 | 78 | if(this.fastChange && d_index && Math.abs(d_index) != 1){ 79 | if(d_index != 0){ 80 | var l,p; 81 | var cts = this.contents; 82 | if(!this.hideArr) this.hideArr = []; 83 | if(d_index > 0) { 84 | l = d_index -1; 85 | p = 1; 86 | index = currentIndex + 1; 87 | } 88 | else { 89 | l = -(d_index + 1); 90 | p = -1; 91 | this._removeAnimation(); 92 | this._moveTo((this.currentIndex+1) * -this.contentWidth); 93 | } 94 | 95 | for(var i = 1;i <= l; i++){ 96 | var ct = cts[currentIndex + i * p]; 97 | 98 | $D.setStyle(ct,"display","none"); 99 | this.hideArr.push(ct); 100 | } 101 | 102 | } 103 | } 104 | //不加setTimeout 0 在fastchange并且倒行的时候会闪白 105 | setTimeout(function(){ 106 | self.contentWrap.style["-webkit-transition"] = "all " + self.slideTime/1000 +"s " + self.runType; 107 | self._moveTo(index * -self.contentWidth); 108 | },0); 109 | }, 110 | next:function(){ 111 | var index = this.currentIndex + 1; 112 | if(index >= this.count) return; 113 | this.slideTo(index); 114 | }, 115 | pre:function(){ 116 | var index = this.currentIndex - 1; 117 | if(index < 0) return; 118 | this.slideTo(index); 119 | } 120 | 121 | }); 122 | this.Slide = Slide; 123 | }); -------------------------------------------------------------------------------- /js/slide_list.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event; 4 | 5 | var SlideList = J.Class({ 6 | init:function(options){ 7 | this.elem = $D.id(options.id); 8 | this.wrapClassName = options.wrapClassName || "list_slide_wrap"; 9 | this.toolBarClassName = options.toolBarClassName || "toolbar_header"; 10 | this.toolbar = $D.className(this.toolBarClassName,this.elem)[0]; 11 | 12 | this.s_list = MUI.List({ 13 | id:options.list_id 14 | }); 15 | this.s_swipe = MUI.Slide({ 16 | id:options.id, 17 | wrapClassName:this.wrapClassName, 18 | fastChange:true 19 | }); 20 | this.backBtn = MUI.Button({ 21 | id:options.back_btn_id 22 | }); 23 | this.bindHandlers(); 24 | 25 | }, 26 | _handleEvent:function(e){ 27 | var type = e.type; 28 | switch (e.type) { 29 | case "selected": this._onSelectedEvt(e); break; 30 | case "click": this._onClickEvt(e); break; 31 | } 32 | }, 33 | _onClickEvt:function(e){ 34 | this.select(0); 35 | }, 36 | _onSelectedEvt:function(e){ 37 | var selectedIndex = e.selectedIndex; 38 | this.select(selectedIndex); 39 | }, 40 | select:function(selectedIndex){ 41 | this.s_swipe.slideTo(selectedIndex); 42 | $E.fire(this,"selected",{ 43 | selectedIndex:selectedIndex 44 | }); 45 | }, 46 | bindHandlers:function(){ 47 | var _handleEvent = this._handleEvent = J.bind(this._handleEvent,this); 48 | $E.on(this.s_list,"selected",_handleEvent); 49 | $E.on(this.backBtn,"click",_handleEvent); 50 | }, 51 | destory:function(){ 52 | var _handleEvent = this._handleEvent; 53 | $E.off(this.s_list,"selected",_handleEvent); 54 | $E.off(this.backBtn,"click",_handleEvent); 55 | $D.remove(this.toolbar); 56 | $D.remove(this.elem); 57 | } 58 | }); 59 | 60 | this.SlideList = SlideList; 61 | }); -------------------------------------------------------------------------------- /js/slider.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event, 4 | dragingHandler; 5 | 6 | var isTouchDevice = J.platform.touchDevice; 7 | var startEvt = isTouchDevice ? "touchstart" : "mousedown"; 8 | var moveEvt = isTouchDevice ? "touchmove" : "mousemove"; 9 | var endEvt = isTouchDevice ? "touchend" : "mouseup"; 10 | 11 | var Slider = J.Class({ 12 | init:function(options){ 13 | this.elem = $D.id(options.id); 14 | this.rangeClassName = options.rangeClassName || "slider_range"; 15 | this.handlerClassName = options.handlerClassName || "slider_handler"; 16 | this.s_elem = $D.$("input[type=range]" ,this.elem)[0]; 17 | this.r_elem = $D.className(this.rangeClassName,this.elem)[0]; 18 | this.handler = $D.className(this.handlerClassName,this.elem)[0]; 19 | this.vertical = options.vertical;//是否垂直模式 20 | (this.vertical) ? this.elem_length = this.elem.clientHeight : this.elem_length = this.elem.clientWidth; 21 | 22 | this.value = this.elem.value; 23 | this.max = options.max || 100; 24 | this.min = options.min || 0; 25 | this.range = this.max - this.min; 26 | this.bindHandlers(); 27 | 28 | }, 29 | _handleEvent:function(e){ 30 | switch (e.type) { 31 | case startEvt: this._onStartEvt(e); break; 32 | case moveEvt: this._onMoveEvt(e); break; 33 | case endEvt: this._onEndEvt(e); break; 34 | } 35 | }, 36 | _onStartEvt:function(e){ 37 | var h = this.handler; 38 | var target = e.target || e.srcElement; 39 | if(target === h){ 40 | e.preventDefault(); 41 | dragingHandler = h; 42 | } 43 | }, 44 | _onMoveEvt:function(e){ 45 | if(dragingHandler !== this.handler) return; 46 | e.preventDefault(); 47 | 48 | var touch = isTouchDevice? e.touches[0] : e; 49 | var pos = { x: touch.clientX , y: touch.clientY }; 50 | var ep = this.elem.getBoundingClientRect();//实时获取，因为元素位置随时会变化 51 | 52 | var r = this.handler; 53 | var l = this.elem_length; 54 | var dist; 55 | 56 | this.vertical? dist = Math.min(Math.max(0 ,ep.bottom - pos.y) ,l) : dist = Math.min(Math.max(0 ,pos.x - ep.left), l); 57 | //实时改变slider的值 58 | this.setValue(this._distToValue(dist)); 59 | 60 | }, 61 | _onEndEvt:function(e){ 62 | dragingHandler = null; 63 | }, 64 | bindHandlers:function(){ 65 | var _handleEvent = this._handleEvent = J.bind(this._handleEvent , this); 66 | $E.on(this.handler, startEvt ,_handleEvent); 67 | $E.on(document.body ,moveEvt ,_handleEvent); 68 | $E.on(document.body ,endEvt ,_handleEvent); 69 | }, 70 | _setStyle:function(dist){ 71 | var h = this.handler; 72 | var r = this.r_elem; 73 | var l = this.elem_length; 74 | var half; 75 | if(this.vertical){ 76 | half = h.clientHeight/2; 77 | if(r) $D.setStyle(r ,"height" ,(dist + half) / l * 100 +"%"); 78 | $D.setStyle(h ,"bottom" ,dist - half + "px"); 79 | } 80 | else { 81 | half = h.clientWidth/2; 82 | if(r) $D.setStyle(r ,"width" ,(dist + half) / l * 100 +"%"); 83 | $D.setStyle(h ,"left" ,dist - half + "px"); 84 | console.log(dist); 85 | } 86 | }, 87 | _distToValue:function(dist){ 88 | return this.min + dist/this.elem_length * (this.range); 89 | }, 90 | _valueToDist:function(val){ 91 | return (val - this.min) * this.elem_length /this.range; 92 | }, 93 | setValue:function(val){ 94 | this.value = this.s_elem.value = val; 95 | this._setStyle(this._valueToDist(this.value)); 96 | //触发change事件 97 | $E.fire(this,"change",{ 98 | value:this.value 99 | }); 100 | }, 101 | getValue:function(){ 102 | return this.currentValue; 103 | }, 104 | destory:function(){ 105 | var _handleEvent = this._handleEvent; 106 | $E.off(this.handler, startEvt ,_handleEvent); 107 | $E.off(document.body ,moveEvt ,_handleEvent); 108 | $E.off(document.body ,endEvt ,_handleEvent); 109 | $D.remove(this.elem); 110 | } 111 | }); 112 | this.Slider = Slider; 113 | }); -------------------------------------------------------------------------------- /js/swipe_tab.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event; 4 | 5 | var isListItem =function(ele){ 6 | return ele.tagName == "LI"; 7 | } 8 | var isTouchDevice = J.platform.touchDevice; 9 | var touchEvt = isTouchDevice ? "tap":"click"; 10 | var SwipeTab = J.Class({extend:MUI.Tab},{ 11 | init:function(options){ 12 | this.wrapClassName = this.wrapClassName || "tab_body"; 13 | this.tabBodySlide = MUI.SwipeChange({ 14 | id:options.id, 15 | slideTime:options.slideTime || 600, 16 | wrapClassName:this.wrapClassName, 17 | fastChange:options.fastChange 18 | }); 19 | SwipeTab.callSuper(this,"init",options); 20 | }, 21 | _handleEvent:function(e){ 22 | SwipeTab.callSuper(this,"_handleEvent",e); 23 | var type = e.type; 24 | if(type == "changed"){ 25 | this._onChanged(e); 26 | } 27 | 28 | }, 29 | _onChanged:function(e){ 30 | //触发tab 的 selected事件 31 | this.select(e.currentIndex); 32 | }, 33 | bindHandlers:function(){ 34 | SwipeTab.callSuper(this,"bindHandlers"); 35 | var _handleEvent = this._handleEvent = J.bind(this._handleEvent,this); 36 | $E.on(this.tabBodySlide,"changed",_handleEvent); 37 | }, 38 | _setSelectedClass:function(selectedIndex){ 39 | var tabs = this.tabs; 40 | var currentIndex = this.currentIndex; 41 | if(currentIndex == selectedIndex) return; 42 | 43 | $D.removeClass(tabs[currentIndex],this.selectedClass); 44 | $D.addClass(tabs[selectedIndex],this.selectedClass); 45 | }, 46 | select:function(selectedIndex){ 47 | if(selectedIndex == this.currentIndex) return; 48 | SwipeTab.callSuper(this,"select",selectedIndex); 49 | this.tabBodySlide.slideTo(selectedIndex); 50 | }, 51 | destory:function(){ 52 | AnimateTab.callSuper(this,"destory"); 53 | $E.off(this.tabBodySlide,"changed",this._handleEvent); 54 | this.tabBodySlide.destory(); 55 | } 56 | 57 | }); 58 | this.SwipeTab = SwipeTab; 59 | }); -------------------------------------------------------------------------------- /js/swipechange.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event; 4 | var isTouchDevice = J.platform.touchDevice; 5 | var dragingElem; 6 | var isTouchDevice = J.platform.touchDevice; 7 | var startEvt = isTouchDevice ? "touchstart" : "mousedown"; 8 | var moveEvt = isTouchDevice ? "touchmove" : "mousemove"; 9 | var endEvt = isTouchDevice ? "touchend" : "mouseup"; 10 | var hasClientRect = "getBoundingClientRect" in document.body; 11 | 12 | var SwipeChange = J.Class({extend:MUI.Slide},{ 13 | init:function(options){ 14 | SwipeChange.callSuper(this,"init",options); 15 | this.startX = 0; 16 | }, 17 | _handleEvent:function(e){ 18 | SwipeChange.callSuper(this,"_handleEvent",e); 19 | switch (e.type) { 20 | case startEvt: this._onStartEvt(e); break; 21 | case moveEvt: this._onMoveEvt(e); break; 22 | case endEvt: this._onEndEvt(e); break; 23 | } 24 | }, 25 | _onStartEvt:function(e){ 26 | var elem = this.elem; 27 | var target = e.target||e.srcElement; 28 | if(!$D.closest(target ,"." + this.wrapClassName)) return; 29 | dragingElem = target; 30 | var tou = e.touches? e.touches[0] : e; 31 | var elemLeft = hasClientRect ? elem.getBoundingClientRect().left : elem.offsetLeft; 32 | 33 | var x = tou.clientX - elemLeft; 34 | this.startX = x;//相对于container 35 | }, 36 | _onMoveEvt:function(e){ 37 | if(!dragingElem) return; 38 | e.preventDefault(); 39 | var elem = this.elem; 40 | var tou = e.touches? e.touches[0] : e; 41 | var x = tou.clientX; 42 | var elemLeft = hasClientRect ? elem.getBoundingClientRect().left : elem.offsetLeft; 43 | var elemRight = elemLeft + this.contentWidth; 44 | 45 | if(x < elemLeft || x > elemRight) return; 46 | x = x - elemLeft; 47 | 48 | this.moveDist = x - this.startX; 49 | this._removeAnimation(); 50 | this._moveTo(this.currentIndex * -this.contentWidth + this.moveDist); 51 | // e.preventDefault(); 52 | 53 | }, 54 | _onEndEvt:function(e){ 55 | if(!dragingElem) return; 56 | 57 | var d = this.moveDist; 58 | var elem = this.elem; 59 | var currentIndex = this.currentIndex; 60 | var elemLeft = hasClientRect ? elem.getBoundingClientRect().left : elem.offsetLeft; 61 | var elemHalf = elemLeft + this.contentWidth/2; 62 | 63 | if(d > elemHalf) { 64 | currentIndex = Math.max(0 ,currentIndex - 1); 65 | } 66 | else if(d < - elemHalf) { 67 | currentIndex = Math.min(this.contents.length - 1 ,currentIndex + 1); 68 | } 69 | // self._moveTo(currentIndex * -self.contentWidth); 70 | this.slideTo(currentIndex); 71 | dragingElem = null; 72 | }, 73 | bindHandlers:function(){ 74 | var _handleEvent = this._handleEvent = J.bind(this._handleEvent , this); 75 | SwipeChange.callSuper(this,"bindHandlers"); 76 | $E.on(this.elem,[startEvt,moveEvt,endEvt].join(" "), _handleEvent); 77 | }, 78 | destory:function(){ 79 | $E.off(this.elem,[startEvt,moveEvt,endEvt].join(" "), this._handleEvent); 80 | SwipeChange.callSuper(this,"destory"); 81 | } 82 | 83 | }); 84 | this.SwipeChange = SwipeChange; 85 | }); -------------------------------------------------------------------------------- /js/tab.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event; 4 | 5 | var isListItem =function(ele){ 6 | return ele.tagName == "LI"; 7 | } 8 | var isTouchDevice = J.platform.touchDevice; 9 | var touchEvt = isTouchDevice ? "tap":"click"; 10 | var Tab = J.Class({ 11 | init:function(options){ 12 | this.elem = $D.id(options.id); 13 | var tb = $D.tagName("ul" ,this.elem); 14 | this.tabHeaderClassName = options.tabHeaderClassName || "tab_head"; 15 | this.tabBodyClassName = options.tabBodyClassName || "tab_body"; 16 | this.selectedClass = options.selectedClass || "active"; 17 | 18 | this.tabHeader = $D.className(this.tabHeaderClassName,this.elem)[0]; 19 | this.tabBody = $D.className(this.tabBodyClassName,this.elem)[0]; 20 | 21 | this.tabs = $D.$("."+this.tabHeaderClassName + ">li",this.elem); 22 | this.tabContents = $D.$("."+this.tabBodyClassName+">li",this.elem); 23 | 24 | this.currentIndex = options.currentIndex || 0; 25 | 26 | this.bindHandlers(); 27 | this._setIndex(); 28 | this._setHeaderWidth(); 29 | 30 | $D.addClass(this.tabs[this.currentIndex] ,this.selectedClass); 31 | $D.setStyle(this.tabContents[this.currentIndex],"display","block"); 32 | 33 | }, 34 | _handleEvent:function(e){ 35 | var type = e.type; 36 | if(type == "click"){ 37 | this._onClick(e); 38 | } 39 | }, 40 | bindHandlers:function(){ 41 | var self = this; 42 | var _handleEvent = this._handleEvent = J.bind(this._handleEvent,this); 43 | $E.on(this.elem ,touchEvt ,_handleEvent); 44 | }, 45 | getIndex:function(ele){ 46 | return parseInt(ele.getAttribute("_index")); 47 | }, 48 | _setSelectedClass:function(selectedIndex){ 49 | var tabs = this.tabs; 50 | var tabContents = this.tabContents; 51 | var currentIndex = this.currentIndex; 52 | if(currentIndex == selectedIndex) return; 53 | 54 | $D.removeClass(tabs[currentIndex],this.selectedClass); 55 | $D.setStyle(this.tabContents[currentIndex],"display","none"); 56 | $D.addClass(tabs[selectedIndex],this.selectedClass); 57 | $D.setStyle(this.tabContents[selectedIndex],"display","block"); 58 | }, 59 | _setHeaderWidth:function(){ 60 | var tabs = this.tabs; 61 | var count = this.tabs.length; 62 | J.each(tabs,function(t,i){ 63 | $D.setStyle(t,"width",100/count + "%"); 64 | }); 65 | }, 66 | _setIndex:function(){ 67 | var tabs = this.tabs; 68 | J.each(tabs,function(e,i){ 69 | e.setAttribute("_index" ,i); 70 | }); 71 | }, 72 | _onClick:function(e){ 73 | var target = e.target || e.srcElement; 74 | if(isListItem(target) && target.parentNode == this.tabHeader){ 75 | var selectedIndex = this.getIndex(target); 76 | this.select(selectedIndex); 77 | } 78 | 79 | }, 80 | select:function(selectedIndex){ 81 | this._setSelectedClass(selectedIndex); 82 | this.currentIndex = selectedIndex; 83 | //触发tab 的 selected事件 84 | $E.fire(this,"selected",{ 85 | selectedIndex : selectedIndex, 86 | selectedTab : this.tabs[selectedIndex], 87 | selectedTabContent : this.tabContents[selectedIndex] 88 | }); 89 | 90 | }, 91 | destory:function(){ 92 | $E.off(this.elem,touchEvt,this._handleEvent); 93 | $D.remove(this.elem); 94 | } 95 | 96 | }); 97 | this.Tab = Tab; 98 | }); -------------------------------------------------------------------------------- /js/toggleswitch.js: -------------------------------------------------------------------------------- 1 | JM.$package("MUI",function(J){ 2 | var $D = J.dom, 3 | $E = J.event, 4 | $T = J.type, 5 | dragingHandler, 6 | currentLeft; 7 | 8 | 9 | var isTouchDevice = J.platform.touchDevice; 10 | var tapEvt = isTouchDevice ? "click" : "click";//需要修改 11 | var startEvt = isTouchDevice ? "touchstart" : "mousedown"; 12 | var moveEvt = isTouchDevice ? "touchmove" : "mousemove"; 13 | var endEvt = isTouchDevice ? "touchend" : "mouseup"; 14 | var body = document.body; 15 | 16 | 17 | var ToggleSwitch = J.Class({ 18 | init:function(options){ 19 | this.elem = $D.id(options.id); 20 | 21 | this.handler = $D.className("toggle_handler" ,this.elem)[0]; 22 | this.toggle_wrap = $D.className("toggle_wrap",this.elem)[0]; 23 | this.toggle_items = $D.tagName("span" ,this.toggle_wrap); 24 | 25 | this.bindHandlers(); 26 | this.handlerWidth = this.handler.clientWidth; 27 | this.handlerRight = this.handler.offsetLeft; 28 | this.handlerLeft = this.elem.clientWidth - this.handlerRight - this.handlerWidth; 29 | //默认移动到右边 30 | this.turnOn(); 31 | }, 32 | _moveTo:function(left){ 33 | 34 | currentLeft = left; 35 | $D.setStyle(this.handler, "left", left + "px"); 36 | 37 | //左内容宽度百分比 38 | var l_percent = (left + this.handler.clientWidth)/this.elem.clientWidth * 100 / 2; 39 | $D.setStyle(this.toggle_items[0], { 40 | "width" : l_percent + "%" 41 | }); 42 | 43 | }, 44 | _showLeft:function(){ 45 | $D.setStyle(this.toggle_items[0],"opacity",1); 46 | }, 47 | _hideLeft:function(){ 48 | $D.setStyle(this.toggle_items[0],"opacity",0); 49 | }, 50 | _showRight:function(){ 51 | $D.setStyle(this.toggle_items[1],"opacity",1); 52 | }, 53 | _hideRight:function(){ 54 | $D.setStyle(this.toggle_items[1],"opacity",0); 55 | }, 56 | turnOff:function(){ 57 | this._moveTo(this.handlerLeft); 58 | this._showRight(); 59 | this._hideLeft(); 60 | //触发change事件 61 | $E.fire(this,"change",{ 62 | selectedIndex : 1, 63 | selectedItem : this.toggle_items[1] 64 | }); 65 | }, 66 | turnOn:function(){ 67 | this._moveTo(this.handlerRight); 68 | this._showLeft(); 69 | this._hideRight(); 70 | //触发change事件 71 | $E.fire(this,"change",{ 72 | selectedIndex : 0, 73 | selectedItem : this.toggle_items[0] 74 | }); 75 | }, 76 | _handleEvent:function(e){ 77 | switch (e.type) { 78 | case startEvt: this._onStartEvt(e); break; 79 | case moveEvt: this._onMoveEvt(e); break; 80 | case endEvt: this._onEndEvt(e); break; 81 | case tapEvt: this._onTap(e); break; 82 | } 83 | }, 84 | _onStartEvt:function(e){ 85 | var target = e.target || e.srcElement; 86 | var h = this.handler; 87 | if(e.target == h){ 88 | e.preventDefault(); 89 | dragingHandler = h; 90 | this._showLeft(); 91 | this._showRight(); 92 | } 93 | }, 94 | _onMoveEvt:function(e){ 95 | if(dragingHandler != this.handler) return; 96 | e.preventDefault(); 97 | var elem = this.elem; 98 | var touch = isTouchDevice? e.touches[0] : e; 99 | var pos = {x : touch.clientX , y : touch.clientY}; 100 | var ep = elem.getBoundingClientRect(); 101 | currentLeft = Math.min(Math.max(0 , pos.x - ep.left) ,elem.clientWidth - this.handlerWidth); 102 | this._moveTo(currentLeft); 103 | }, 104 | _onEndEvt:function(e){ 105 | if($T.isUndefined(currentLeft) || dragingHandler!=this.handler) return; 106 | e.preventDefault(); 107 | dragingHandler = null; 108 | 109 | var handlerLeft = this.handlerLeft; 110 | var handlerRight = this.handlerRight; 111 | var halfLeft = (handlerRight - handlerLeft)/2; 112 | 113 | if(currentLeft >= halfLeft){//right 114 | this.turnOn(); 115 | } 116 | else{//left 117 | this.turnOff(); 118 | } 119 | }, 120 | _onTap:function(e){ 121 | var target = e.target || e.srcElement; 122 | if(target == this.toggle_items[1]){//right 123 | this.turnOn(); 124 | } 125 | else if(target == this.toggle_items[0]){//left 126 | this.turnOff(); 127 | } 128 | }, 129 | bindHandlers:function(){ 130 | var _handleEvent = this._handleEvent = J.bind(this._handleEvent , this); 131 | 132 | $E.on(this.handler, startEvt ,_handleEvent); 133 | $E.on(body, moveEvt ,_handleEvent); 134 | $E.on(body, endEvt ,_handleEvent); 135 | $E.on(this.elem, tapEvt ,_handleEvent); 136 | }, 137 | destory:function(){ 138 | var ele = this.elem; 139 | var _handleEvent = this._handleEvent; 140 | $E.off(this.handler, startEvt ,_handleEvent); 141 | $E.off(body, moveEvt ,_handleEvent); 142 | $E.off(body, endEvt ,_handleEvent); 143 | $E.off(ele, tapEvt ,_handleEvent); 144 | $D.remove(ele); 145 | } 146 | 147 | }); 148 | this.ToggleSwitch = ToggleSwitch; 149 | }); -------------------------------------------------------------------------------- /lazy_load_imgs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Mobile Cookbook 5 | 6 | 7 | 8 | 14 | 15 | 16 |

    图片懒加载

    17 |
    18 |

    19 |

    20 |

    21 |

    22 |

    23 |

    24 |

    25 |

    26 |

    27 |

    28 |

    29 |

    30 |
    31 | 32 | 33 | 34 | 35 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 |
    19 | 20 |

    list

    21 | 32 |

    list readonly

    33 | 44 |

    list with number

    45 |
      46 |
    1. 47 | ListItemA 48 |
      2. 49 |
    2. 50 | ListItemB 51 |
      3. 52 |
    3. 53 | ListItemC 54 |
      4. 55 |
    56 | 57 |

    list with icon

    58 | 72 | 73 | 87 | 88 |

    lists in group

    89 |
      90 |
    • 91 |
      92 |

      Group1

      93 |
      94 |
      95 | 106 |
      107 |
      • 108 |
    • 109 |
      110 |

      Group2

      111 |
      112 |
      113 | 124 |
      125 |
      • 126 |
    127 | 128 | 129 | 130 | 131 |
    132 | 133 | 134 | 135 | 152 | 153 | 154 | -------------------------------------------------------------------------------- /list_autoload.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 |
    19 | 20 |

    Auto Load List

    21 | 113 | 114 |
    115 | 116 | 117 | 118 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /list_load.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 |
    19 | 20 |

    Load List

    21 | 113 | 114 |
    115 | 116 | 117 | 118 | 137 | 138 | 139 | -------------------------------------------------------------------------------- /progress.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 18 | 19 | 20 |
    21 |

    progress bar

    22 |
    23 |
    24 | 25 |
    26 |
    27 | 28 |
    29 |
    30 |
    31 | 32 |
    33 |
    34 |
    35 |
    36 |
    37 | 38 |
    39 |
    40 |
    41 |
    42 |
    43 | 44 |
    45 |
    46 |
    47 | 48 |
    49 | 50 | 51 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /radio.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 18 | 19 | 20 |
    21 |

    radio

    22 | 26 | 30 |

    radios in groups

    31 |
    32 | 36 | 37 | 41 | 42 | 46 |
    47 | 48 |
    49 | 53 | 54 | 58 | 59 | 63 |
    64 | 65 | 66 |
    67 | 72 | 73 | 78 | 79 | 84 |
    85 | 86 |
    87 | 92 | 93 | 98 | 99 | 104 |
    105 | 106 |
    107 | 108 | 109 | 110 | 132 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /select.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 18 | 19 | 20 |
    21 |

    menu select

    22 | 23 |
    24 | 25 | 29 |
    30 |
    31 | 32 | 36 |
    37 | 38 |
    39 | 40 | 44 |
    45 | 46 |
    47 | 48 | 52 |
    53 | 54 |
    55 | 56 | 57 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /sl.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Mobile Cookbook 5 | 6 | 7 | 8 | 9 | 10 | 22 | 23 | 24 |

    切换

    25 |
    26 |
      27 |
    • 1
      • 28 |
    • 2
      • 29 |
    • 3
      • 30 |
    • 4
      • 31 |
    • 5
      • 32 |
    33 |
    34 | 35 | 36 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /slide.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 18 | 19 | 20 |
    21 |

    slider

    22 |
    23 |
    24 | 25 | 26 |
    27 |
    28 | 29 |
    30 | 31 |
    32 |
    33 | 34 |
    35 | 36 |
    37 |
    38 | 39 |
    40 | 41 |
    42 | 43 |
    44 | 45 | 46 |
    47 |
    48 | 49 |
    50 | 51 |
    52 |
    53 | 54 |
    55 | 56 |
    57 |
    58 | 59 |
    60 | 61 |
    62 |
    63 |
    64 | 65 | 66 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /swipe_change.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Mobile Cookbook 5 | 6 | 7 | 8 | 9 | 10 | 22 | 23 | 24 |

    拖动切换

    25 |
    26 |
    27 |
  • 1
    • 28 |
  • 2
    • 29 |
  • 3
    • 30 |
  • 4
    • 31 |
  • 5
    • 32 |
    33 |
    34 | 35 | 36 | 37 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /swipe_list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Mobile Cookbook 5 | 6 | 7 | 8 | 9 | 10 | 11 | 30 | 31 | 32 |
    33 |
    34 |

    列表切换

    35 | 38 |
    39 | 40 |
      41 |
    • 42 | 53 |
      • 54 |
    • page2
      • 55 |
    • page3
      • 56 |
    57 |
    58 | 59 | 60 | 61 | 62 | 63 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /tab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tab 5 | 6 | 7 | 8 | 9 | 19 | 20 | 21 |

    Tab

    22 |
    23 |
      24 |
    • head_1
      • 25 |
    • head_2
      • 26 |
    • head_3
      • 27 |
    • head_4
      • 28 |
    29 |
      30 |
    • 31 |
      tab-body-1
      32 |
      • 33 |
    • 34 |
      tab-body-2
      35 |
      • 36 | 37 |
    • 38 |
      tab-body-3
      39 |
      • 40 |
    • 41 |
      tab-body-4
      42 |
      • 43 |
    44 |
    45 |

    Tab With Animation

    46 |
    47 |
      48 |
    • head_1
      • 49 |
    • head_2
      • 50 |
    • head_3
      • 51 |
    • head_4
      • 52 |
    53 |
      54 |
    • 55 |
      tab-body-1
      56 |
      • 57 |
    • 58 |
      tab-body-2
      59 |
      • 60 | 61 |
    • 62 |
      tab-body-3
      63 |
      • 64 |
    • 65 |
      tab-body-4
      66 |
      • 67 |
    68 |
    69 |

    Tab With Fast Change Animation

    70 |
    71 |
      72 |
    • head_1
      • 73 |
    • head_2
      • 74 |
    • head_3
      • 75 |
    • head_4
      • 76 |
    77 |
      78 |
    • 79 |
      tab-body-1
      80 |
      • 81 |
    • 82 |
      tab-body-2
      83 |
      • 84 | 85 |
    • 86 |
      tab-body-3
      87 |
      • 88 |
    • 89 |
      tab-body-4
      90 |
      • 91 |
    92 |
    93 |

    Tab With Gesture

    94 |
    95 |
      96 |
    • head_1
      • 97 |
    • head_2
      • 98 |
    • head_3
      • 99 |
    • head_4
      • 100 |
    101 |
      102 |
    • 103 |
      tab-body-1
      104 |
      • 105 |
    • 106 |
      tab-body-2
      107 |
      • 108 | 109 |
    • 110 |
      tab-body-3
      111 |
      • 112 |
    • 113 |
      tab-body-4
      114 |
      • 115 |
    116 |
    117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 146 | 147 | 148 | 149 | -------------------------------------------------------------------------------- /test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 消息定向分享 7 | 8 | 9 | 10 | 11 | 49 | 50 | 51 |
    52 |
    123123
    53 |
    54 |
      55 |
    • 56 |
        57 |
      • 58 |
      59 |
      • 60 |
    • 61 |
        62 |
      • 63 |
      64 |
      • 65 |
    • 66 |
        67 |
      • 68 |
      69 |
      • 70 |
    • 71 |
        72 |
      • 73 |
      74 |
      • 75 |
    76 |
    77 |
    78 | 79 | 80 | 118 | 119 | -------------------------------------------------------------------------------- /test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 消息定向分享 7 | 8 | 9 | 10 | 11 | 36 | 37 | 38 |
    39 |
    40 |
    41 |

    123

    42 |

    123wdasd

    43 |

    123sdadasd

    44 |

    123sdadasd

    45 |

    123sdadasd

    46 |

    123sdadasd

    47 |

    123sdadasd

    48 |

    123

    49 |

    123wdasd

    50 |

    123sdadasd

    51 |

    123sdadasd

    52 |

    123sdadasd

    53 |

    123sdadasd

    54 |

    123sdadasd

    55 |

    123

    56 |

    123wdasd

    57 |

    123sdadasd

    58 |

    123sdadasd

    59 |

    123sdadasd

    60 |

    123sdadasd

    61 |

    123sdadasd

    62 |

    123

    63 |

    123wdasd

    64 |

    123sdadasd

    65 |

    123sdadasd

    66 |

    123sdadasd

    67 |

    123sdadasd

    68 |

    123sdadasd

    69 |

    123

    70 |

    123wdasd

    71 |

    123sdadasd

    72 |

    123sdadasd

    73 |

    123sdadasd

    74 |

    123sdadasd

    75 |

    123sdadasd

    76 | 77 |
    78 |
    79 |
    80 | 81 | 82 | 140 | 141 | -------------------------------------------------------------------------------- /test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 消息定向分享 7 | 8 | 9 | 10 | 11 | 21 | 22 | 23 |
    24 | 25 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /test4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 公众帐号 7 | 8 | 9 | 10 | 11 | 19 | 20 | 21 | 22 |
    23 | 24 |
    25 | 26 |
    27 | 28 | 75 | 76 | -------------------------------------------------------------------------------- /toggleswitch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 18 | 19 | 20 |
    21 |

    toggle switch

    22 | 23 |
    24 |
    25 |
    26 | on 27 | off 28 |
    29 | 30 |
    31 |
    32 |
    33 |
    34 |
    35 | on 36 | off 37 |
    38 | 39 |
    40 |
    41 |
    42 |
    43 |
    44 | on 45 | off 46 |
    47 | 48 |
    49 |
    50 | 51 | 52 |
    53 | 54 | 55 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /toolbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
    14 |

    header and footer

    15 |
    16 |
    17 |

    header

    18 |
    19 |

    content

    20 |

    content

    21 |

    content

    22 |
    23 |

    footer

    24 |
    25 |
    26 | 27 |
    28 |
    29 |

    header

    30 |
    31 |

    content

    32 |

    content

    33 |

    content

    34 |
    35 |

    footer

    36 |
    37 |
    38 | 39 |
    40 |
    41 |

    header

    42 |
    43 |

    content

    44 |

    content

    45 |

    content

    46 |
    47 |

    footer

    48 |
    49 |
    50 | 51 |
    52 | 53 | 54 | 55 | --------------------------------------------------------------------------------