四、jQuery插件（二） - jQueryUi插件、laydate插件

最新推荐文章于 2022-02-14 20:06:57 发布

二旬、

最新推荐文章于 2022-02-14 20:06:57 发布

阅读量227

点赞数

分类专栏： WEB基础-jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45602227/article/details/120324119

版权

WEB基础-jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、jQuery插件库


	1) jQuery插件是基于jQuery编写的扩展库。
	   其原理就是jQuery自定义插件的原理。
	   
	
	2) 官方推荐的jQuery插件库	
				https://plugins.jquery.com/tag/ui/
														

	3) 常用的jQuery插件库
							
				a、jQuery UI
							下载:https://jqueryui.com/
							
				b、laydate
							下载:https://www.layui.com/laydate/

二、jQuery UI 插件使用教程

2.1 下载

下载:https://www.layui.com/laydate/
在这里插入图片描述

2.2 打开下载包，查看案例

在这里插入图片描述

2.3 使用

1）参考案例代码，将基础js、css文件引入到项目中

在这里插入图片描述

2）参考案例使用

text.html

<!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.0">
    <title>Document</title>
    <script src="./jQueryUi/jquery.js"></script>
    <script src="./jQueryUi/jquery-ui.js"></script>
	<link href="./jQueryUi/jquery-ui.css" rel="stylesheet">
     <style>
          .demoHeaders {
                margin-top: 4em;
            }
     </style>
</head>
<body>

    <!-- 手风琴 -->
    <h2 class="demoHeaders">手风琴</h2>
    <div id="accordion" style="width:200px;height:200px;display: block;">
        <h3>First</h3>
        <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
        <h3>Second</h3>
        <div>Phasellus mattis tincidunt nibh.</div>
        <h3>Third</h3>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
    


    <!-- 自动补全 -->
    <h2 class="demoHeaders">自动补全</h2>
   <input id="autocomplete" type="text" >


   
    <!-- 选项卡 -->
    <h2 class="demoHeaders">选项卡</h2>
    <div id="tabs">
        <ul>
            <li><a href="#t1">First</a></li>
            <li><a href="#t2">Second</a></li>
            <li><a href="#t3">Third</a></li>
        </ul>
        <div id="t1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        <div id="t2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
        <div id="t3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
    </div>


</body>

<script>

    //1、手风琴
    $( "#accordion" ).accordion();

    //2、自动补全
    var dataSource = [
        "java",
        "java123",
        "123",
        "ccc"
    ];
    $( "#autocomplete" ).autocomplete({
        source: dataSource
    });

    //3、选项卡
    $( "#tabs" ).tabs();

</script>
</html>

在这里插入图片描述

三、laydate 插件使用教程

		
	下载地址: https://www.layui.com/laydate/
	参考文档: https://www.layui.com/laydate/
			 https://www.layui.com/doc/modules/laydate.html#options
	
	使用步骤: 1) 下载laydate包
			 2) 参考laydate包中案例使用。
					
					注意:使用laydate时在代码中只需要引入js。
					     但是laydate相关的包必须全部引入，并且包结构不变

3.1 下载

https://www.layui.com/laydate/
在这里插入图片描述

3.2 打开压缩包，查看案例

在这里插入图片描述

2.3 使用

1）参考案例代码，将基础js、css文件引入到项目中

在这里插入图片描述

2）参考案例代码使用

<!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.0">
    <title>Document</title>

    <style>
        body{padding: 20px;}
        .demo-input{padding-left: 10px; height: 38px; min-width: 262px; line-height: 38px; border: 1px solid #e6e6e6;  background-color: #fff;  border-radius: 2px;}
        .demo-footer{padding: 50px 0; color: #999; font-size: 14px;}
        .demo-footer a{padding: 0 5px; color: #01AAED;}
</style>
</head>
<body>

      <input type="text" class="demo-input" placeholder="请选择日期" id="test">
</body>

<script src="./laydate/laydate.js"></script> 
<script>

    laydate.render({ 
        elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
        ,range: true
        ,value: '2021-09-20 - 2021-10-07' //必须遵循format参数设定的格式
      
        ,min: '2017-1-1'
        ,max: '2017-1-7'

    });
 
 </script>

</html>