dwz.combox.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. /**
  2. * @author Roger Wu
  3. */
  4. (function($){
  5. var allSelectBox = [];
  6. var killAllBox = function(bid){
  7. $.each(allSelectBox, function(i){
  8. if (allSelectBox[i] != bid) {
  9. if (!$("#" + allSelectBox[i])[0]) {
  10. $("#op_" + allSelectBox[i]).remove();
  11. //allSelectBox.splice(i,1);
  12. } else {
  13. $("#op_" + allSelectBox[i]).css({ height: "", width: "" }).hide();
  14. }
  15. $(document).unbind("click", killAllBox);
  16. }
  17. });
  18. };
  19. var _onchange = function (event){
  20. var $ref = $("#"+event.data.ref);
  21. if ($ref.size() == 0) return false;
  22. $.ajax({
  23. type:'POST', dataType:"json", url:event.data.refUrl.replace("{value}", encodeURIComponent(event.data.$this.val())), cache: false,
  24. data:{},
  25. success: function(json){
  26. if (!json) return;
  27. var html = '';
  28. $.each(json, function(i){
  29. if (json[i] && json[i].length > 1){
  30. html += '<option value="'+json[i][0]+'">' + json[i][1] + '</option>';
  31. }
  32. });
  33. var $refCombox = $ref.parents("div.combox:first");
  34. $ref.html(html).insertAfter($refCombox);
  35. $refCombox.remove();
  36. $ref.trigger("change").combox();
  37. },
  38. error: DWZ.ajaxError
  39. });
  40. };
  41. $.extend($.fn, {
  42. comboxSelect: function(options){
  43. var op = $.extend({ selector: ">a" }, options);
  44. return this.each(function(){
  45. var box = $(this);
  46. var selector = $(op.selector, box);
  47. allSelectBox.push(box.attr("id"));
  48. $(op.selector, box).click(function(){
  49. var options = $("#op_"+box.attr("id"));
  50. if (options.is(":hidden")) {
  51. if(options.height() > 300) {
  52. options.css({height:"300px",overflow:"scroll"});
  53. }
  54. var top = box.offset().top+box[0].offsetHeight-50;
  55. if(top + options.height() > $(window).height() - 20) {
  56. top = $(window).height() - 20 - options.height();
  57. }
  58. options.css({top:top,left:box.offset().left}).show();
  59. killAllBox(box.attr("id"));
  60. $(document).click(killAllBox);
  61. } else {
  62. $(document).unbind("click", killAllBox);
  63. killAllBox();
  64. }
  65. return false;
  66. });
  67. $("#op_"+box.attr("id")).find(">li").comboxOption(selector, box);
  68. });
  69. },
  70. comboxOption: function(selector, box){
  71. return this.each(function(){
  72. $(">a", this).click(function(){
  73. var $this = $(this);
  74. $this.parent().parent().find(".selected").removeClass("selected");
  75. $this.addClass("selected");
  76. selector.text($this.text());
  77. var $input = $("select", box);
  78. if ($input.val() != $this.attr("value")) {
  79. $("select", box).val($this.attr("value")).trigger("change");
  80. }
  81. });
  82. });
  83. },
  84. combox:function(){
  85. /* 清理下拉层 */
  86. var _selectBox = [];
  87. $.each(allSelectBox, function(i){
  88. if ($("#" + allSelectBox[i])[0]) {
  89. _selectBox.push(allSelectBox[i]);
  90. } else {
  91. $("#op_" + allSelectBox[i]).remove();
  92. }
  93. });
  94. allSelectBox = _selectBox;
  95. return this.each(function(i){
  96. var $this = $(this).removeClass("combox");
  97. var name = $this.attr("name");
  98. var value= $this.val();
  99. var label = $('option[value="' + value + '"]',$this).text();
  100. var ref = $this.attr("ref");
  101. var refUrl = $this.attr('refUrl') || '';
  102. var cid = $this.attr("id") || Math.round(Math.random()*10000000);
  103. var select = '<div class="combox"><div id="combox_'+ cid +'" class="select"' + (ref?' ref="' + ref + '"' : '') + '>';
  104. select += '<a href="javascript:" class="'+$this.attr("class")+'" name="' + name +'" value="' + value + '">' + label +'</a></div></div>';
  105. var options = '<ul class="comboxop" id="op_combox_'+ cid +'">';
  106. $("option", $this).each(function(){
  107. var option = $(this);
  108. options +="<li><a class=\""+ (value==option[0].value?"selected":"") +"\" href=\"#\" value=\"" + option[0].value + "\">" + option[0].text + "</a></li>";
  109. });
  110. options +="</ul>";
  111. $("body").append(options);
  112. $this.after(select);
  113. $("div.select", $this.next()).comboxSelect().append($this);
  114. if (ref && refUrl) {
  115. $this.unbind("change", _onchange).bind("change", {ref:ref, refUrl:refUrl, $this:$this}, _onchange);
  116. }
  117. });
  118. }
  119. });
  120. })(jQuery);