日期区间选择器插件的操作流程

 我们知道,在开发过程中,为了能够在规定时间内完成项目,有时候我们都会使用插件来大大提高我们的开发效率,有些插件是可以直接拿来用,但是有些插件拿过来之后是需要进行修改,在使用插件的时候还有很多的注意事项,我们来看一下是如何获取到插件的

   一、插件地址
        地址为:jQuery插件库-收集最全最新最好的jQuery插件 (jq22.com)

   二、如何将插件从中获取出来 
       我这里用的是jQuery插件库,接下来我会随便找一个来给大家进行演示如何将插件获取出来。

       首先,我们找到我们对应的插件

      然后,点击进入到页面中,找到查看演示,不点立即下载的原因是因为要钱,有实力的可以买,我是没那个资金,

      点击查看演示进入到页面中我们发现有很多的选择器,这时候我们点击鼠标右键,会有一个查看页面源码,这里没有办法截屏,当我们进入到页面源码后,将代码进行复制到我们的编辑器中,

      然后我们打开网页,查看日历选择器

      我们可以发现这个插件的页面中有些不相关的东西,这时候我们可以打开F12控制台通过选择器,

      选中我们需要的那一部分,然后回到编辑器中将其余没用的代码进行删除。

      这是删除后的效果图 我们发现在编辑器中就连JS代码都删除完毕了还是会有很多,

      这是因为iframe框架路径的原因,现在我们只是用了他的路径来实现的日期选择器,当他那边发生改变的时候我们这边也会收到影响,所以下一步,我们将上面标记iframe框架中的地址进行复制在浏览器中打开

https://www.jq22.com/demo/pickerDateRange20150807

 当我们进到这个页面之后再次点击右键获取源码这才是真正能将我们想要的插件弄到手

 这才是获取到这页面的所有源码

 这时候我们再打开F12 去找到我们要用的插件

 我们将其余没用的代码进行一点点删除之后,只剩下我们要用的插件代码 

效果图如下

  接下来,我们将实现如何将插件引入到我们的页面中

  第一步:

      我们要先在页面中进行引入jQuery插件库,这里是jQuery插件下载的地方

https://code.jquery.com/jquery-3.7.1.js

第二步: 

      将插件中的HTML 放入到我们指定的地方

       将css样式放到我们对应的文件中

     然后将js放入到对应的文件中

 这样我们就将我们需要的插件引入到页面中啦!


      以上就是如何将一个插件引入到页面中的操作

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值