提示框改进

hacvk · Oct 17, 2013 · 76d5948 · 76d5948
1 parent ab1185e
commit 76d5948
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 315 deletions.
diff --git a/admin/common-js.php b/admin/common-js.php
@@ -7,28 +7,51 @@
         $(document).ready(function() {
             <?php if ($notice->highlight): ?>                
             //增加高亮效果
-            $('#<?php echo $notice->highlight; ?>').addClass('nohover')
-                .effect('highlight', '#AACB36', 1000, function () {
-                    $(this).removeClass('nohover');
-                });
+            $('#<?php echo $notice->highlight; ?>').effect('highlight', 1000);
             <?php endif; ?>
 
             //增加淡出效果
             (function () {
                 var p = $('.popup');
 
                 if (p.length > 0) {
-                    if (p.hasClass('notice')) {
-                        p.effect('bounce');
-                    } else if (p.hasClass('error')) {
-                        p.effect('shake');
-                    } else {
-                        p.slideDown();
+                    var head = $('.typecho-head-nav'), 
+                        offset = head.length > 0 ? head.outerHeight() : 0;
+
+                    function checkScroll () {
+                        if ($(window).scrollTop() >= offset) {
+                            p.css({
+                                'position'  :   'fixed',
+                                'top'       :   0
+                            });
+                        } else {
+                            p.css({
+                                'position'  :   'absolute',
+                                'top'       :   offset
+                            });
+                        }
                     }
-
-                    p.sticky({
-                        getWidthFrom    :   document.body
-                    }).delay(5000).fadeOut();
+
+                    $(window).scroll(function () {
+                        checkScroll();
+                    });
+
+                    checkScroll();
+
+                    p.slideDown(function () {
+                        var t = $(this), color = '#C6D880';
+
+                        if (t.hasClass('error')) {
+                            color = '#FBC2C4';
+                        } else if (t.hasClass('notice')) {
+                            color = '#FFD324';
+                        }
+
+                        t.effect('highlight', {color : color})
+                            .delay(5000).slideUp(function () {
+                            $(this).remove();
+                        });
+                    });
                 }
             })();
 

diff --git a/admin/css/style.css b/admin/css/style.css
@@ -427,12 +427,16 @@ button.primary:active, button.primary.active {
 /** 增加顶部消息样式 by 70 */
 .popup {
     border-width: 0 0 1px 0;
-    position: relative;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
     z-index: 10;
     text-align: center;
     font-weight: bold;
     display: none;
     margin: 0;
+    padding: 5px 0;
 
     -moz-border-radius: 0;
     -moz-border-radius: 0;
@@ -448,6 +452,12 @@ button.primary:active, button.primary.active {
     list-style: none;
     margin: 0;
     padding: 0;
+    text-align: center;
+}
+
+.popup ul li {
+    display: inline-block;
+    margin-right: 10px;
 }
 
 /** 

diff --git a/admin/file-upload-js.php b/admin/file-upload-js.php
@@ -41,7 +41,7 @@ function fileUploadComplete (id, url, data) {
                 + data.cid + '">' + data.title + '</a> ' + data.bytes
                 + ' <a class="insert" href="#"><?php _e('插入'); ?></a>'
                 + ' <a class="delete" href="#">&times;</a>')
-            .effect('highlight', '#AACB36', 1000);
+            .effect('highlight', 1000);
 
         attachInsertEvent(li);
         attachDeleteEvent(li);

diff --git a/admin/javascript/jquery-ui.js b/admin/javascript/jquery-ui.js
@@ -1,6 +1,6 @@
 /*! jQuery UI - v1.10.3 - 2013-10-16
 * http://jqueryui.com
-* Includes: jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.datepicker.js, jquery.ui.slider.js, jquery.ui.effect.js, jquery.ui.effect-bounce.js, jquery.ui.effect-highlight.js, jquery.ui.effect-shake.js
+* Includes: jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.datepicker.js, jquery.ui.slider.js, jquery.ui.effect.js, jquery.ui.effect-highlight.js
 * Copyright 2013 jQuery Foundation and other contributors; Licensed MIT */
 
 (function( $, undefined ) {
@@ -4943,106 +4943,6 @@ $.each( baseEasings, function( name, easeIn ) {
 })(jQuery);
 (function( $, undefined ) {
 
-$.effects.effect.bounce = function( o, done ) {
-	var el = $( this ),
-		props = [ "position", "top", "bottom", "left", "right", "height", "width" ],
-
-		// defaults:
-		mode = $.effects.setMode( el, o.mode || "effect" ),
-		hide = mode === "hide",
-		show = mode === "show",
-		direction = o.direction || "up",
-		distance = o.distance,
-		times = o.times || 5,
-
-		// number of internal animations
-		anims = times * 2 + ( show || hide ? 1 : 0 ),
-		speed = o.duration / anims,
-		easing = o.easing,
-
-		// utility:
-		ref = ( direction === "up" || direction === "down" ) ? "top" : "left",
-		motion = ( direction === "up" || direction === "left" ),
-		i,
-		upAnim,
-		downAnim,
-
-		// we will need to re-assemble the queue to stack our animations in place
-		queue = el.queue(),
-		queuelen = queue.length;
-
-	// Avoid touching opacity to prevent clearType and PNG issues in IE
-	if ( show || hide ) {
-		props.push( "opacity" );
-	}
-
-	$.effects.save( el, props );
-	el.show();
-	$.effects.createWrapper( el ); // Create Wrapper
-
-	// default distance for the BIGGEST bounce is the outer Distance / 3
-	if ( !distance ) {
-		distance = el[ ref === "top" ? "outerHeight" : "outerWidth" ]() / 3;
-	}
-
-	if ( show ) {
-		downAnim = { opacity: 1 };
-		downAnim[ ref ] = 0;
-
-		// if we are showing, force opacity 0 and set the initial position
-		// then do the "first" animation
-		el.css( "opacity", 0 )
-			.css( ref, motion ? -distance * 2 : distance * 2 )
-			.animate( downAnim, speed, easing );
-	}
-
-	// start at the smallest distance if we are hiding
-	if ( hide ) {
-		distance = distance / Math.pow( 2, times - 1 );
-	}
-
-	downAnim = {};
-	downAnim[ ref ] = 0;
-	// Bounces up/down/left/right then back to 0 -- times * 2 animations happen here
-	for ( i = 0; i < times; i++ ) {
-		upAnim = {};
-		upAnim[ ref ] = ( motion ? "-=" : "+=" ) + distance;
-
-		el.animate( upAnim, speed, easing )
-			.animate( downAnim, speed, easing );
-
-		distance = hide ? distance * 2 : distance / 2;
-	}
-
-	// Last Bounce when Hiding
-	if ( hide ) {
-		upAnim = { opacity: 0 };
-		upAnim[ ref ] = ( motion ? "-=" : "+=" ) + distance;
-
-		el.animate( upAnim, speed, easing );
-	}
-
-	el.queue(function() {
-		if ( hide ) {
-			el.hide();
-		}
-		$.effects.restore( el, props );
-		$.effects.removeWrapper( el );
-		done();
-	});
-
-	// inject all the animations we just queued to be first in line (after "inprogress")
-	if ( queuelen > 1) {
-		queue.splice.apply( queue,
-			[ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) );
-	}
-	el.dequeue();
-
-};
-
-})(jQuery);
-(function( $, undefined ) {
-
 $.effects.effect.highlight = function( o, done ) {
 	var elem = $( this ),
 		props = [ "backgroundImage", "backgroundColor", "opacity" ],
@@ -5078,64 +4978,3 @@ $.effects.effect.highlight = function( o, done ) {
 };
 
 })(jQuery);
-(function( $, undefined ) {
-
-$.effects.effect.shake = function( o, done ) {
-
-	var el = $( this ),
-		props = [ "position", "top", "bottom", "left", "right", "height", "width" ],
-		mode = $.effects.setMode( el, o.mode || "effect" ),
-		direction = o.direction || "left",
-		distance = o.distance || 20,
-		times = o.times || 3,
-		anims = times * 2 + 1,
-		speed = Math.round(o.duration/anims),
-		ref = (direction === "up" || direction === "down") ? "top" : "left",
-		positiveMotion = (direction === "up" || direction === "left"),
-		animation = {},
-		animation1 = {},
-		animation2 = {},
-		i,
-
-		// we will need to re-assemble the queue to stack our animations in place
-		queue = el.queue(),
-		queuelen = queue.length;
-
-	$.effects.save( el, props );
-	el.show();
-	$.effects.createWrapper( el );
-
-	// Animation
-	animation[ ref ] = ( positiveMotion ? "-=" : "+=" ) + distance;
-	animation1[ ref ] = ( positiveMotion ? "+=" : "-=" ) + distance * 2;
-	animation2[ ref ] = ( positiveMotion ? "-=" : "+=" ) + distance * 2;
-
-	// Animate
-	el.animate( animation, speed, o.easing );
-
-	// Shakes
-	for ( i = 1; i < times; i++ ) {
-		el.animate( animation1, speed, o.easing ).animate( animation2, speed, o.easing );
-	}
-	el
-		.animate( animation1, speed, o.easing )
-		.animate( animation, speed / 2, o.easing )
-		.queue(function() {
-			if ( mode === "hide" ) {
-				el.hide();
-			}
-			$.effects.restore( el, props );
-			$.effects.removeWrapper( el );
-			done();
-		});
-
-	// inject all the animations we just queued to be first in line (after "inprogress")
-	if ( queuelen > 1) {
-		queue.splice.apply( queue,
-			[ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) );
-	}
-	el.dequeue();
-
-};
-
-})(jQuery);