m.lom599.com_手机版乐白家网址_乐百家手机首页登录

基于Bootstrap使用jQuery实现输入框组input,如只能隔

作者: 手机版乐白家网址  发布:2019-07-10

最近的后台项目前端使用了jquery ui 日历控件自然就使用了jquery ui 的 datepicker

本文实例为大家分享使用jQuery实现输入框组input-group的添加与删除操作,供大家参考,具体内容如下

一、简介 jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。

后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件,其中时间要设置为必选,

注意这里要求使用到Bootstrap框架的输入框组,如:

二、选择器
1.id选择器

产品要叫日历控件做成只能做3天之内的查询,且日历控件要做成这样的要求,如果前一个日历控制选择了2013年9月1号

<div class="row"> 
 <div class="col-lg-6"> 
 <div class="input-group"> 

  <input type="checkbox" aria-label="..."> 

  <input type="text" class="form-control" aria-label="..."> 
 </div><!-- /input-group --> 
 </div><!-- /.col-lg-6 --> 
 <div class="col-lg-6"> 
 <div class="input-group"> 

  <input type="radio" aria-label="..."> 

  <input type="text" class="form-control" aria-label="..."> 
 </div><!-- /input-group --> 
 </div><!-- /.col-lg-6 --> 
</div><!-- /.row --> 
<body>
<div id="demo">我是一个div</div>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('#demo').css('color','red');
</script>
</body>

后面的日历控件只能选择2013年9月1号,2013年9月2号,2013年9月3号,其他的全部要不能选,本来想叫他给提示的,领导非要这么干

Demo案例的效果图:

2.元素标签名选择器element

真是领导一句话,码工辛苦好几年啊。。。好吧还好jquery ui 的日历控件提供了这个功能,很强大

图片 1

<body>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<h3>标题1</h3>
<h3>标题2</h3>
<h3>标题3</h3>
<h3>标题4</h3>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('div').css('color','red');
$('h3').css('color','red').css('font-size','30px');
</script>
</body>

首先去官网上()下载jquery ui 包 我用的是1.92版本

这里提供自制的 插件 inputGroup.js

3.类选择器

下载好了之后

参数为可以设置 输入框组中中间的控件是文本域还是输入框;以及设置在输入框组右侧的操作的内容。

<body>
<h3 class="demo">我是一个拥有class的h3</h3>
<h3 class="demo">我是一个拥有class的h3</h3>
<h3 class="demo" >我是一个拥有class的h3</h3>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('.demo').css('color','red');
</script>

引入:

使用inputGroup.js只要在对应的容器,如div中添加选择器,然后使用jQuery获取该选择器对应的jQuery对象,调用 initInputGroup方法即可。
inputGroup.js

4.*选择器(匹配所有元素)

<link href="jquery-ui/1.9.2/css/smoothness/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jquery-ui/1.9.2/js/jquery-ui-1.9.2.custom.js"></script>


<script type="text/javascript" src="jquery-ui/1.9.2/datepicker-init.js"></script>



<script type="text/javascript"> 
$(function(){
 var dates = $("#startDate,#endDate");
 var option;
 var targetDate;
 var optionEnd;
 var targetDateEnd;
 dates.datepicker({
  showButtonPanel:false,
  onSelect: function(selectedDate){ 
   if(this.id == "startDate"){
   // 如果是选择了开始时间(startDate)设置结束时间(endDate)的最小时间和最大时间
   option = "minDate"; //最小时间
   var selectedTime = getTimeByDateStr(selectedDate);
   var minTime = selectedTime;
  //最小时间 为开第一个日历控制选择的时间
   targetDate = new Date(minTime); 
   //设置结束时间的最大时间
   optionEnd = "maxDate";
  //因为只能做三天内的查询 所以是间隔2天 当前时间加上2*24*60*60*1000
   targetDateEnd = new Date(minTime 2*24*60*60*1000);
   }else{
   // 如果是选择了结束时间(endDate)设置开始时间(startDate)的最小时间和最大时间
   option = "maxDate"; //最大时间
   var selectedTime = getTimeByDateStr(selectedDate);
   var maxTime = selectedTime;
   targetDate = new Date(maxTime);
   //设置最小时间 
   optionEnd = "minDate";
   targetDateEnd = new Date(maxTime-2*24*60*60*1000);
   }
   dates.not(this).datepicker("option", option, targetDate); 
   dates.not(this).datepicker("option", optionEnd, targetDateEnd); 
  }
 });
// 检查起始时间不能超过3天
function checkTimeInOneMonth(startDate, endDate){
 var startTime = getTimeByDateStr(startDate);
 var endTime = getTimeByDateStr(endDate);
 if((endTime - startTime) > 2*24*60*60*1000){
  return false;
 }
 return true;
}


//根据日期字符串取得其时间
function getTimeByDateStr(dateStr){
 var year = parseInt(dateStr.substring(0,4));
 var month = parseInt(dateStr.substring(5,7),10)-1;
 var day = parseInt(dateStr.substring(8,10),10);
 return new Date(year, month, day).getTime();
}
</script> <input type="text" value="" name="startDate" readonly="true" id="startDate" title="日期范围不能大于3天"/><input type="text" value="" name="endDate" readonly="true" id="endDate" title="日期范围不能大于3天"/>
/** 
 * Created by DreamBoy on 2016/4/29. 
 */ 
$(function() { 
 $.fn.initInputGroup = function (options) { 
  //1.Settings 初始化设置 
  var c = $.extend({ 
   'widget' : 'input', 
   'add' : "", 
   'del' : "" 
  }, options); 

  var _this = $(this); 

  //添加序号为1的输入框组 
  addInputGroup(1); 

  /** 
   * 添加序号为order的输入框组 
   * @param order 输入框组的序号 
   */ 
  function addInputGroup(order) { 
   //1.创建输入框组 
   var inputGroup = $("<div class='input-group' style='margin: 10px 0'></div>"); 
   //2.输入框组的序号 
   var inputGroupAddon1 = $(""); 
   //3.设置输入框组的序号 
   inputGroupAddon1.html(" "   order   " "); 

   //4.创建输入框组中的输入控件(input或textarea) 
   var widget = '', inputGroupAddon2; 
   if(c.widget == 'textarea') { 
    widget = $("<textarea class='form-control' style='resize: vertical;'></textarea>"); 
    inputGroupAddon2 = $(""); 
   } else if(c.widget == 'input') { 
    widget = $("<input class='form-control' type='text'/>"); 
    inputGroupAddon2 = $(""); 
   } 

   //5.创建输入框组中最后面的操作按钮 
   var addBtn = $("<button class='btn btn-default' type='button'>"   c.add   "</button>"); 
   addBtn.appendTo(inputGroupAddon2).on('click', function() { 
    //6.响应删除和添加操作按钮事件 
    if($(this).html() == c.del) { 
     $(this).parents('.input-group').remove(); 
    } else if($(this).html() == c.add) { 
     $(this).html(c.del); 
     addInputGroup(order 1); 
    } 
    //7.重新排序输入框组的序号 
    resort(); 
   }); 

   inputGroup.append(inputGroupAddon1).append(widget).append(inputGroupAddon2); 

   _this.append(inputGroup); 
  } 

  function resort() { 
   var child = _this.children(); 
   $.each(child, function(i) { 
    $(this).find(".input-group-addon").eq(0).html(' '   (i   1)   ' '); 
   }); 
  } 
 } 
}); 
<body>
<div id="demo">我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<h3>标题1</h3>
<h3>标题2</h3>
<h3>标题3</h3>
<h3>标题4</h3>
<h3 class="demo">我是一个拥有class的h3</h3>
<h3 class="demo">我是一个拥有class的h3</h3>
<h3 class="demo" >我是一个拥有class的h3</h3>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('*').css('color','red'); //选择所有元素
<script>
</body>

以上这篇Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

Demo案例——InputGroupDemo
目录结构如下:

5.群组选择器

图片 2

<body>
<div id="demo">我是一个div</div>
<h3>标题1</h3>
<h3 class="demobox">我是一个拥有class的h3</h3>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('#demo,.demobox,h3').css('color','red');
</script>
</body>

index.html

6.后代选择器

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 <title>输入框组</title> 
 <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"> 
 <style> 
  /*.input-group-add .input-group { 
   margin: 10px 0; 
  }*/ 
 </style> 

 <!--<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />--> 
 <!--[if lt IE 9]> 
 <script src="js/html5shiv.js"></script> 
 <script src="js/respond.min.js"></script> 
 <![endif]--> 
</head> 
<body> 
 <div class="container"> 
  <div class="input-group-add"> 
   <!--<div class="input-group"> 
     1  
    <!–<input type="text" class="form-control" aria-label="...">–> 
    <textarea class="form-control"></textarea> 

     <button class="btn btn-default" type="button">   </button> 

   </div>--> 
  </div> 
 </div> 

 <script src="js/jquery-1.11.1.min.js"></script> 
 <script src="js/bootstrap.min.js"></script> 
 <script src="inputGroup.js"></script> 
 <script> 
  $(function() { 
   $('.input-group-add').initInputGroup({ 
    'widget' : 'textarea', //输入框组中间的空间类型 
    /*'add' : '添加', 
    'del' : '删除'*/ 
   }); 
  }); 
 </script> 
</body> 
</html> 
<body>
<ul>
<li>
  <a>ul的li的a标签</a>
  <a>ul的li的a标签</a>
  <a>ul的li的a标签</a>
</li>
</ul>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('ul li a').css('color','red');
</script>
</body>

如果输入框组中的中间控件需要input,则可以设置:

6.指定选择器

$('.input-group-add').initInputGroup({ 
    'widget' : 'input', //输入框组中间的空间类型 
    /*'add' : '添加', 
    'del' : '删除'*/ 
   }); 
<body>
<div class="demo">class的div</div>
<p class="demo">class的p</p>
<div>普通div</div>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('div.demo').css('color','red');
</script>
</body>

或者不进行设置,因为默认中间控件为input。
中间控件为input的效果如下:

7.子选择器

图片 3

<body>
<div id="demo">
<p>子p1</p>
<p>子p2</p>
<p>子p3</p>
<div>
  <p>孙子p1</p>
  <p>孙子p2</p>
  <p>孙子p3</p>
</div>
</div>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('#demo>p').css('color','red');
</script>
</body>

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

8.next(选择器)

Bootstrap学习教程

<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
//$('#demo').next('p').css('color','red'); //第一种方法
$('#demo p').css('color','red');    //第二种方法
</script>
</body> 

Bootstrap实战教程

9.nextall(选择器)

Bootstrap插件使用教程

<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
//$('#demo').nextAll().css('color','red'); //第一种方法
 $('#demo~p').css('color','red'); //第二种方法
</script>
</body>

以上就是本文的全部内容,希望对大家的学习有所帮助。

10.prev方法

您可能感兴趣的文章:

  • 学习使用Bootstrap输入框、导航、分页等常用组件
  • Bootstrap输入框组件简单实现代码
  • bootstrap输入框组件使用方法详解
  • Bootstrap CSS组件之输入框组
  • Bootstrap基本组件学习笔记之input输入框组(9)
  • Bootstrap3 input输入框插入glyphicon图标的方法
  • bootstrap下拉列表与输入框组结合的样式调整
  • bootstrap布局中input输入框右侧图标点击功能
  • BootStrap点击下拉菜单项后显示一个新的输入框实现代码
  • Bootstrap输入框组件使用详解
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('#demo').prev().css('color','red');
</script>  
</body>

11.prevall方法

<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('#demo').prevAll().css('color','red');
</script>
</body>

12.slbings()方法

<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('#demo').siblings().css('color','red');
</script>
</body>

三、筛选器(过滤选择器)

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:基于Bootstrap使用jQuery实现输入框组input,如只能隔

关键词: m.lom599.com