diff --git a/.gitignore b/.gitignore index 4dadc49..08fe04f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,3 @@ -selectordie_dev.js -index_dev.html +_demo/index_dev.html _src/selectordie.dev.js +_src/selectordie.dev.css diff --git a/_demo/index.html b/_demo/index.html index 9054e90..52d31d5 100644 --- a/_demo/index.html +++ b/_demo/index.html @@ -28,7 +28,8 @@ - + @@ -99,6 +100,17 @@

Config

+ + placeholderOption + boolean + + + As above, but uses the first option as a placeholder + + + prefix string @@ -218,7 +230,7 @@

Basic example

Custom class/ID

"" by default

-

Maybe you have multiple selects on the same page and one should look different, or whatever need you can find for a custom class/ID. In this example we're using a custom class give the SoD a different look.

+

Maybe you have multiple selects on the same page and one should look different, or whatever need you can find for a custom class/ID. In this example we're using a custom class to give the SoD a different look.

@@ -255,7 +267,7 @@ 
Custom class/ID

 
         

             

-                
Placeholder

+                
Placeholder - alt. 1

                 
null by default

                 
If you feel like adding a placeholder that's displayed before anything is selected. Once a selection has been made the placeholder will be removed until the user clicks the SoD again, then it will be shown until the user makes a new selection or focus is lost on the SoD. The "placeholder" is given the class .sod_placeholder

             

@@ -285,13 +297,48 @@ 
Placeholder

     
 
 
+    

+
+        

+            

+                
Placeholder - alt. 2

+                
false by default

+                
From version v0.1.8 you can set the first <option> to be used as a placeholder. It works pretty much as the placeholder option above. The main difference is that the first <option> will not be visible in the SoD other than as a placeholder.

+            

+
+            
+$("select").selectOrDie({
+    placeholderOption: true
+});

+
+            
or

+
+            
+$("select").selectOrDie();
+<select data-placeholder-option="true">

+        

+
+        

+            
+        

+
+    

+
+
     

 
         

             

                 
Prefix

                 
null by default

-                
Add a prefix that's displayed in front of the selected option. The "prefix" is given the class .sod_prefix,

+                
Add a prefix that's displayed in front of the selected option. The "prefix" is given the class .sod_prefix. If a prefix is set then both the placeholder and placeholderOption options will be ignored.

             

 
             
@@ -366,19 +413,20 @@ 
Links / External links

             
 $("select").selectOrDie({
     links: true,
-    placeholder: "Go to...",
-    customClass: "no_highlight"
+    // Option below is not needed
+    placeholderOption: true
 });

 
             
or

 
             
 $("select").selectOrDie();
-<select data-links="true" data-placeholder="Go to..." data-custom-class="no_highlight">

+<select data-links="true" data-placeholder-option="true">

         

 
         

-            
+                
                 
                 
                 
@@ -666,6 +714,7 @@ 
Download / Usage

             
 
             
Download the .zip file by clicking the download button below. Once downloaded, unzip it and include the selectordie.css and either of the two .js files found in the "_src" folder. Initialize the plugin, targeting the desired element in the jQuery selector. Just like in the basic example above. Then you're all good!

+            
If you use the SoD I'd love to hear about it. Send a tweet to @mybeardandi.

 
             

                 Download
@@ -725,7 +774,7 @@ 
Compability / Misc

 
             
    
                 
  • Tested with jQuery v1.8 and jQuery v2.1 and nothing in between (it should work just fine with a version in between the tested versions). Please note that if you use jQuery 2.x IE8 will not be supported, you can read more about this over att the jQuery blog.
    • 
-                
  • Tested in Firefox / Chrome / Safari / Opera / IE8+
    • 
+                
  • Tested in Firefox / Chrome / Safari / Opera / IE8+ (yes, for real this time)
    • 
                 
  • This demo is using jQuery Litelighter by Trent Richardson. The jQuery Litelighter is NOT required by Select or Die, it's just used to format the code blocks in this demo.
    • 
                 
  • Cover photo found over at New Old Stock
    • 
             

diff --git a/_src/selectordie.css b/_src/selectordie.css
index fec2ea0..b82aad0 100644
--- a/_src/selectordie.css
+++ b/_src/selectordie.css
@@ -1,7 +1,7 @@
 /* ===========================================================
  *
- *  Name:          selectordie.css
- *  Updated:       2014-07-07
+ *  Name:          selectordie_dev.css
+ *  Updated:       2014-10-10
  *  Created by:    Per V @ Vst.mn
  *  What?:         Base CSS for Select or Die
  *
@@ -170,6 +170,11 @@
                 /* Children of an optgroup */
                 .sod_select .sod_option.groupchild { padding-left: 20px; }
 
+            /* Used together with placeholderOption / data-placeholder-option */
+            .sod_select .sod_option.is-placeholder {
+                display: none;
+            }
+
             /* Disabled option */
             .sod_select .sod_option.disabled
                 {
diff --git a/_src/selectordie.js b/_src/selectordie.js
index 0665851..59d0063 100644
--- a/_src/selectordie.js
+++ b/_src/selectordie.js
@@ -1,8 +1,8 @@
 /* ===========================================================
  *
  *  Name:          selectordie.js
- *  Updated:       2014-10-09
- *  Version:       0.1.7
+ *  Updated:       2014-10-11
+ *  Version:       0.1.8
  *  Created by:    Per V @ Vst.mn
  *  What?:         The Select or Die JS
  *
@@ -21,17 +21,18 @@
     $.fn.selectOrDie = function (method) {
 
         var $defaults = {
-                customID:      null,          // String - "" by default - Adds an ID to the SoD
-                customClass:   "",            // String - "" by default - Adds a class to the SoD
-                placeholder:   null,          // String - "" by default - Adds a placeholder that will be shown before a selection has been made
-                prefix:        null,          // String - "" by default - Adds a prefix that always will be shown before the selected value
-                cycle:         false,         // Boolean - false by default - Should keyboard cycle through options or not?
-                stripEmpty:    false,         // Boolean - false by default - Should empty