上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

[油猴脚本开发指南]toastr引用

[复制链接]
  • TA的每日心情
    慵懒
    4 天前
  • 签到天数: 193 天

    [LV.7]常住居民III

    710

    主题

    5881

    回帖

    6704

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6704

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2021-10-7 19:13:46 | 显示全部楼层 | 阅读模式

    关于正式脚本引用问题

    gf发布的require路径有一定的限制,这里依然目前没有找到特别好的办法

    jsdelivr被限制了gh路径的发布

    所以如果你引用我的路径很大概率是要出问题的

    请不要在正式发布脚本尝试引入我的魔改

    快捷使用

    警告,原文档https://github.com/CodeSeven/toastr

    这里仅做简单的翻译,方便大家查阅和参考

    是我个人的理解和大概翻译,如果出现错误请以官方为准。

    引入css

    引入js

    提示信息

    toastr.info('Are you the 6 fingered man?')

    详细信息

    展示警告信息

    toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')

    展示成功信息

    toastr.success('Have fun storming the castle!', 'Miracle Max Says')

    展示错误信息

    toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')

    立即移除toast不使用动画

    toastr.remove()

    立即移除toast但使用动画

    toastr.clear()

    覆盖全局配置的toast

    
    toastr.success('We do have the Kapua suite available.', 'Turtle Bay Resort', {timeOut: 5000})

    使用转义字符

    toastr.options.escapeHtml = true;

    使用关闭按钮

    选项启用关闭按钮

    toastr.options.closeButton = true;

    选项覆盖关闭按钮html

    toastr.options.closeHtml = '<button><i class="icon-off"></i></button>';

    还可以复写关闭按钮的CSS#toast-container .toast-close-button

    可选择关闭按钮的时候覆盖隐藏动画

    toastr.options.closeMethod = 'fadeOut';
    toastr.options.closeDuration = 300;
    toastr.options.closeEasing = 'swing';

    控制显示顺序

    toastr.options.newestOnTop = false;

    默认为假,如果为真则从上方显示最新

    回调

    控制toast显示 隐藏 点击 关闭点击按钮的回调

    // Define a callback for when the toast is shown/hidden/clicked
    toastr.options.onShown = function() { console.log('hello'); }
    toastr.options.onHidden = function() { console.log('goodbye'); }
    toastr.options.onclick = function() { console.log('clicked'); }
    toastr.options.onCloseClick = function() { console.log('close button clicked'); }

    动画

    toast提供了默认动画,如无必要,无需覆盖。

    这里由于大部分人并不需要特别细致的动画,我就跳过这里了

    有兴趣可以自己研究一下

    防止重复

    toastr.options.preventDuplicates = true;

    通过与之前的toast内容进行匹配来判断重复。

    超时控制

    toastr.options.timeOut = 30; // How long the toast will display without user interaction
    toastr.options.extendedTimeOut = 60; // How long the toast will display after a user hovers over it

    timeout为没有用户交互的情况下的显示时间

    extendedtimeout为用户鼠标悬停时,toast的显示时间

    防止自动隐藏

    将超时以及悬停超时设置为0,则一直存在直至被选中

    toastr.options.timeOut = 0;
    toastr.options.extendedTimeOut = 0;

    进度条

    视觉上提示用户还有多久用户toast过期

    toastr.options.progressBar = true;

    原文

    https://github.com/CodeSeven/toastr

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表