插件书写示例

Posted PLDaily

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了插件书写示例相关的知识，希望对你有一定的参考价值。

正常模态框代码

<!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">
  <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body  style="height: 1500px;">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <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" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">正常模态框</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>
  </div>
</div>
</body>
</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">
  <title>模态框</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body  style="height: 1500px;">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<script type="text/javascript">
  window.onload  = function() {
        var qrcode_box = [‘<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">‘];
            //弹层主要部分
        qrcode_box.push(‘              <div class="modal-dialog">                <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" id="myModalLabel">Modal title</h4>                  </div>                  <div class="modal-body">插件模态框</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>              </div>‘);
        qrcode_box.push(‘</div>‘);
        console.log(qrcode_box);
        $(‘body‘).append(qrcode_box.join(‘‘));
  }
</script>
</body>
</html>

 

以上是关于插件书写示例的主要内容，如果未能解决你的问题，请参考以下文章

VIM 代码片段插件 ultisnips 使用教程

WordPress - 代码片段插件

VSCode插件开发全攻略代码片段设置自定义欢迎页

Wordpress - 将代码片段包含到布局的选定部分的插件

Word 文档的优秀代码片段工具或插件？

vim代码片段插件ultisnips的使用