You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

110 lines
3.9 KiB

7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
  1. var InputAnimate = {};
  2. (function($){
  3. InputAnimate.init = function(obj){
  4. var self = this;
  5. self.what = true;
  6. self.box = obj;
  7. if(obj.hasClass('input-animate')){
  8. self.what = false;
  9. }
  10. self.inputs = self.box.find('input.form-control,button.form-control,textarea.form-control,select.form-control,.tagsinput input');
  11. if(!self.inputs.length)return false;
  12. if(self.what){
  13. self.label = self.box.find('.input-label');
  14. var length = obj.find('.input-animate').length;
  15. if(self.box.hasClass('disabled')){//需要disabled时
  16. self.box.find('input.form-control,button.form-control,textarea.form-control,select.form-control,.tagsinput input').attr("disabled",true);
  17. }
  18. obj.find('.input-animate').each(function(i){
  19. var inputs = $(this).find('input.form-control,button.form-control,textarea.form-control,select.form-control,.tagsinput input');
  20. if(self.box.hasClass('input-float')){//是否为float样式
  21. self.float_style(inputs);
  22. self.float_change(inputs);
  23. }else if(self.box.hasClass('input-fixation') && (i == 0)){//是否为Fixation样式
  24. self.fixation_style($(this));
  25. }
  26. self.input_style($(this),inputs,i,length);
  27. self.input_event($(this),inputs);//绑定事件
  28. })
  29. }else{
  30. self.input_style(self.box,self.inputs,1,2);
  31. self.input_event(self.box,self.inputs);//绑定事件
  32. }
  33. }
  34. InputAnimate.float_style = function(obj){
  35. var self = this;
  36. if(obj.length && ($.trim(obj.val()) || obj.get(0).tagName == 'SELECT'))self.box.addClass('focus');
  37. }
  38. InputAnimate.fixation_style = function(obj){
  39. var self = this;
  40. obj.css('margin-left',self.label.outerWidth());
  41. }
  42. InputAnimate.input_style = function(animate,obj,i,length){
  43. var self = this;
  44. if(obj.prop('nodeName') == 'TEXTAREA')obj.TextAreaExpander(30, 99999);
  45. if(self.box.find('.input-icon').length && (i == length-1)){
  46. var w = self.box.find('.input-icon').outerWidth()+10;
  47. animate.css('padding-right',w);
  48. }
  49. }
  50. InputAnimate.create_animate = function(){
  51. $('.input-black.active').removeClass('active');
  52. }
  53. InputAnimate.input_event = function(obj,inputs){
  54. var self = this;
  55. obj.on('click',function(){
  56. if(!$(this).find('input.form-control,textarea.form-control').prop("disabled")){
  57. self.create_animate();
  58. $(this).closest('.input-black').addClass('active');
  59. $(this).addClass('animate');
  60. $(this).find('input.form-control,textarea.form-control').focus();
  61. }
  62. });
  63. inputs.on('focus',function(){
  64. $(this).trigger('input');
  65. $(this).closest('.input-black').addClass('active');
  66. $(this).closest('.input-animate').addClass('animate');
  67. });
  68. inputs.on('blur',function(){
  69. if($(this).closest('.input-black').hasClass('input-float')){//是否为float样式
  70. if(this.tagName != 'SELECT'){
  71. if($(this).closest('.tagsinput').length && $(this).closest('.input-animate').find('input.form-control').val()){//兼容tagsinput
  72. $(this).closest('.input-black').addClass('focus');
  73. }else if($.trim($(this).val())){
  74. $(this).closest('.input-black').addClass('focus');
  75. }else{
  76. $(this).closest('.input-black').removeClass('focus');
  77. }
  78. }else{
  79. $(this).closest('.input-black').addClass('focus');
  80. }
  81. }
  82. $(this).closest('.input-black').removeClass('active');
  83. $(this).closest('.input-animate').removeClass('animate');
  84. });
  85. if(self.label){
  86. self.label.on('click',function(){
  87. $(this).siblings('.input-animate').click();
  88. });
  89. }
  90. };
  91. InputAnimate.float_change = function(obj){
  92. obj.change(function(){
  93. if($(this).closest('.tagsinput').length && $(this).closest('.input-animate').find('input.form-control').val()){//兼容tagsinput
  94. $(this).closest('.input-black').addClass('focus');
  95. }else if($.trim($(this).val())){
  96. $(this).closest('.input-black').addClass('focus');
  97. }else{
  98. $(this).closest('.input-black').removeClass('focus');
  99. }
  100. });
  101. };
  102. $(document).ready(function(){
  103. $('.input-black').each(function() {
  104. InputAnimate.init($(this));
  105. });
  106. });
  107. })(jQuery);