设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 678|回复: 0

[jQuery/Js/AJAX] 简单的jquery select美化自定义下拉框样式

[复制链接]

374

主题

381

帖子

2558

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2558
发表于 2014-8-8 08:50:57 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
简单的jquery select美化自定义下拉框样式

本文关键字词:jquery,select,select美化

html源码:
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Select</title>
  6. </head>
  7. <body>
  8. <style type="text/css">
  9. *{margin:0;padding:0;}
  10. select{outline:none;}
  11. ul{list-style:none;}
  12. a{text-decoration:none;}
  13. /*以下为样式*/
  14. select{display: none;}
  15. .select_box{font-family: "宋体"; font-size: 12px;color: #999999;width: 178px;line-height: 20px;margin: 50px auto;}
  16. .select_showbox{border: 1px solid #b0a296;height: 20px;padding-left: 5px;background: url(icon.png) no-repeat 156px 0;}
  17. .select_option{border: 1px solid #b0a296;border-top: none;display: none;}
  18. .select_option li{padding-left: 5px;}
  19. .select_option li.selected{background-color: #F3F3F3;color: #999;}
  20. .select_option li.hover{background: #7b6959; color: #fff;}
  21. </style>
  22. <select name="choose" id="choose">
  23. <option value="选择风格" selected="selected">选择风格</option>
  24. <option value="复古风">复古风</option>
  25. <option value="摇滚风">摇滚风</option>
  26. <option value="怀旧风">怀旧风</option>
  27. </select>
  28. <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
  29. <script type="text/javascript" src="jquery.select.js"></script>
  30. </body>
  31. </html>
复制代码


jquery.select.js插件代码:
  1. (function($){
  2. var selects=$('select');//获取select
  3. for(var i=0;i<selects.length;i++){
  4. createSelect(selects[i],i);
  5. }
  6. function createSelect(select_container,index){
  7. //创建select容器,class为select_box,插入到select标签前
  8. var tag_select=$('<div></div>');//div相当于select标签
  9. tag_select.attr('class','select_box');
  10. tag_select.insertBefore(select_container);
  11. //显示框class为select_showbox,插入到创建的tag_select中
  12. var select_showbox=$('<div></div>');//显示框
  13. select_showbox.css('cursor','pointer').attr('class','select_showbox').appendTo(tag_select);
  14. //创建option容器,class为select_option,插入到创建的tag_select中
  15. var ul_option=$('<ul></ul>');//创建option列表
  16. ul_option.attr('class','select_option');
  17. ul_option.appendTo(tag_select);
  18. createOptions(index,ul_option);//创建option
  19. //点击显示框
  20. tag_select.toggle(function(){
  21. ul_option.show();
  22. },function(){
  23. ul_option.hide();
  24. });
  25. var li_option=ul_option.find('li');
  26. li_option.on('click',function(){
  27. $(this).addClass('selected').siblings().removeClass('selected');
  28. var value=$(this).text();
  29. select_showbox.text(value);
  30. ul_option.hide();
  31. });
  32. li_option.hover(function(){
  33. $(this).addClass('hover').siblings().removeClass('hover');        
  34. },function(){
  35. li_option.removeClass('hover');
  36. });
  37. }
  38. function createOptions(index,ul_list){
  39. //获取被选中的元素并将其值赋值到显示框中
  40. var options=selects.eq(index).find('option'),
  41. selected_option=options.filter(':selected'),
  42. selected_index=selected_option.index(),
  43. showbox=ul_list.prev();
  44. showbox.text(selected_option.text());
  45. //为每个option建立个li并赋值
  46. for(var n=0;n<options.length;n++){
  47. var tag_option=$('<li></li>'),//li相当于option
  48. txt_option=options.eq(n).text();
  49. tag_option.text(txt_option).css('cursor','pointer').appendTo(ul_list);
  50. //为被选中的元素添加class为selected
  51. if(n==selected_index){
  52. tag_option.attr('class','selected');
  53. }
  54. }
  55. }
  56. })(jQuery)
复制代码


用到的图标:
icon.png

演示图片:
演示截图.jpg
以上案例打包: 简单的jquery select美化自定义下拉框样式.rar (3.16 KB, 下载次数: 0, 售价: 10 贡献)
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-10 20:45

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表