فهرست منبع

Added ability to add font-awesome icons to the labels of the switches by data-icon attribute.

Marco Kerwitz 12 سال پیش
والد
کامیت
5e2d5a7b05
2فایلهای تغییر یافته به همراه17 افزوده شده و 1 حذف شده
  1. 9 1
      static/js/bootstrapSwitch.js
  2. 8 0
      static/stylesheets/bootstrapSwitch.css

+ 9 - 1
static/js/bootstrapSwitch.js

@@ -23,7 +23,8 @@
               , color
               , moving
               , onLabel = "ON"
-              , offLabel = "OFF";
+              , offLabel = "OFF"
+              , icon = false;
 
             $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) {
               if (classes.indexOf(el) >= 0)
@@ -41,6 +42,9 @@
             if ($element.data('off-label') !== undefined)
               offLabel = $element.data('off-label');
 
+            if ($element.data('icon') !== undefined)
+              icon = $element.data('icon');
+
             $switchLeft = $('<span>')
               .addClass("switch-left")
               .addClass(myClasses)
@@ -62,6 +66,10 @@
               .addClass(myClasses)
               .attr('for', $element.find('input').attr('id'));
 
+            if (icon) {
+              $label.html('<i class="icon icon-'+icon+'"></i>');
+            }
+
             $div = $element.find(':checkbox').wrap($('<div>')).parent().data('animated', false);
 
             if ($element.data('animated') !== false)

+ 8 - 0
static/stylesheets/bootstrapSwitch.css

@@ -99,6 +99,7 @@
   line-height: normal;
 }
 .has-switch label {
+  text-align: center;
   margin-top: -1px;
   margin-bottom: -1px;
   z-index: 100;
@@ -136,6 +137,13 @@
 .has-switch label.active {
   background-color: #cccccc \9;
 }
+
+	.has-switch label i {
+		color: #000;
+		text-shadow: 0 1px 0 #fff;
+		line-height: 18px;
+	}
+
 .has-switch span {
   text-align: center;
   z-index: 1;