Jquery Custom Selectbox Web-development (jquery) Jquery Custom Selectbox 
jquery custom selectbox
//index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type='text/css'> div.selectBox { position:relative; display:inline-block; cursor:default; text-align:left; line-height:30px; clear:both; color:#888; } span.selected { width:167px; text-indent:20px; border:1px solid #ccc; border-right:none; border-top-left-radius:5px; border-bottom-left-radius:5px; background:#f6f6f6; overflow:hidden; } span.selectArrow { width:30px; border:1px solid #60abf8; border-top-right-radius:5px; border-bottom-right-radius:5px; text-align:center; font-size:20px; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; background:#4096ee; } span.selectArrow,span.selected { position:relative; float:left; height:30px; z-index:1; } div.selectOptions { position:absolute; top:28px; left:0; width:198px; border:1px solid #ccc; border-bottom-right-radius:5px; border-bottom-left-radius:5px; overflow:hidden; background:#f6f6f6; padding-top:2px; display:none; } span.selectOption { display:block; width:80%; line-height:20px; padding:5px 10%; } span.selectOption:hover { color:#f6f6f6; background:#4096ee; } </style> <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> </head> <body> <script type='text/javascript'><!-- $(document).ready(function() { enableSelectBoxes(); }); function enableSelectBoxes(){ $('div.selectBox').each(function(){ $(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html()); $(this).attr('value',$(this).children('div.selectOptions').children('span.selectOption:first').attr('value')); $(this).children('span.selected,span.selectArrow').click(function(){ if($(this).parent().children('div.selectOptions').css('display') == 'none'){ $(this).parent().children('div.selectOptions').css('display','block'); } else { $(this).parent().children('div.selectOptions').css('display','none'); } }); $(this).find('span.selectOption').click(function(){ $(this).parent().css('display','none'); $(this).closest('div.selectBox').attr('value',$(this).attr('value')); $(this).parent().siblings('span.selected').html($(this).html()); }); }); }//--> </script> <div> <span></span> <span>▼</span> <div > <span value="Option 1">Option 1</span> <span value="Option 2">Option 2</span> <span value="Option 3">Option 3</span> </div> </div> </body> </html>
0 Response to "Jquery Custom Selectbox"
Posting Komentar