JavaScript 插件(上篇)

已于 2023-07-26 15:32:33 修改
阅读量189 收藏
点赞数 1
文章标签： javascript 前端 开发语言
于 2023-07-26 15:30:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73200795/article/details/131939334
版权

一，这个js插件可以通过bootstrap的官网来进行编写，例如：

点击我框起来的那个js插件，然后根据右侧导航栏 找到自己需要的

首先，我们写一个静态的

这些都可以从bootstrap官网上Copy下来，我们来看一下效果：

运行结果： 

 这个之所以能点、能运行 就是加了个id，加了id就是不让它有重复的并且好寻找

data-target:触发的目标id为myModel

 运行结果：

 中间这部分我们替换成别的，

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">

</head>

<body>

    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

        弹出模态框

     </button>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog">

        <div class="modal-dialog" role="document">

            <div class="modal-content">

                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                    <h4 class="modal-title">新增模态框</h4>

                </div>

                <div class="modal-body">

                    <div>

                        <form class="form-horizontal" action="#">

                            <div class="form-group has-warning">

                                <label for="user" class="col-sm-2">用户名：</label>

                                <div class="col-sm-4">

                                    <input type="text" class="form-control" id="user" placeholder="请输入用户名">

                                </div>

                                <label for="user" class="col-sm-2">用户名：</label>

                                <div class="col-sm-4">

                                    <input type="text" class="form-control input-lg" id="user" placeholder="请输入用户名">

                                </div>


 

                            </div>

                            <div class="form-group">

                                <label for="psd">密码：</label>

                                <input class="form-horizontal" type="password" id="psd" placeholder="请输入密码">

                            </div>

                            <div class="form-group">

                                <label for="psd">密码：</label>

                                <input class="form-horizontal input-sm" type="password" id="psd" placeholder="请输入密码">

                            </div>

                            <input type="submit" value="登录">

                        </form>

                    </div>

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                    <button type="button" class="btn btn-primary">Save changes</button>

                </div>

            </div>

            <!-- /.modal-content -->

        </div>

        <!-- /.modal-dialog -->

    </div>

    <!-- /.modal -->

</body>

<script src="./bootstrap-3.4.1-dist/js/jquery.js"></script>

<script src="./bootstrap-3.4.1-dist/js/bootstrap.js"></script>

</html>

运行结果：

 data-keyboard  默认为true 可以用Esc键退出

 data-keyboard="false"  则不可以推出

还可以用js来写 ，它包括参数，方法，事件

 运行结果：点击这个按钮之后， 他会先弹框，然后再有页面，因为这和script中 show，shown有关（show:先弹框再显示页面，shown：先显示页面，再弹框）

show:

 

 shown:

 

运行结果：

榴莲不溜.
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
NodeDI:节点JS +插件的依赖注入
03-30
节点DI这是模块向您的代码添加DependencyInjection。 此功能还将为您添加插件。 去做： 添加类别名。 允许使用接口而不是类。 允许不同的代码块使用不同的类别名。 插件装饰器 用相同的名字改写 处理变量扩展 将代码从Decorator中移出 用法示例： import { Injectable , InjectorFactory , Overwrite , Reinitializezible , Plugin } from "./app" ; @ Injectable ( ) class A { } @ Injectable ( ) class B { constructor ( a : A ) { } } @ Injectable ( ) class C { constructor ( b : B ,
javascript功能插件大集合，写前端的亲们记得收藏
weixin_34278190的博客
08-27 1111
【导读】：GitHub 上有一个 Awesome – XXX 系列的资源整理。awesome-javascript 是 sorrycc 发起维护的 JS 资源列表，内容包括：包管理器、加载器、测试框架、运行器、QA、MVC框架和库、模板引擎、数据可视化、时间轴、编辑器等等。 伯乐在线已在 GitHub 上发起「JavaScript 资源大...
JavaScript 插件
weixin_30871905的博客
12-23 1741
概览 单个还是全部引入 JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个*.js文件），或者一次性全部引入（使用bootstrap.js或压缩版的bootstrap.min.js）。 建议使用压缩版的 JavaScript 文件 bootstrap.js和bootstrap.min.js都包含了所有插件，你在使用时，只需选择一个引入页面就...
javascript插件
03-22
NULL 博文链接：https://imagehongyao.iteye.com/blog/901857
一些常用的js插件
勤勇的博客
01-30 2305
1.md5.js 字符加密插件 需引用jQuery 使用方法： var userMD5 = $.md5( 'user'); console.log(userMD5);//c4ca4238aob92382odcc5odcc5o9a6f75849b 2.rem.js  手机适配px插件1rem=100px 3.jweixin-1.3.2.js h5跳转到小程序插件 官方有教程 需要放在小...
2017年最好的JavaScript插件
Xiaoming's Blog
03-13 2127
JavaScript库是一个令人难以置信的有用的工具，任何设计师或开发人员都熟悉。他们可以为您的网站添加一些超强功能，或者增加设计，为您的用户带来更好的体验。
【JavaScript进阶之旅 插件篇】拖拽插件库grapesjs
马云
07-05 925
js拖拽插件库
大牛练成记：用JavaScript徒手写出一个日期选择插件
黑夜开发者的博客
08-02 1779
在现代Web应用程序中，日期选择器是一个非常常见的组件，用户可以使用它来选择特定的日期。在本篇文章中，我们将使用JavaScript和HTML来创建一个简单但功能强大的日期选择插件。这个日期选择插件是比较考验Js基本功的。点击输入框时，将显示日期选择器。日期选择器上方有一个年份和月份选择器，可以向左或向右切换。日期选择器下方是一个日期网格，用户可以通过点击来选择日期。当用户选择一个日期后，插件将自动将选定的日期填充到输入框中。
JavaScript小案例------js实现分页插件效果篇
前端叶荨，随手记
04-04 3622
原生js实现分页插件效果
使用JavaScript开发IE浏览器本地插件实例
爱分享的淘金达人
11-24 5897
这篇文章主要介绍了使用JavaScript开发IE浏览器本地插件实例,本文讲解使用JS+注册表的方式开发一个IE浏览器本地插件,需要的朋友可以参考下。 使用js开发的IE插件可以在当前浏览的页面中执行js代码，在此基础上实现任何用户可以想到的功能。 可以针对不用的网站做一些common处理（比如提取某类信息），也可以针对特定网站做特色处理（比如抢购火车票）。 实现这种插件方法比较简单，只
Boostrap基础教程之JavaScript插件篇
10-21
Boostrap提供了12种JavaScript插件，在本文中给大家介绍了，不知道的朋友可以参考下，本文重点给大家介绍bootstrap基础之js插件，感兴趣的朋友一起学习吧
JavaScript插件化开发教程 （四）
10-24
主要介绍了JavaScript插件化开发教程第四篇,需要的朋友可以参考下
JavaScript插件化开发教程（六）
10-24
本文是javascript插件化开发系列教程的第六篇文章，还是重点对上一篇文章不足的地方进行改进重构，逐步分析让大家能有一个新的认识，希望小伙伴们能够喜欢。
JavaScript插件化开发教程（五）
10-24
是JavaScript插件化开发系列教程的第五篇，还是着重于实战，通过具体的实例来学习jQuery的方式如何开发插件，有相同需求的小伙伴来参考下吧。
vscode 插件导出_vscode插件篇
weixin_28951683的博客
12-31 6260
1、设置中文1、打开“vscode” ，按快捷键“Ctrl+Shift+P”。2.在顶部搜索框中输入“configure language”，按回车键 安装中文插件即可2、插件Javascript booster 助推器，优化代码Code runner 可以运行单行代码Code spell checker 帮助检查代码是否拼写错误Bracket Pair Colorizer 匹配括号是否成对出...
使用JavaScript开发一个Photoshop插件
程序员成长指北
04-18 1675
作为前端开发者，我们可以利用Web技术在非常多的环境下开发应用，为相关的用户提供服务。其中，以Photoshop为首的Adobe系列工具是我们时长要去面对的一个平台级应用。Photosho...
openlayers绘制经纬网格，有添加或者移除功能
最新发布
qq_52959651的博客
05-21 121
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 200
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 245
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
vscode好用的ts插件
08-12
1. JavaScript (ES6) code snippets：这个插件提供了许多针对ES6语法的JavaScript代码片段，支持JavaScript和TypeScript。你可以在编辑器中快速插入常用的代码片段。<span class="em">1</span><span class="em">2...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值