素材牛

jQuery移动端消息提示插件showText.js

 所属分类:网页特效-对话框/灯箱/提示,弹出层,移动端特效

 浏览:51次  下载:0次  评论:1次  发布时间:2019-01-07
jQuery移动端消息提示插件showText.js兼容IE8
积分说明:注册即送5牛币,每天签到可获得5牛币,第三方账号登陆、注册直接赠送20牛币!    我要充值   更多积分说明»
素材描述:jQuery移动端消息提示插件showText.js,有三种提示框:toast,alert,confirm

注:请在移动端预览查看最佳展示效果!

使用方法

在导入jquery文件后导入showtext.js文件即可使用(注意,同一文件内不要多次导入)

<script src="http://www.sucainiu.com/themes/cdn/jquery/jquery-1.10.2.js"></script>
<script src="js/showText.js"></script>

在想要的地方调用不同函数即可显示不同的控件

//Toast的使用方法
showToast({
    text: '点击已生效,这是showToast', //【必填】,否则不能正常显示 , 剩余的其他不是必填
    bottom: '10%', //toast距离页面底部的距离
    zindex: 2, //为了防止被其他控件遮盖,z-index默认为2
    speed: 500, //toast的显示速度
    time: 5000 //toast显示多久以后消失
});
//Alert的使用方法:
showAlert({
    text: 'showAlert,点击按钮调用回调函数', //【必填】,否则不能正常显示
    btnText: '确定', //按钮的文本
    top: '34%', //alert弹出框距离页面顶部的距离
    zindex: 5, //为了防止被其他控件遮盖,默认为2,背景的黑色遮盖层为1,修改后黑色遮盖层的z-index是这个数值的-1
    color: '#fff', //按钮的文本颜色,默认白色
    bgColor: '#1b79f8', //按钮的背景颜色,默认为#1b79f8
    success: function() { //点击按钮后的回调函数
        showToast({
            text: '调用了回调函数!',
        })
    }
});
//Confirm的使用方法:
showConfirm({
    text: 'This is Confirm', //【必填】,否则不能正常显示
    rightText: '成功', //右边按钮的文本
    rightBgColor: '#1b79f8', //右边按钮的背景颜色,【不能设置为白色背景】
    rightColor: '#fff', //右边按钮的文本颜色,默认白色
    leftText: '过于长的文本过于长的文本', //左边按钮的文本
    top: '34%', //弹出框距离页面顶部的距离
    zindex: 5, //为了防止被其他控件遮盖,默认为2,背景的黑色遮盖层为1,修改后黑色遮盖层的z-index是这个数值的-1
    success: function() { //右边按钮的回调函数
        showToast({
            text: '调用了成功的回调函数!'
        })
    },
    cancel: function() { //左边按钮的回调函数
        showToast({
            text: '调用了失败的回调函数!'
        })
    }
});

本插件的原理不过是加载js以后往页面里插入几个节点,非常简单,使用者可以修改源码来获得自己想要的效果

文件目录结构
  • js
    • ┝ jquery.min.js
    • ┝ showText.js

讨论这个项目(1)回答他人问题或分享插件使用方法奖励牛币

Lv3 黄金

    xiaomo
    2019年01月07日 23:32
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:0
所需牛币:5 开始下载

牛币获取:可通过签到、评论、充值、发布素材获得 » 牛币充值

会员账号
会员密码
安全验证