// ==UserScript==
// @name bootstrapUI
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 实现bootstrap的弹出框
// @author soledadchao
// @match https://wenku.baidu.com/*
// @require https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js
// @require https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js
// @resource customCSS https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
// @grant GM_addStyle
// @grant GM_getResourceText
// ==/UserScript==
(function() {
'use strict';
//加载外部CSS,资源已在上方resource中
var newCSS = GM_getResourceText ("customCSS");
GM_addStyle (newCSS);
//定义文本,并建立点击动作
var btn=document.createElement("button");
btn.innerHTML = "<a >开始操作</a>"
btn.onclick= BtnAction
document.querySelector('.doc-title').appendChild(btn)
//定义需要加入的HTML
var html = `
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="左侧">
Popover on 左侧
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="顶部.">
Popover on 顶部
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部">
Popover on 底部
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="右侧">
Popover on 右侧
</button>
`
//加载Html
function AddHtml(html) {
document.body.insertAdjacentHTML('afterBegin', html);
}
//按下自定义按钮的动作
function BtnAction(){
AddHtml(html);
//需手动初始化
$(function () {
$("[data-toggle='popover']").popover();
});
}
})();
油猴编写-使用Bootstrap
最新推荐文章于 2024-08-09 21:30:00 发布
关键词由CSDN通过智能技术生成