全部 android asp.net C/C++ cshap IOS Java javascript nodejs perl php python ruby web容器 其他 前端 数据库 第三方平台 混合式APP 网络 系统 默认分类

个人插件锦集

0 75

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

 

. 时钟效果

. 倒计时

. 全选效果

. tab点击切换

. tab鼠标移动切换

. 文本输入搜索

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

. 列表插件shenniu.pager.js

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

首先,先发个线上测试地址lovexins.com:8081/tpl/effect.html,接着需要引用jquery.jsshenniu.effect.jsshenniu.effect.css,然后咋们一起来看怎么使用和效果图

. 时钟插件代码:

View Code

横向时钟

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 });

 

. 倒计时插件代码:

View Code

时钟倒计时

//倒计时
        effect.ReClock({
            id: "div2_1", m: 1, format: "mm:ss", backFun: function () {

                $("#div2_1").html("结束啦");
            }
        });

 

提交按钮倒计时

$("#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");
                }
            });
        });

 

. 全选插件代码:

View Code

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

 

. tab切换插件:

View Code

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 class="img-rounded" alt="128x128" id="imgShow" src="http://121.42.208.152:8080/XS.Web/ImgContentFolder/thunbnail/20161212141115292726.jpg" data-holder-rendered="true" >', url: "" },
                        { title: "tab4", content: "", url: "http://121.42.208.152/" }
            ]
        });

 

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
        });

 

. 文本输入搜索

//文本下拉搜索
        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展示方式插件table.shenniu.js

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

 

. 列表插件shenniu.pager.js

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

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

View Code

如果您觉得有什么小东西需要我帮忙,可以联系我;如果觉得效果还不错可以扫码支持下,谢谢

热忱回答0