Jquery工具

转x33g5p2x  于2021-09-25 转载在 jQuery  
字(8.3k)|赞(0)|评价(0)|浏览(535)

Jquery工具

下面只是一些我以前用到过得,或者自己编写的Jquery工具,持续更新…

必须在head中添加

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

用于适配

jquery解析Markdown语法

需要的js文件 我这里直接使用cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

使用方式

document.getElementById('content').innerHTML = marked(this.contents.context);

解析:

this.contents.context 是文本内容 可以使用ajax 可以使用读取本地文件的方式

marked() 将内容Markdown语法解析 然后传递给id=content的标签

列:

读取本地文件的方式

<body>

<div id="content" style="width: auto;height: auto;">

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script> $(function () { var htmlobj = $.ajax({url: "./char类型能不能转成int类型？能不能转化成string类型？，能不能转成double类型？.md", async: false}); document.getElementById('content').innerHTML = marked(htmlobj.responseText); }) </script>

</body>

使用ajax的方式

$(function () {

     $.get("url",{},function (data) {
         document.getElementById('content').innerHTML = marked(data);

     })
      
    })

以上效果都是没有美化的Markdown 需要添加Markdown.css样式的

Markdown原样式

链接：https://pan.baidu.com/s/1cp5OULqni89Zqi3aW6iUVw
提取码：1234

将github-markdown.css 添加到页面中后自行修改

以下都是美化好的样式

infoq.css

链接：https://pan.baidu.com/s/1q1wJhIGNM7bTMLtJ2brWSQ
提取码：1234

xiaolai.css

链接：https://pan.baidu.com/s/1UPDsGnX8Sa8MP_V2HdH9hQ
提取码：1234

markdown-code.css

链接：https://pan.baidu.com/s/1FOYxRcJ0Za3cYHvrWFyKwg
提取码：1234

simple.css

链接：https://pan.baidu.com/s/1m7PRTLMnaoXBsmBqjrdxIA
提取码：1234

style.css

链接：https://pan.baidu.com/s/1F59Mfu8ioYkKo3JYckO-JA
提取码：1234

jquery添加代码块高亮和添加代块序号

给代码块添加高亮需要用到以下插件

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/highlight.min.js"></script>

然后需要激活高亮:

<script>hljs.initHighlightingOnLoad(); //激活高亮插件</script>

在使用时，一定要将你要展示的代码包在<pre><code></code></pre>标签里！！！ 这样才有效果

如果直接使用ajax的话渲染需要

//帮助你主动渲染highlight
            var highCode = hljs.highlightAuto("需要渲染的内容").value;
			//添加到指定的code里
            $("#code1 code").html(highCode);

如果是使用vue的话你会发现没有效果 那么可以这样

//定义一个全局控件
	Vue.directive('highlight',function (el) {
        let blocks = el.querySelectorAll('pre code');
        blocks.forEach((block)=>{
            hljs.highlightBlock(block)
        })
    })

然后在需要使用的地方

<div v-highlight>

               </div>

这里面的<pre><code></code></pre>标签就会产生效果

你会发现代码没有高亮因为还需要添加高亮的css样式 我这里提供了几种我认为比较好的 当然网上也有其他的你自己去找吧

护眼版

链接：https://pan.baidu.com/s/1xltZksH-d2yEqi-r5C1oqQ
提取码：1234

蓝屏版

链接：https://pan.baidu.com/s/19vTG8reMVz5McTxLhU7NjA
提取码：1234

白色背景版

链接：https://pan.baidu.com/s/1cz_-wcP5HEMHprswGgLDvQ
提取码：1234

黑色背景版

链接：https://pan.baidu.com/s/1muw0rc7Nf0R8feJD_pfxRQ
提取码：1234

将以上css样式添加后就会产生对应图片的效果了 但是新的问题就出现了 你可能会发现很多博客里代码块都有序号这是怎么添加的?

我帮你们写好了js和css代码你调用直接产生效果 但是css方面需要你根据主题的样式去调整颜色 需要调整的地方我也注释了

Code_block.js

链接：https://pan.baidu.com/s/1sJxt_33Vh3XBz-oRky7luQ
提取码：1234

Code_block.css

链接：https://pan.baidu.com/s/1Bq16LyNplaXSAAfeK9LvTg
提取码：1234

列:

需要的头部

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
    <link rel="stylesheet" href="css/atelier-dune-light.css">
    <link rel="stylesheet" href="css/Code_block.css">
   
</head>

需要的js

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad(); //激活高亮插件</script>
<script src="js/Code_block.js"></script>

方式一:手动添加代码方式

<!-- 手动添加代码的方式-->
    <div class="div_Code_block Code_text">
        <ul class="ul_Code_block"></ul>
        <pre class="pre_Code_block"><code class="code_Code_block">
                <textarea style="display: none">
     //总页数
    private int pages;

    //总记录数
    private long total;
    //结果集  ( 需要展现的数据)
    private List<T> list;

                </textarea>
              </code></pre>
        <button class="btn_Code_block">复制内容</button>
        <div class="dh_Code_block">
            <h2>复制成功</h2>
        </div>
    </div>

注意在code里的textarea标签会爆红不用管它

需要激活代码块序号添加下代码

<script>Code_block() //激活序号</script>

方式二:ajax读取本地文件的方式

<!--代码区域1-->
   <div class="div_Code_block Code_url">
        <ul id="ul_1" class="ul_Code_block"></ul>
        <pre class="pre_Code_block"><code class="code_Code_block"></code></pre>
        <button class="btn_Code_block">复制内容</button>
        <div class="dh_Code_block">
            <h3>复制成功</h3>
        </div>
    </div>

<!--代码区域2-->
    <div class="div_Code_block Code_url">
        <ul class="ul_Code_block"></ul>
        <pre class="pre_Code_block"><code class="code_Code_block"></code></pre>
        <button class="btn_Code_block">复制内容</button>
        <div class="dh_Code_block">
            <h2>复制成功</h2>
        </div>
    </div>

js代码

<script> var str = ["test/PageHelper分页.txt", "test/Page.txt"]; Code_block(str) //激活 </script>

str[0] 对应 第一个代码区域 str[2] 对应第二个代码区域

注意文件的地址:

方式三:ajax请求url返回数据渲染方式

但是会面临一个问题就是 hljs.initHighlightingOnLoad(); 只会在页面加载的时候渲染一次 而ajax是 异步的所以导致highlight渲染不上

但是有解决办法就是自己主动渲染就行 下面有代码自己看

<!--ajax 方式-->

<div class="div_Code_block Code_url" id="code1">
    <ul class="ul_Code_block"></ul>
    <pre class="pre_Code_block"><code class="code_Code_block" ></code></pre>
    <button class="btn_Code_block">复制内容</button>
    <div class="dh_Code_block">
        <h2>复制成功</h2>
    </div>
</div>



    <script> $.get("http://106.52.41.81:8083/feign_article/articleId?articleId=121-2021aE2jK12jR23dD48vW2g656B-943",{},function (data) { $("#code1 code").text($.parseJSON(data).data.context) //传入id 进行渲染代码块 序号 ajax_Block("code1") //帮助你主动渲染highlight var highCode = hljs.highlightAuto($.parseJSON(data).data.context ).value; $("#code1 code").html(highCode); }) </script>

jquery图片查看器

需要用到的css

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.9.0/viewer.min.css"/>

需要用到的js

<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.9.0/viewer.min.js"></script>

激活

<script> new Viewer(document.getElementById('images1'));</script>

列:

<body>

	
	<!-- 默认 src 属性 -->
	<ul id="images1" class="img-list">
	      <li><img src="./a.jpg" alt="Picture 1"></li>
	      <li><img src="./a.jpg" alt="Picture 2"></li>
	      <li><img src="./1.gif" alt="Picture 3"></li>
	</ul>
	
			<script> new Viewer(document.getElementById('images1'));</script>	
			
	</body>

这个控件满足了你所需要的图片查看的所有功能

如果是ajax 请求出来的图片那么就需要在请求的那个ajax里使用激活 使用 viewer.update(); 进行刷新

如果是vue那么就需要在created()事件中进行激活 如果不生效 那么看看在其他地方是否有 viewer代码 然后删除就行了

反正就是在什么地方获取到的图片那么就在什么地方进行激活就行了

默认的 配置 是最好的 的但是 如果你不需要某些 控件那么可以取消

名称类型默认值说明
inline布尔值false启用 inline 模式
button布尔值true显示右上角关闭按钮（jQuery 版本无效）
navbar布尔值/整型true显示缩略图导航
title布尔值/整型true显示当前图片的标题（现实 alt 属性及图片尺寸）
toolbar布尔值/整型true显示工具栏
tooltip布尔值true显示缩放百分比
movable布尔值true图片是否可移动
zoomable布尔值true图片是否可缩放
rotatable布尔值true图片是否可旋转
scalable布尔值true图片是否可翻转
transition布尔值true使用 CSS3 过度
fullscreen布尔值true播放时是否全屏
keyboard布尔值true是否支持键盘
interval整型5000播放间隔，单位为毫秒
zoomRatio浮点型0.1鼠标滚动时的缩放比例
minZoomRatio浮点型0.01最小缩放比例
maxZoomRatio数字100最大缩放比例
zIndex数字2015设置图片查看器 modal 模式时的 z-index
zIndexInline数字0设置图片查看器 inline 模式时的 z-index
url字符串/函数src设置大图片的 url
build函数null回调函数，具体查看演示
built函数null回调函数，具体查看演示
show函数null回调函数，具体查看演示
shown函数null回调函数，具体查看演示
hide函数null回调函数，具体查看演示
hidden函数null回调函数，具体查看演示
view函数null回调函数，具体查看演示
viewed函数null回调函数，具体查看演示

列:

var viewer = new Viewer(document.getElementById('images2'), {
				                url: 'data-imgurl', //需要加载的放大图的属性
								movable: false   // 设置不可移动图片
				            });

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/weixin_45203607/article/details/120247862

内容来源于网络，如有侵权，请联系作者删除！

jqueryajaxJavaScriptHtml前端css3

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com