Fix pager icons to use a container so that ui-state-default/hover bac…

…kground images will work as expected
rmurphey · Apr 21, 2010 · b78e2f7 · b78e2f7
1 parent 210cbab
commit b78e2f7
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 13 deletions.
diff --git a/slick.pager.css b/slick.pager.css
@@ -14,7 +14,7 @@
 	padding: 6px;
 }
 
-.slick-pager .ui-icon
+.slick-pager .ui-icon-container
 {
 	display: inline-block;
 	margin: 2px;

diff --git a/slick.pager.js b/slick.pager.js
@@ -87,33 +87,32 @@
                 }
             });
 
-            $("<span class='ui-icon ui-icon-lightbulb' />")
+            var icon_prefix = "<span class='ui-state-default ui-corner-all ui-icon-container'><span class='ui-icon ";
+            var icon_suffix = "' /></span>";
+
+            $(icon_prefix + "ui-icon-lightbulb" + icon_suffix)
                     .click(function() { $(".slick-pager-settings-expanded").toggle() })
                     .appendTo($settings);
 
-            $("<span class='ui-icon ui-icon-seek-first' />")
+            $(icon_prefix + "ui-icon-seek-first" + icon_suffix)
                     .click(gotoFirst)
                     .appendTo($nav);
 
-            $("<span class='ui-icon ui-icon-seek-prev' />")
+            $(icon_prefix + "ui-icon-seek-prev" + icon_suffix)
                     .click(gotoPrev)
                     .appendTo($nav);
 
-            $("<span class='ui-icon ui-icon-seek-next' />")
+            $(icon_prefix + "ui-icon-seek-next" + icon_suffix)
                     .click(gotoNext)
                     .appendTo($nav);
 
-            $("<span class='ui-icon ui-icon-seek-end' />")
+            $(icon_prefix + "ui-icon-seek-end" + icon_suffix)
                     .click(gotoLast)
                     .appendTo($nav);
 
-            $container.find(".ui-icon")
+            $container.find(".ui-icon-container")
-                    .addClass("ui-state-default ui-corner-all")
+                    .hover(function() {
-                    .mouseover(function(e) {
+                        $(this).toggleClass("ui-state-hover");
-                        $(e.target).addClass("ui-state-hover")
-                    })
-                    .mouseout(function(e) {
-                        $(e.target).removeClass("ui-state-hover")
                     });
 
             $container.children().wrapAll("<div class='slick-pager' />");