JQuery+Bootstrap 自定义全屏Loading插件 /*** 自定义Loading插件* @param {Object} config* {* content[加载显示文本],* time[自动关闭等待时间(ms)]* } * @param {String} config * 加载显示文本* @refer 依赖 JQuery-1.9.1及以上、Bootstrap-3.3.7及以上* @return {KZ_Loading} 对象实例*/ function KZ_Loading(config) {if (this instanceof KZ_Loading) {const domTemplate = <div class="modal fade kz-loading" data-kzid="...
本文实例讲述了jQuery判断自定义属性data-val用法。分享给大家供大家参考，具体如下： jquery判断自定义属性data-val 1.css .active {color: red; }2.html <ul><li data-val="1">1</li><li data-val="2">2</li><li data-val="3">3</li><li data-val="4">4</li><li data-val="5">5</li> </ul>3.js //方法1 $(function() {$("ul li[data-val=1]").addClass("active").siblings().removeClass("active") }); //方法2 $("ul li").each(...
前言 题外话.......最近在开发一个网站项目的时候,需要用到网页自定义右键菜单,在网上看了各路前辈大神的操作,头晕目眩,为了达到目的,突然灵机一动,于是便有了这篇文章. 先放个效果图(沾沾自喜,大神勿喷):废话不多说,进入正题: 1.首先 我们要禁用掉原网页中右键菜单 //JQuery代码 $(selector).on(contextmenu, function () {return false; })这样目标区域的右键菜单就无法使用了 demo1: <!DOCTYPE html> <html><head><meta charset...
本文为大家分享了jQuery实现文字跑马灯效果的具体代码，供大家参考，具体内容如下 一、明确需求 基本需求：最近在工作中接到一个新需求，简单来说就是实现一行文字从右到左跑马灯的效果，并且以固定的时间间隔进行循环。 原本这是一个很容易实现的需求，但是难点是要求很多参数得是用户可自行设置的，包括文字跑马灯的速度和距离下次出现的间隔。具体需求见下图：这样一来实现这个功能就会有点麻烦了，需要烧烧脑细胞了。 二、具体...
本文实例讲述了jQuery实现导航样式布局操作。分享给大家供大家参考，具体如下： 1. 导航Html <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com 导航样式布局</title><link rel="stylesheet" href="style.css" rel="external nofollow" ><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script src="nav.js"></script><script>$(function () {$(.list).eq(0).nav(y...
本文实例讲述了jQuery使用动画队列自定义动画操作。分享给大家供大家参考，具体如下： jQuery的queue()方法和dequeue()方法配合使用，可以完成对函数队列的操作。 实现步骤： 1、新建一个函数数组，把动画函数依次放进去； 2、调用queue()方法将动画函数数组加入队列中； 3、利用dequeue()方法取出函数队列中的第一个函数，并执行它。 示例： <!DOCTYPE html> <html><head><title>jQueryQueueTest.html</title><meta http-equiv="k...
本文实例为大家分享了jquery自定义显示消息数量展示的具体代码，供大家参考，具体内容如下 根据需求简单的实现一个小功能控件，暂时不支持扩展。 $（"xxxxxxx"）.iconCountPlugin（options, start, isOffset) {//三个参数，自定义样式，是否禁止图标位置随浏览器窗口变化而变化，是否禁用偏移量 这个是调用，后面俩参数可以根据需求自行进行调整，以兼容不同的浏览器，可能因为浏览器之间的差异导致出一些意想不到的错误.; (functi...
话不多说，先看效果。其实就是一个可以按住鼠标进行一个区域内条目选择的功能，相信用过Jquery UI 的都知道这是selectable的功能，然而我们如果用Vue开发的话没有类似的插件，当然你仍然可以把jquery的拿过来直接用，但是我又不想引入jquery 和 jquery UI在我的项目中，于是我就自己尝试着实现类似的功能。要实现这个功能分两步。第一步是实现鼠标选择区域的功能，第步部是把这个区域内被选择的item添加一个active的类。先看如何实...
先写2个input 分别表示开始时间跟结束时间 在写一个button 点击按钮 让表格重新刷新 代码如下 如下所示在datatable设置项增加如下设置 如果已经有了 只需要添加如下的data选项 ajax: {url: /admin/index,type: POST,"data": function ( d ) {//添加额外的参数传给服务器d.beginDate = $("#datetimepicker1").val();d.endDate = $("#datetimepicker2").val();} }, $("#searchsubmit").bind("click", function () { //按钮 点击事件...
项目中需要自定义一个下拉框多选插件，业务问题还是自己实现比较好 通过$.fn 向jQuery添加新的方法 下拉数据通过参数传递进去，通过调用该插件时接收，选择后的确定与取消事件采用事件传递方式 代码如下： 1.效果图2.代码 <div id="demo" class="dropdown-container"><div class="dropdown-display"><span></span><input type="text" class="iptdiplay" placeholder="请选择" readonly="readonly" /></div><div class="dropdown-...
简单的两个步骤即可实现分页功能<script src="<%=basePath%>/resources/js/jquery-1.7.1.min.js"></script> <script src="<%=basePath%>/resources/js/jquery.loehpagerv1.0.js"></script> <script type="text/JavaScript"> //回调里面进行业务处理function loehpagercallback(data) {alert(这里处理回调的data);}$(function() { $(#customerPager).LoehPagerPlugin({color: gray,fontSize: 15px,totalCount:<%=totalpage%>,pageSi...
大多数情况下我们使用左键来进行页面交互，而右键大部分对于开发者来说是审查元素的，有的时候我们也要自定义鼠标右键点击行为来达到更好的交互性，常见的有漫画左键前进、右键后退。 第一步我们要屏蔽浏览器默认的右键点击行为，即阻止弹出框。 首先要将阻止弹出函数绑定到目标元素上： //阻止浏览器默认右键点击事件 $("div").bind("contextmenu", function(){return false; })如此一来，div元素的右击事件就被屏蔽了，而浏览器其...
摘要 1.jquery自定义插件方法 2.表单file样式调整 3.利用formData,ajax上传图片 4.js,css弹出层 5.springmvc上传图片 效果调用方式 $("#picUrl").imgUpload({})，在代码内部为调用对象绑定了click事件，点击弹出上传界面。 $(function(){ $("#picUrl").imgUpload({url:<%=basePath%>+file/upload.do}) $("#picUrl").imgUpload("resize");/**弹出层水平垂直居中**/ })jquery自定义插件要点 1.定义作用域 2.$.fn.***为每个jquery对象...
jQuery的ContextMenu插件使用起来非常简单（当前前提是看了我的上一篇微博，哈哈），但是想改菜单的图标，很多人又要懵圈了。因为ContextMenu插件只提供了有限的几个图标，如剪切、拷贝、删除等等。 修改图标的相关代码： $(function(){$.contextMenu({selector: .context-menu-one, callback: function(key, options) {var m = "clicked: " + key;window.console && console.log(m) || alert(m); },items: {"edit": {name: "Edit"...
1.自定义宽高效果1.html 代码 index.html <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="./jquery-1.12.4.min.js"></script> </head> <body> <img class="source" src="./test2.jpg" alt=""> <img src="" class="target" alt=""> </body> </html> 2.添加插件代码 (function ($) {$.fn.photoCrop=function (option) {var opt={img:,fixedScale:9/5,isHead:null,maxWidth:140...