请问会有多少使用原生时间控件的人,嗯……近年来只限于input和select那七个标签

前言

在pc端的项目中,平时会用到表单标签,莫过于是select和input那三种,这二种分外常用。但屡次原生的成效壮志未酬,就算input中type有n多属性,甚至连时间控件都有,但依然满足不断大家大天朝的需求,试问会有稍许使用原生时间控件的人,也不会有多少个,相信超越四分之一的前端,亦大概是后端,
都有友好的插件小仓房。

前言

在pc端的项目中,日常会用到表单标签,莫过于是select和input那二种,那三种卓殊常用。但屡次原生的效用适得其反,即便input中type有n多属性,甚至连时间控件都有,但仍旧满意不断大家大天朝的急需,试问会有多少使用原生时间控件的人,也不会有多少个,相信大部分的前端,亦恐怕是后端,
都有投机的插件小仓库。

供给的那个事

啊……近日只限于input和select那七个标签


1个输入框到底能有个别啥须要呢

  • 一 、能够输入(最低的规范)
  • 二 、能够输入并且能够本地校验(例如只可以够输入数字,不可能输入为空)
  • 叁 、能够输入并且能够本地校验并且能够交给相对应的唤醒
  • 肆 、能够输入并且能够本地校验和长距离校验并且能够交给相对应的提醒
  • …………

理所当然并不止这个须要,须要千奇百怪。
但像大家原生的标签最多满意上述二种供给。大概就嗝屁了,剩下的便是八仙过海各显神通了。

说到此处,强推
jquery-validation以此插件,基本上建立基本的mvc项目,都会很团结的帮您安装好那么些插件。剩下的正是等你调用了。

那是3个还不易的印证插件,不仅有前端验证,还有ajax远程验证。很正确

行吗,扯远了,想说的是除了上述的不可或缺须求以外,还有些必要也是很常见的。比如点击输入框,会有个优良的岁月插件。
这些也引进一四个插件吧……bootstrap-datepicker,
bootstrap-daterangepicker

而是想说的仍然不是这么些,而是输入匹配出现下下拉框采用,如下图

恩……正是个那样的

 图片 1

 

源码如下:

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="utf-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1">
 6   <title>jQuery UI Autocomplete - Default functionality</title>
 7   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 8   <link rel="stylesheet" href="/resources/demos/style.css">
 9   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
10   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
11   <script>
12   $( function() {
13     var availableTags = [
14       "ActionScript",
15       "AppleScript",
16       "Asp",
17       "BASIC",
18       "C",
19       "C++",
20       "Clojure",
21       "COBOL",
22       "ColdFusion",
23       "Erlang",
24       "Fortran",
25       "Groovy",
26       "Haskell",
27       "Java",
28       "JavaScript",
29       "Lisp",
30       "Perl",
31       "PHP",
32       "Python",
33       "Ruby",
34       "Scala",
35       "Scheme"
36     ];
37     $( "#tags" ).autocomplete({
38       source: availableTags
39     });
40   } );
41   </script>
42 </head>
43 <body>
44  
45 <div class="ui-widget">
46   <label for="tags">Tags: </label>
47   <input id="tags">
48 </div>
49  
50  
51 </body>
52 </html>

 

 那里用的是一个叫做autocomplete的小插件。

急需的那几个事

啊……近期只限于input和select那五个标签


1个输入框到底能有个别啥必要吗

  • 壹 、能够输入(最低的科班)
  • ② 、可以输入并且能够本地校验(例如只可以够输入数字,不能够输入为空)
  • 叁 、能够输入并且可以本地校验并且能够交给相呼应的提示
  • 四 、能够输入并且能够本地校验和长距离校验并且能够交给相呼应的唤起
  • …………

当然并不止这个要求,要求千奇百怪。
但像大家原生的标签最多满意上述三种要求。大概就嗝屁了,剩下的就是八仙过海各显神通了。

说到此处,强推
jquery-validation以此插件,基本上建立基本的mvc项目,都会很温馨的帮你安装好那么些插件。剩下的正是等您调用了。

那是八个还能够的表明插件,不仅有前端验证,还有ajax远程验证。很不错

可以吗,扯远了,想说的是除了上述的画龙点睛需要以外,还有个别需求也是很广泛的。比如点击输入框,会有个优秀的小时插件。
那个也引进一八个插件吧……bootstrap-datepicker,
bootstrap-daterangepicker

可是想说的照样不是这几个,而是输入匹配出现下下拉框选拔,如下图

恩……就是个那样的

 图片 2

 

源码如下:

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="utf-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1">
 6   <title>jQuery UI Autocomplete - Default functionality</title>
 7   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 8   <link rel="stylesheet" href="/resources/demos/style.css">
 9   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
10   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
11   <script>
12   $( function() {
13     var availableTags = [
14       "ActionScript",
15       "AppleScript",
16       "Asp",
17       "BASIC",
18       "C",
19       "C++",
20       "Clojure",
21       "COBOL",
22       "ColdFusion",
23       "Erlang",
24       "Fortran",
25       "Groovy",
26       "Haskell",
27       "Java",
28       "JavaScript",
29       "Lisp",
30       "Perl",
31       "PHP",
32       "Python",
33       "Ruby",
34       "Scala",
35       "Scheme"
36     ];
37     $( "#tags" ).autocomplete({
38       source: availableTags
39     });
40   } );
41   </script>
42 </head>
43 <body>
44  
45 <div class="ui-widget">
46   <label for="tags">Tags: </label>
47   <input id="tags">
48 </div>
49  
50  
51 </body>
52 </html>

 

 那里用的是三个叫做autocomplete的小插件。

jquery仍然很强大

扬言下,近日大家用的是.net
mvc,在此以前,小编搭档的都以java的后台,前后端分离的。而新近这一年来,大概正是前者也写,c#也写,最大的感触正是假设都一人来写三个门类来说,确实会少许多手续,但总归一位能够做的星星点点。
即便你足足全能,有很难有那么充实的肥力。

顺带一提,笔者是es6语法和vue2,react,angular那种框架的忠贞不渝用户者,可惜我们用的是razor语法。并不是说糟糕,但就前端而言,上述那些自然更为强劲和方便人民群众。

在那种处境下,面对屡见不鲜的须求,只好重复把目光投回了jquery。

在除了上述的不胜须要以外,还有个须求也是大家平常用的,那正是select,对,你从未见到,正是select这些标签,这么些标签到底承载着多工作呢,大家看看图就知道了

  • 一 、首先得能够绑定远程数据吧
  • 贰 、要能够获得选中的回调了,不然你的联合浮动核心没戏了
  • 图片 3

    图片 4

     

此处再说个对前者来说的深坑,这就是原生的select在ios系统和windows系统的显现样式差异不小,有趣味的能够协调节和测试试,所以原生的select标签差不多无用武之地。

而刚刚图中,所展现的职能,是1个名为
select2的1个插件 

其实本身认为那些理应很知名了,毕竟20k的星摆在那里

而最上边的图,提到的百般输入能够包容的是jquery的足够小插件,提到那里,不得不感慨姜仍然老的辣。

当您进来jquery官网,你在下载最新的jquery之余,能够洞察下
plugins,目测应该有几千个插件,而恰恰的autocomplete也是中间之一。

图片 5

 

jquery如故很强劲

扬言下,近年来大家用的是.net
mvc,之前,作者搭档的都是java的后台,前后端分离的。而近来这一年来,大约正是前者也写,c#也写,最大的感受正是一旦都1个人来写一个品类来说,确实会少许多手续,但到底1人能够做的星星点点。
即便你丰硕全能,有很难有那么充实的生气。

顺带一提,笔者是es6语法和vue2,react,angular那种框架的克尽职守用户者,可惜大家用的是razor语法。并不是说不好,但就前端而言,上述这个自然更为强劲和便利。

在这种景色下,面对司空眼惯的供给,只好重新把目光投回了jquery。

在除了上述的不胜须求以外,还有个须要也是我们常常用的,那正是select,对,你没有见到,便是select这几个标签,这些标签到底承载着多工作呢,大家看看图就精晓了

  • 一 、首先得能够绑定远程数据吧
  • 2、要能够获得选中的回调了,不然你的联合浮动中心没戏了
  • 图片 6

    图片 7

     

此处再说个对前者来说的深坑,那正是原生的select在ios系统和windows系统的显现样式差别十分的大,有趣味的能够团结尝试,所以原生的select标签大概无用武之地。

而刚好图中,所展现的效用,是3个名为
select2的二个插件 

骨子里自个儿觉得那么些相应很有名了,终归20k的星摆在这里

而最下面的图,提到的百般输入能够合作的是jquery的丰硕小插件,提到那里,不得不感慨姜依然老的辣。

当你进来jquery官网,你在下载最新的jquery之余,可以洞察下
plugins,目测应该有几千个插件,而恰好的autocomplete也是里面之一。

图片 8

 

相关文章