Trang chủ Khám phá Trợ giúp
Đăng nhập
hugh
/
awesome-select
1
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu khéo về 0 Wiki
Browse Source

Fixed the placeholder color bug

Previnash Wong 8 năm trước cách đây
mục cha
c16e71b40e
commit
74e9fa3d08
5 tập tin đã thay đổi với 55 bổ sung và 23 xóa
View chưa được định nghĩa Hiển thị tình trạng sai khác
  1. 36 15
      dropdown.js
  2. 12 6
      index.html
  3. 1 1
      scss/app.css
  4. 1 1
      scss/app.css.map
  5. 5 0
      scss/app.scss

+ 36 - 15
dropdown.js
Xem Tập Tin 

@@ -21,19 +21,17 @@ dropdown_count = 0;
 
 			build($(this), opts);
 
 			build($(this), opts);
 
 		})
 
 		})
 
 		
 		
-		
-		$('body').on('click', '.dropdown', function(){
 
-			//alert(3)
 
-			if ( $(this).hasClass('animate') == false ) {
 
-				animate($(this))
 
-			}
 
+
 
+		this.on('click', function(){
 
+			animate(getDropdownElement($(this)));
 
 		})
 
 		})
 
 
 
-		$('body').on('click', '.dropdown ul li a', function(){
 
-			setValue($(this).parents('.dropdown'), $(this).parent('li').index())
 
+		this.on('change', function(){
 
+			setValue(this);
 
 		})
 
 		})
 
 
 
-		
+		console.log(element.attr('id'))
 
+	
 
 
 		return {
 
 		return {
 
 
 
@@ -52,6 +50,9 @@ dropdown_count = 0;
 
 	}
 
 	}
 
 
 
 
 
+	function getDropdownElement(select){
 
+		return $('.dropdown[data-select="' + select.attr('id') + '"]')
 
+	}
 
 
 
 	function build(element, opts){
 
 	function build(element, opts){
 
 		var placeholder = element.attr('data-placeholder')
 
 		var placeholder = element.attr('data-placeholder')
 
@@ -183,12 +184,12 @@ dropdown_count = 0;
 
 		element.find('.front_face .icon svg').css('fill', placeholder_inactive_color)
 
 		element.find('.front_face .icon svg').css('fill', placeholder_inactive_color)
 
 						
 						
 	}
 
 	}
 
-	function setValue(euler_dropdown, value_index){
 
-		var id = euler_dropdown.attr('data-select')
 
-		var select = document.getElementById(id);
 
-		var option_value = $(select).children('option').eq(value_index)
 
+	function setValue(select){
 
+		var val = $(select).val()
 
+		var euler_dropdown = getDropdownElement($(select))
 
+		var option_value = $(select).children('option[value="'+ val +'"]').eq(0)
 
 		var callback = $(select).attr('data-callback')
 
 		var callback = $(select).attr('data-callback')
 
-		$(select).val(option_value.val())
 
+
 
 		$(euler_dropdown).find('.current_value').remove()
 
 		$(euler_dropdown).find('.current_value').remove()
 
 		$(euler_dropdown).find('.front_face .content').prepend('<span class = "current_value">'+ option_value.text() + '</span>')
 
 		$(euler_dropdown).find('.front_face .content').prepend('<span class = "current_value">'+ option_value.text() + '</span>')
 
 		$(euler_dropdown).addClass('hasValue')
 
 		$(euler_dropdown).addClass('hasValue')
 
@@ -198,7 +199,7 @@ dropdown_count = 0;
 
 		}
 
 		}
 
 		setTimeout(function(){
 
 		setTimeout(function(){
 
 			deanimate()
 
 			deanimate()
 
-		}, 100)
 
+		}, 200)
 
 		
 		
 	}
 
 	}
 
 
 
@@ -214,3 +215,23 @@ dropdown_count = 0;
 
 function hello(value){
 
 function hello(value){
 
 	console.log("hello world! the selected value is " + value)
 
 	console.log("hello world! the selected value is " + value)
 
 }
 
 }
 
+
 
+$(document).ready(function(){
 
+	$('body').on('click', '.dropdown', function(){
 
+		if ( $(this).hasClass('animate2') == false )  {
 
+			$('select#' + $(this).attr('id').replace('euler_', '')).trigger('click')
 
+		}
 
+	
+	})
 
+	$('body').on('click', '.dropdown ul li a', function(){
 
+		var dropdown = $(this).parents('.dropdown')
 
+		var value_index = $(this).parent('li').index()
 
+		
+		var id = dropdown.attr('data-select')
 
+		var select = $('select#' + id)
 
+		var option_value = $(select).children('option').eq(value_index)
 
+		var callback = $(select).attr('data-callback')
 
+		$(select).val(option_value.val())
 
+		$(select).trigger('change')
 
+	})
 
+})

+ 12 - 6
index.html
Xem Tập Tin 

@@ -9,11 +9,13 @@
 
 	<script type="text/javascript" src="dropdown.js"></script>
 
 	<script type="text/javascript" src="dropdown.js"></script>
 
 	<script type="text/javascript">
 
 	<script type="text/javascript">
 
 		$(document).ready(function(){
 
 		$(document).ready(function(){
 
-			$('select').dropdown({
 
-				background: "#000",
 
+			$('select.light').dropdown()
 
+
 
+			$('select.dark').dropdown({
 
+				background: "#0f37a9",
 
 				active_background:"#fff",
 
 				active_background:"#fff",
 
-				placeholder_color: "#fff",
 
-				placeholder_active_color: "green",
 
+				placeholder_color: "#97bce0",
 
+				placeholder_active_color: "#0f37a9",
 
 				link_color:"#000"
 
 				link_color:"#000"
 
 			})
 
 			})
 
 
 
@@ -26,7 +28,8 @@
 
 <body>
 
 <body>
 
 	<div class="row">
 
 	<div class="row">
 
 	<div id = "content">
 
 	<div id = "content">
 
-		<select data-callback="hello" data-placeholder="Select an option">
 
+		<div class = "divider">
 
+		<select class="light" data-callback="hello" data-placeholder="Select an option">
 
 			<option value="1">Option 1</option>
 
 			<option value="1">Option 1</option>
 
 			<option value="2">Option 2</option>
 
 			<option value="2">Option 2</option>
 
 			<option value="3">Option 3</option>
 
 			<option value="3">Option 3</option>
 
@@ -43,11 +46,14 @@
 
 			<option value="2">Option 2</option>
 
 			<option value="2">Option 2</option>
 
 			<option value="3">Option 3</option>
 
 			<option value="3">Option 3</option>
 
 		</select>
 
 		</select>
 
-		<select id = "hello_dropdown" data-callback="hello" data-placeholder="Select an option">
 
+		</div>
 
+		<div class = "divider">
 
+		<select class = "dark" id = "hello_dropdown" data-callback="hello" data-placeholder="Select an option">
 
 			<option value="1">Hello</option>
 
 			<option value="1">Hello</option>
 
 			<option value="2">Option 2</option>
 
 			<option value="2">Option 2</option>
 
 			<option value="3">Option 3</option>
 
 			<option value="3">Option 3</option>
 
 		</select>
 
 		</select>
 
+		</div>
 
 	</div>
 
 	</div>
 
 	</div>
 
 	</div>
 
 </body>
 
 </body>

+ 1 - 1
scss/app.css
Xem Tập Tin 

@@ -1,2 +1,2 @@
 
-#content{padding:100px 0}
 
+#content{padding:100px 0}.divider{float:left;width:100%;margin:20px 0}
 
 /*# sourceMappingURL=app.css.map */
 
 /*# sourceMappingURL=app.css.map */

+ 1 - 1
scss/app.css.map
Xem Tập Tin 

@@ -1,6 +1,6 @@
 
 {
 
 {
 
 "version": 3,
 
 "version": 3,
 
-"mappings": "AAAA,QAAS,CACR,OAAO,CAAC,OAAO",
 
+"mappings": "AAAA,QAAS,CACR,OAAO,CAAC,OAAO,CAGhB,QAAS,CACR,KAAK,CAAC,IAAI,CACV,KAAK,CAAC,IAAI,CACV,MAAM,CAAC,MAAM",
 
 "sources": ["app.scss"],
 
 "sources": ["app.scss"],
 
 "names": [],
 
 "names": [],
 
 "file": "app.css"
 
 "file": "app.css"

+ 5 - 0
scss/app.scss
Xem Tập Tin 

@@ -1,4 +1,9 @@
 
 #content {
 
 #content {
 
 	padding:100px 0;
 
 	padding:100px 0;
 
 	
 	
+}
 
+.divider {
 
+	float:left;
 
+	width:100%;
 
+	margin:20px 0;
 
 }
 
 }