全国咨询热线:18720358503

南宁小程序开发_jquery插件锦集【引荐】

类别:行业新闻 发布时间:2021-01-12 浏览人次:

jquery插件锦集【推荐】       本文主要分享了jquery插件: 时钟效果; 倒计时; 全选效果; tab点击切换; tab鼠标移动切换; 文本输入搜索等。具有很好的参考价值需要的朋友一起来看下吧

本篇的由来是群里面某个朋友提到说:有没有一个倒计时的特效,格式如分钟:秒;由此思考了下,觉得弄几个常用效果的js小插件还是不错的,可以供大家学习和使用,这里我取名为:shenniu.effect.js;希望大家喜欢,多多点赞支持:

. 时钟效果

. 倒计时

. 全选效果

. tab点击切换

. tab鼠标移动切换

. 文本输入搜索

. 几个常用table展示方式插件

. 列表插件shenniu.pager.js

下面一步一个脚印的来分享:

:8081/,接着需要引用和及,然后咋们一起来看怎么使用和效果图

. 时钟插件代码:

//横向时钟
 HenXiangClock: function (option) {
 var defOption = {
 id: "HenXiangClockId",
 format: "yyy-MM-dd HH:mm:ss", //格式
 setInterNum: 1 * 1000, //js计时器的周期时间,默认1s
 $.extend(defOption, option);
 var clearVal = setInterval(function () {
 var dateTime = new Date();
 var y = dateTime.getFullYear();
 var M = dateTime.getMonth() + 1;
 var d = dateTime.getDate();
 var h = dateTime.getHours();
 var m = dateTime.getMinutes();
 var s = dateTime.getSeconds();
 var sy = y;
 var sM = addZero(M, 10, 0);
 var sd = addZero(d, 10, 0);
 var sh = addZero(h, 10, 0);
 var sm = addZero(m, 10, 0);
 var ss = addZero(s, 10, 0);
 var result = defOption.format.
 replace("yyyy", sy).
 replace("MM", sM).
 replace("dd", sd).
 replace("HH", sh).
 replace("mm", sm).
 replace("ss", ss);
 $("#" + (result);
 if (defOption.setInterNum = 0) { clearInterval(clearVal); }
 }, defOption.setInterNum);
 }

横向时钟

effect.HenXiangClock({ id: "div1_1", format: "yyyy-MM-dd HH:mm:ss" });

文字时钟

effect.HenXiangClock({ id: "div1_2", format: "yyyy年MM月dd日HH时mm分ss秒" });

缩写时钟

 effect.HenXiangClock({ id: "div1_3", format: "HH时mm分ss秒" });
 effect.HenXiangClock({ id: "div1_4", format: "HH:mm:ss" });
 effect.HenXiangClock({ id: "div1_5", format: "yyyy-MM-dd", setInterNum: 0 });

. 倒计时插件代码:

//倒计时
 ReClock: function (option) {
 var defOption = {
 id: "ReClockId",
 h: 0, //时
 m: 0, //分钟
 s: 0, //秒
 format: "HH:mm:ss", //格式
 isAutoZero: true, //数字个位数的时候,是否自动增加0
 setInterNum: 1 * 1000, //js计时器的周期时间,默认1s
 backFun: function () { }
 $.extend(defOption, option);
 var clearVal = setInterval(function () {
 var dateTime = new Date(0, 0, 0, defOption.h, defOption.m, defOption.s, 0);
 if (defOption.s = 0) {
 if (defOption.m = 0) {
 if (defOption.h = 0) {
 $("#" + ("");
 //清除timer
 clearInterval(clearVal);
 //执行回调函数
 defOption.backFun();
 return;
 } else {
 defOption.s = 59;
 defOption.m = 59;
 defOption.h--;
 } else {
 defOption.s = 59;
 defOption.m--;
 var h = dateTime.getHours();
 var m = dateTime.getMinutes();
 var s = dateTime.getSeconds();
 pareNum = defOption.isAutoZero 10 : 0;
 var sh = addZero(h, compareNum, 0);
 var sm = addZero(m, compareNum, 0);
 var ss = addZero(s, compareNum, 0);
 var result = defOption.format.
 replace("HH", sh).
 replace("mm", sm).
 replace("ss", ss);
 $("#" + (result);
 defOption.s--;
 }, defOption.setInterNum);
 }

时钟倒计时

//倒计时
 effect.ReClock({
 id: "div2_1", m: 1, format: "mm:ss", backFun: function () {
 $("#("结束啦");
 });

提交按钮倒计时

$("#btn2_2").on("click", function () {
 var btnObj = $(this);
 btnObj.attr("disabled", "disabled")
 effect.ReClock({
 id: "div2_2",
 s: 10,
 format: "ss秒后才能重新获取",
 isAutoZero: false,
 backFun: function () {
 btnObj.removeAttr("disabled");
 });

提交按钮倒计时缩写

$("#btn2_3").on("click", function () {
 var btnObj = $(this);
 btnObj.attr("disabled", "disabled")
 effect.ReClock({
 id: "div2_3",
 s: 10,
 format: "ss秒",
 isAutoZero: false,
 backFun: function () {
 btnObj.removeAttr("disabled");
 });

. 全选插件代码:

 CheckBoxAll: function (option) {
 var defOption = {
 nameAll: "cbAll", //全选项Name
 nameChild: "cb" //子项Name
 $.extend(defOption, option);
 $("input[type='checkbox'][name='" + defOption.nameAll + "']").on("click", function () {
 var isChecked = $(this).is(":checked");
 $("input[type='checkbox'][name='" + defOption.nameChild + "']").prop("checked", isChecked);
 }

 //全选
 effect.CheckBoxAll({
 nameAll: "cbAll", //全选项Name
 nameChild: "cb" //子项Name
 });

. tab切换插件:

//tab切换
 TabPanel: function (option) {
 var defOption = {
 tabShowId: "tabShowId", //tab需要显示在div的Id
 data: [
 { title: "tab1", content: "王小一", url: "" },
 { title: "tab2", content: "", url: "" },
 { title: "tab3", content: "王小二", url: "" },
 { title: "tab4", content: "王小三", url: "" }
 isMouseMove: false, //是否鼠标移动切换
 tabParentId: "divTab", //tab按钮父级的id
 tabContentId: "divTabContent" //内容区域父级Id
 $.extend(defOption, option);
 //构造html样式
 var tHtml = [];
 var pHtml = [];
 $.each(defOption.data, function (i, item) {
 if (item.title.length 0) {
 var labFirst = (i == 0 " "checkLabel\"" : "");
 var panelFirst = (i == 0 "" : "hide");
 tHtml.push(' label data-panel-val="' + i + '" ' + labFirst + ' ' + item.title + ' /label 
 if (item.content.length 0) {
 var content = item.content;
 pHtml.push(' div data-panel-item="' + i + '" class="' + panelFirst + ' panelContent text-left" ' + content + ' /div 
 } else if (item.url.length 0) {
 pHtml.push(' div data-panel-item="' + i + '" class="' + panelFirst + ' panelContent text-left" 
 pHtml.push(' iframe src="' + item.url + '" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" id="modalContent" 
 pHtml.push(' /div 
 } else {
 pHtml.push(' div data-panel-item="' + i + '" class="' + panelFirst + ' panelContent text-left" /div 
 if (tHtml.length = 0) { return; }
 var tabHtml = [];
 tabHtml.push(' div id="' + defOption.tabParentId + '" 
 tabHtml.push(tHtml.join(''));
 tabHtml.push(' /div 
 tabHtml.push(' div id="' + defOption.tabContentId + '" 
 tabHtml.push(pHtml.join(''));
 tabHtml.push(' /div 
 $("#" + (tabHtml.join(''));
 Obj = $("#" + defOption.tabParentId);
 var tabContentObj = $("#" + defOption.tabContentId);
 Obj.find("label[data-panel-val]").on(defOption.isMouseMove "mouseover" : "click", function () {
 //对应值
 var panelVal = $(this).attr("data-panel-val");
 //tab按钮
 Obj.find("label[data-panel-val]").removeClass("checkLabel");
 $(this).addClass("checkLabel");
 //必须div承载内容
 tabContentObj.find("div[data-panel-item]").addClass("hide"); //全部隐藏
 tabContentObj.find("div[data-panel-item='" + panelVal + "']").removeClass("hide"); //选中展示

tab点击切换

//tab点击切换
 effect.TabPanel({
 tabShowId: "divShowTab01",
 data: [
 { title: "tab1", content: "最近的工作能力大大提升, br/ 得到赏识, br/ 可是太注重事业和赚钱了, br/ 导致让身体透支, br/ 需要多注意健康, br/ 一日三餐要准时才好。", url: "" },
 { title: "tab2", content: "今日身边的女性友人会是你的贵人,多跟她们接触会得到一些好消息。 br/ 另外财运旺盛,只要能抓紧契机,积极行动便能进账丰厚。", url: "" },
 { title: "tab3", content: '很压抑。。。。 img alt="128x128" id="imgShow" src="XS.Web/ImgContentFolder/thunbnail/.jpg" data-holder-rendered="true" ', url: "" },
 { title: "tab4", content: "", url: "" }
 });

tab鼠标移动切换

使用代码:

//tab滑动切换
 effect.TabPanel({
 tabShowId: "divShowTab02",
 data: [
 { title: "tab1", content: "1 br / 11 br / 111 br / 1111 br / 11111 br / ", url: "" },
 { title: "tab2", content: "2 br / 22 br / 222 br / 2222 br / 22222 br / ", url: "" },
 { title: "tab3", content: "3 br / 33 br / 333 br / 3333 br / 33333 br / ", url: "" }
 tabParentId: "divTab01", //tab按钮父级的id
 tabContentId: "divTabContent01", //内容区域父级Id
 isMouseMove: true
 });

. 文本输入搜索

//文本输入搜索
 TxtSearch: function (option) {
 var defOption = {
 name: "txtSearch", //搜索框Name
 size: 5, //显示条数
 data: [
 { text: "我爱您啊", value: "1" },
 { text: "我爱祖国", value: "2" },
 { text: "我爱家人", value: "3" },
 { text: "我喜欢美女", value: "4" },
 { text: "我爱钱", value: "5" },
 { text: "我是神牛步行3", value: "6" }
 showDivId: "div_TxtSearch" //展示内容的divId
 $.extend(defOption, option);
 $("input[name='" + defOption.name + "']").on("keyup", function () {
 var txtObj = $(this);
 var divSearchObj = txtObj.next("div[id='div_TxtSearch']");
 if (divSearchObj) {
 divSearchObj.remove();
 var txtVal = $(this).val();
 if (txtVal.length = 0) {
 return;
 var dataHtml = [];
 var nSize = 0;
 $.each(defOption.data, function (i, item) {
 if (item.text.indexOf(txtVal) = 0) {
 dataHtml.push(' li data-val="' + item.value + '" ' + item.text + ' /li 
 nSize++;
 if (nSize = defOption.size) {
 return false;
 if (dataHtml.length = 0) { return; }
 var w = txtObj.css("width");
 var txtHtml = [];
 txtHtml.push(' div id="' + defOption.showDivId + '" style="position: absolute; width: ' + w + '; z-index: 99; background: #fff; border: 1px solid #ccc;margin-top: -1px; overflow:hidden; display: block;" 
 txtHtml.push(' ul 
 txtHtml.push(dataHtml.join(''));
 txtHtml.push(' /ul 
 txtHtml.push(' /div 
 $(this).after(txtHtml.join(''));
 //重新获取对象
 divSearchObj = txtObj.next("div[id='div_TxtSearch']");
 //选中项事件
 var liObj = $("div[id='" + defOption.showDivId + "']").find("ul li");
 //鼠标移上去
 liObj.on("mouseover", function () {
 $(this).css("background-color", "#efecec");
 liObj.on("mouseout", function () {
 $(this).css("background-color", "#fff");
 //选中
 liObj.on("click", function () {
 var liVal = $(this).attr("data-val");
 ();
 txtObj.val(liText);
 //绑定焦点事件
 $("input[name='" + defOption.name + "']").on("focus", function () {
 $("div[id='" + defOption.showDivId + "']").show();
 //失去焦点
 $(document).on("click", function (e) {
 var txtObj = $("input[name='" + defOption.name + "']");
 var divSearchObj = txtObj.next("div[id='div_TxtSearch']");
 var tH = txtObj.prop("outerHTML");
 var eH = $(e.target).prop("outerHTML");
 if (tH == eH) {
 divSearchObj.show();
 } else {
 divSearchObj.hide();

//文本下拉搜索
 effect.TxtSearch({
 name: "txtSearch", //搜索框Name
 size: 5,//显示5条
 data: [
 { text: "我爱您啊!", value: "1" },
 { text: "我爱祖国!", value: "2" },
 { text: "我爱家人!", value: "3" },
 { text: "我喜欢美女!", value: "4" },
 { text: "我爱钱!", value: "5" },
 { text: "我是神牛步行3!", value: "6" }

. 几个常用table展示方式插件

由于这个插件已经在前面文章分享过了,在里就不多说了各位可以点击链接看下使用说明

. 列表插件

由于这个件已经在前面文章分享过了,在里就不多说了各位可以点击链接看下使用说明

下面给出测试页面调用插件的例子,方便大家直接使用:

推荐阅读

南宁小程序开发_jquery插件锦集【引荐】

jquery软件锦集【强烈推荐】 文中关键共享了jquery软件: 数字时钟实际效果; 倒数计时; 全选实际效果; tab点一下转换; tab电脑鼠标移动转换; 文字键入检索等。具备非常好的参照使用...

2021-01-12
简单八招邮件营销方法 搞定你的客户

 电子邮件营销推广方式,说白了,便是以发送邮件的方式来吸引住你的消費者及其发掘出潜伏消費群体,进而推动市场销售量及其加重对知名品牌的宣传策划。今日大家...

2021-01-12
重庆和平自动化工程有限公司

企业详细介绍: 我企业位于重庆市高新科技区,主营业务轿车摩托车车检验机器设备,生产制造全过程安装机器设备,家用电器生产制造测算机操纵系统软件、非标准工装...

2021-01-12
微信答题小程序_JS获取多维数组中相同键的值完

JS获得多维度数字能量数组中同样键的值完成方式实例 本文关键详细介绍了JS获得多维度数字能量数组中同样键的值完成方式,融合案例方式剖析了JS数字能量数组解析xml、分辨、键...

2021-01-12
微信小程序报名_JS基于onclick工作完成单个按钮的

JS根据onclick恶性事件完成单独按键的编写与储存作用实例 本文关键详细介绍了JS根据onclick恶性事件完成单独按键的编写与储存作用,融合案例方式剖析了JS完成onclick响应恶性事件的...

2021-01-12
建设一个让人们都喜欢的网站需要做好这几点

您的部位: > 新闻报道新闻资讯 > 企业网站建设 > 基本建设一个令人们都喜爱的网站必须搞好这几个方面现如今基本建设一个网站非常容易,但是大家喜爱的网站呢?告知大家真正大家喜...

2021-01-12
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信