jquery.combox.js 3.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. (function($){
  2. $.fn.combox = function(options) {
  3. var defaults = {
  4. borderCss: "combox_border",
  5. inputCss: "combox_input",
  6. buttonCss: "combox_button",
  7. selectCss: "combox_select",
  8. datas:[]
  9. };
  10. var options = $.extend(defaults, options);
  11. function _initBorder($border) {//初始化外框CSS
  12. $border.css({"border":"1px solid #e5e6e7",'display':'inline-block', 'position':'relative'}).addClass(options.borderCss);
  13. $border.children(':text').focus(function(){
  14. $border.css({"border":"1px solid #1ab394",'display':'inline-block', 'position':'relative'}).addClass(options.borderCss);
  15. });
  16. $border.children(':text').blur(function(){
  17. $border.css({"border":"1px solid #e5e6e7",'display':'inline-block', 'position':'relative'}).addClass(options.borderCss);
  18. });
  19. return $border;
  20. }
  21. function _initInput($border){//初始化输入框
  22. var id = $border.attr("id") == undefined?"":$border.attr("id");
  23. var name = $border.attr("name") == undefined?"":$border.attr("name");
  24. var bdclass = $border.attr("class") == undefined?"":$border.attr("class");
  25. var value = $border.attr("value")== undefined?"":$border.attr("value");
  26. $border.append('<input type="text" id="'+id+'" name="'+name+'" class="'+options.inputCss+" "+bdclass+'" value="'+value+'"/>');
  27. $border.append('<font class="ficomoon icon-angle-bottom '+options.buttonCss+'" style="display:inline-block"></font>');
  28. var labeId = id==""?name:id;
  29. $border.append('<br/><label id="'+labeId+'-error" class="error" for="'+labeId+'" style="display: none;"></label>');
  30. //绑定下拉特效
  31. $border.delegate('font', 'click', function() {
  32. $border.children(':text').focus();
  33. var $ul = $border.children('ul');
  34. if($ul.css('display') == 'none') {
  35. $ul.slideDown('fast');
  36. $(this).removeClass('icon-angle-bottom').addClass('icon-angle-top');
  37. }else {
  38. $ul.slideUp('fast');
  39. $(this).removeClass('icon-angle-top').addClass('icon-angle-bottom');
  40. }
  41. });
  42. return $border;//IE6需要返回值
  43. }
  44. function _initSelect($border) {//初始化下拉列表
  45. $border.append('<ul style=" z-index:9999;border:1px solid #6798D1;position:absolute;left:-1px;display:none" class="'+options.selectCss+'">');
  46. var $ul = $border.children('ul');
  47. $ul.css('top',$border.height()+1);
  48. var length = options.datas.length;
  49. for(var i=0; i<length ;i++)
  50. $ul.append('<li><a href="javascript:void(0)">'+options.datas[i]+'</a></li>');
  51. $ul.delegate('li', 'click', function() {
  52. $border.children(':text').val($(this).text());
  53. $border.children(':text').focus();
  54. $border.find("label.error").css("display","none");
  55. $ul.hide();
  56. $border.children('font').removeClass('icon-angle-top').addClass('icon-angle-bottom');//确定的时候要将下拉的icon改变
  57. });
  58. return $border;
  59. }
  60. this.each(function() {
  61. var _this = $(this);
  62. if(_this.attr("class").indexOf("combox_border") >=0)//防止重复初始化
  63. return;
  64. _this = _initInput(_this);//初始化输入框
  65. _this = _initBorder(_this);//初始化外框CSS
  66. _initSelect(_this);//初始化下拉列表
  67. });
  68. };
  69. })(jQuery);