Skip to content

Commit 5881b95

Browse files
hbcui1984hbcui1984
committed
新增透明渐变标题栏实现
1 parent ad66e63 commit 5881b95

File tree

3 files changed

+111
-63
lines changed

3 files changed

+111
-63
lines changed

‎Gruntfile.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ module.exports = function(grunt) {
9393
'js/mui.popup.js',
9494
'js/mui.progressbar.js',
9595
'js/input.plugin.js',
96+
'js/mui.transparent.js',
9697
'js/mui.number.js'
9798

9899
],

‎js/mui.transparent.js

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
(function($, window) {
2+
var rgbaRegex = /^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/;
3+
var getColor = function(colorStr) {
4+
var matches = colorStr.match(rgbaRegex);
5+
if (matches && matches.length === 5) {
6+
return [
7+
matches[1],
8+
matches[2],
9+
matches[3],
10+
matches[4]
11+
];
12+
}
13+
return [];
14+
};
15+
var Transparent = function(element, options) {
16+
this.element = element;
17+
this.options = $.extend({
18+
top: 0,
19+
offset: 150,
20+
duration: 16
21+
}, options || {});
22+
this._style = this.element.style;
23+
this._bgColor = this._style.backgroundColor;
24+
var color = getColor(mui.getStyles(this.element, 'backgroundColor'));
25+
if (color.length) {
26+
this._R = color[0];
27+
this._G = color[1];
28+
this._B = color[2];
29+
this._A = color[3];
30+
this._bufferFn = $.buffer(this.handleScroll, this.options.duration, this);
31+
this.initEvent();
32+
} else {
33+
throw new Error("元素背景颜色必须为RGBA");
34+
}
35+
};
36+
37+
Transparent.prototype.initEvent = function() {
38+
window.addEventListener('scroll', this._bufferFn);
39+
window.addEventListener($.EVENT_MOVE, this._bufferFn);
40+
};
41+
Transparent.prototype.handleScroll = function() {
42+
this._style.backgroundColor = 'rgba(' + this._R + ',' + this._G + ',' + this._B + ',' + (window.scrollY - this.options.top) / this.options.offset + ')';
43+
};
44+
Transparent.prototype.destory = function() {
45+
window.removeEventListener('scroll', this._bufferFn);
46+
window.removeEventListener($.EVENT_MOVE, this._bufferFn);
47+
this.element.style.backgroundColor = this._bgColor;
48+
this.element.mui_plugin_transparent = null;
49+
};
50+
$.fn.transparent = function(options) {
51+
options = options || {};
52+
var transparentApis = [];
53+
this.each(function() {
54+
var transparentApi = this.mui_plugin_transparent;
55+
if (!transparentApi) {
56+
var top = this.getAttribute('data-top');
57+
var offset = this.getAttribute('data-offset');
58+
var duration = this.getAttribute('data-duration');
59+
if (top !== null && typeof options.top === 'undefined') {
60+
options.top = top;
61+
}
62+
if (offset !== null && typeof options.offset === 'undefined') {
63+
options.offset = offset;
64+
}
65+
if (duration !== null && typeof options.duration === 'undefined') {
66+
options.duration = duration;
67+
}
68+
transparentApi = this.mui_plugin_transparent = new Transparent(this, options);
69+
}
70+
transparentApis.push(transparentApi);
71+
});
72+
return transparentApis.length === 1 ? transparentApis[0] : transparentApis;
73+
};
74+
$.ready(function() {
75+
$($.classSelector('.bar-transparent')).transparent();
76+
});
77+
})(mui, window);

‎sass/bars.scss

Lines changed: 33 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
//
22
// Bars
33
// --------------------------------------------------
4-
54
.#{$namespace}bar {
65
position: fixed;
76
right: 0;
@@ -16,10 +15,9 @@
1615
-webkit-backface-visibility: hidden; // Make sure the bar is visible when a modal animates in.
1716
backface-visibility: hidden;
1817
}
19-
2018
//fixed by fxy
21-
.#{$namespace}bar{
22-
.#{$namespace}title{
19+
.#{$namespace}bar {
20+
.#{$namespace}title {
2321
width: auto;
2422
left: 40px;
2523
right: 40px;
@@ -31,59 +29,55 @@
3129
.#{$namespace}backdrop {
3230
background: none;
3331
}
34-
3532
}
36-
3733
// Modifier class to dock any bar below .#{$namespace}bar-nav
3834
.#{$namespace}bar-header-secondary {
3935
top: $bar-base-height;
4036
}
41-
4237
// Modifier class for footer bars
4338
.#{$namespace}bar-footer {
4439
bottom: 0;
4540
}
46-
4741
// Modifier class to dock any bar above a standard bar
4842
.#{$namespace}bar-footer-secondary {
4943
bottom: $bar-base-height;
5044
}
51-
5245
// Modifier class to dock any bar above a .#{$namespace}bar-tab
5346
.#{$namespace}bar-footer-secondary-tab {
5447
bottom: $bar-tab-height;
5548
}
56-
5749
// Give the footers the correct border
5850
.#{$namespace}bar-footer,
5951
.#{$namespace}bar-footer-secondary,
6052
.#{$namespace}bar-footer-secondary-tab {
6153
border-top: 0;
6254
}
63-
64-
6555
// Nav bar
6656
// --------------------------------------------------
67-
6857
// Bar docked to top of viewport for showing page title and actions
58+
.#{$namespace}bar-transparent {
59+
top: 0;
60+
background-color: rgba(247,247,247,0); //应该设置成变量
61+
-webkit-box-shadow: none;
62+
box-shadow: none;
63+
}
6964
.#{$namespace}bar-nav {
7065
top: 0;
71-
-webkit-box-shadow: 0px 1px 6px #CCC;
72-
box-shadow: 0px 1px 6px #CCC;
73-
~ .#{$namespace}content .#{$namespace}anchor{
66+
-webkit-box-shadow: 0 1px 6px #CCC;
67+
box-shadow: 0 1px 6px #CCC;
68+
~ .#{$namespace}content .#{$namespace}anchor {
7469
display: block;
7570
height: 45px;
7671
margin-top: -45px;
7772
visibility: hidden;
7873
}
79-
&.#{$namespace}bar .#{$namespace}icon{
74+
&.#{$namespace}bar .#{$namespace}icon {
8075
margin-left: -10px;
8176
margin-right: -10px;
8277
padding-left: 10px;
8378
padding-right: 10px;
8479
}
8580
}
86-
8781
// Centered text in the .#{$namespace}bar-nav
8882
//
8983
// We position the absolutely to make sure the title is always centered
@@ -104,11 +98,8 @@
10498
.#{$namespace}title a {
10599
color: inherit;
106100
}
107-
108-
109101
// Tab bar
110102
// --------------------------------------------------
111-
112103
// Bar docked to bottom and used for primary app navigation
113104
.#{$namespace}bar-tab {
114105
display: table;
@@ -119,8 +110,7 @@
119110
table-layout: fixed;
120111
border-top: 0;
121112
border-bottom: 0;
122-
-webkit-touch-callout: none;//选项卡上禁止长按弹出菜单；
123-
113+
-webkit-touch-callout: none; //选项卡上禁止长按弹出菜单；
124114
// Navigational tab (Nested to be more specific for the icons in tab-items)
125115
.#{$namespace}tab-item {
126116
display: table-cell;
@@ -133,20 +123,17 @@
133123
overflow: hidden;
134124
text-overflow: ellipsis;
135125
white-space: nowrap;
136-
137126
// Active states for the tab bar
138127
&.#{$namespace}active {
139128
color: $primary-color;
140129
}
141-
142130
// Tab icon
143131
.#{$namespace}icon {
144132
top: 3px;
145133
width: 24px;
146134
height: 24px;
147135
padding-top: 0;
148136
padding-bottom: 0;
149-
150137
// Make the text smaller if it's used with an icon
151138
~ .#{$namespace}tab-label {
152139
display: block;
@@ -161,24 +148,22 @@
161148
}
162149
}
163150
}
164-
.#{$namespace}focusin>.#{$namespace}bar-nav,.#{$namespace}focusin>.#{$namespace}bar-header-secondary{
165-
position:absolute;
151+
.#{$namespace}focusin>.#{$namespace}bar-nav,
152+
.#{$namespace}focusin>.#{$namespace}bar-header-secondary {
153+
position: absolute;
166154
}
167-
.#{$namespace}focusin>.#{$namespace}bar~.#{$namespace}content{
155+
.#{$namespace}focusin>.#{$namespace}bar~.#{$namespace}content {
168156
padding-bottom: 0;
169157
}
170-
171158
// Bars with buttons
172159
// --------------------------------------------------
173-
174160
.#{$namespace}bar .#{$namespace}btn {
175161
position: relative;
176162
top: 7px;
177163
z-index: z("bar","btn"); // Position the buttons on top of .#{$namespace}title
178164
padding: 6px 12px 7px;
179165
margin-top: 0;
180166
font-weight: $font-weight-light;
181-
182167
// Give buttons that are floated left and right side margin
183168
&.#{$namespace}pull-right {
184169
margin-left: $bar-side-spacing;
@@ -187,7 +172,6 @@
187172
margin-right: $bar-side-spacing;
188173
}
189174
}
190-
191175
// Bars with link buttons (Line the text up with content)
192176
.#{$namespace}bar .#{$namespace}btn-link {
193177
top: 0;
@@ -196,13 +180,11 @@
196180
line-height: $bar-base-height;
197181
color: $primary-color;
198182
border: 0;
199-
200183
&:active,
201-
&.#{$namespace}active {
184+
&.#{$namespace}active {
202185
color: darken($primary-color, 10%);
203186
}
204187
}
205-
206188
// Bars with block buttons
207189
//
208190
// Add proper padding
@@ -212,101 +194,89 @@
212194
margin-bottom: 0;
213195
font-size: 16px; // Scale down font size to fit in bar.
214196
}
215-
216197
// Nav buttons (Only applicable within bars)
217198
//
218199
// Buttons inside bars that sit closer against the viewport.
219200
.#{$namespace}bar .#{$namespace}btn-nav {
220201
&.#{$namespace}pull-left {
221202
margin-left: -5px;
222-
223203
.#{$namespace}icon-left-nav {
224204
margin-right: -3px;
225205
}
226206
}
227207
&.#{$namespace}pull-right {
228208
margin-right: -5px;
229-
230209
.#{$namespace}icon-right-nav {
231210
margin-left: -3px;
232211
}
233212
}
234-
&:active{
235-
opacity: .3;
213+
&:active {
214+
opacity: 0.3;
236215
//background-color: rgba(0,0,0,.07);
237216
}
238217
}
239-
240-
241218
// Bars with Muiicons
242219
// --------------------------------------------------
243-
244220
.#{$namespace}bar {
245221
.#{$namespace}icon {
246222
position: relative;
247223
z-index: z("bar","icon"); // Position the buttons on top of .#{$namespace}title
248224
padding-top: 10px;
249225
padding-bottom: 10px;
250226
font-size: 24px;
251-
252227
&:active {
253-
opacity: .3;
228+
opacity: 0.3;
254229
//background-color: rgba(0,0,0,.07);
255230
}
256231
}
257-
258232
// Vertical center the larger icons in btns.
259233
.#{$namespace}btn .#{$namespace}icon {
260234
top: 1px;
261235
padding: 0;
262-
margin:0;
236+
margin: 0;
263237
}
264-
265238
// Handle carets in the titles
266239
.#{$namespace}title .#{$namespace}icon {
267240
padding: 0;
268-
margin:0;
241+
margin: 0;
269242
// Specific postioning of the caret icon within a title. Used with popover.js.
270243
&.#{$namespace}icon-caret {
271244
top: 4px;
272245
margin-left: -5px;
273246
}
274247
}
275248
}
276-
277-
278249
// Bars for search forms
279250
// --------------------------------------------------
280-
281251
// Position/size search bar within the bar
282252
.#{$namespace}bar input[type="search"] {
283253
height: 29px;
284254
margin: 6px 0;
285255
}
286-
.#{$namespace}bar .#{$namespace}input-row .#{$namespace}btn{
256+
.#{$namespace}bar .#{$namespace}input-row .#{$namespace}btn {
287257
padding: 12px 10px;
288258
}
289-
.#{$namespace}bar .#{$namespace}search:before{
290-
margin-top: -10px;
291-
}
292-
.#{$namespace}bar .#{$namespace}input-row .#{$namespace}input-clear~.#{$namespace}icon-clear, .#{$namespace}bar .#{$namespace}input-row .#{$namespace}input-speech~.#{$namespace}icon-speech{
259+
.#{$namespace}bar .#{$namespace}search:before {
260+
margin-top: -10px;
261+
}
262+
.#{$namespace}bar .#{$namespace}input-row .#{$namespace}input-clear~.#{$namespace}icon-clear,
263+
.#{$namespace}bar .#{$namespace}input-row .#{$namespace}input-speech~.#{$namespace}icon-speech {
293264
top: 0;
294265
right: 12px;
295266
}
296-
.#{$namespace}bar.#{$namespace}bar-header-secondary .#{$namespace}input-row .#{$namespace}input-clear~.#{$namespace}icon-clear, .#{$namespace}bar.#{$namespace}bar-header-secondary .#{$namespace}input-row .#{$namespace}input-speech~.#{$namespace}icon-speech{
267+
.#{$namespace}bar.#{$namespace}bar-header-secondary .#{$namespace}input-row .#{$namespace}input-clear~.#{$namespace}icon-clear,
268+
.#{$namespace}bar.#{$namespace}bar-header-secondary .#{$namespace}input-row .#{$namespace}input-speech~.#{$namespace}icon-speech {
297269
top: 0;
298270
right: 0;
299271
}
300-
301272
// Bars with segmented controls
302273
// --------------------------------------------------
303-
304274
// Position the control correctly inside a bar.
305275
.#{$namespace}bar .#{$namespace}segmented-control {
306276
top: 7px;
307277
margin: 0 auto;
308278
width: auto;
309279
}
310280
.#{$namespace}bar.#{$namespace}bar-header-secondary .#{$namespace}segmented-control {
311-
top: 0px;
312-
}
281+
top: 0;
282+
}

0 commit comments

Comments
 (0)