ohsnap

ohsnap

关注
发信
关注(28)粉丝(399)

javascript - 无法弄清楚如何调用ohsnap.js

我一直试图发出一个简单的通知“弹出窗口”，但我的阅读障碍是我的敌人。 （花了3个小时，我发现我写的是“ scr”而不是“ src”

该脚本本身是一个预先编写的脚本（http://justindomingue.github.io/ohSnap/）
这是我的html代码：

<!DOCTYPE html><html><head><meta charset=utf-8>


<link href="//my.site.se/css/ohsnap.css" rel="stylesheet" type="text/css" />

</head>
<body>

<div id="ohsnap"></div>


<script src= "//my.site.se/js/jquery-3.2.1.slim.js"></script>
<script src="//my.site.se/js/ohsnap.js"></script>

<script>
ohSnap('Oh Snap! I cannot process your card...');
</script>
</body>


最后的“脚本”是我最后一次调用ohsnap函数的尝试，但是我无法使其正常工作。

我已经检查了html代码，并确保css和脚本文件已“加载”。

这是ohsnap.js

/**
 * == OhSnap!.js ==
 * A simple jQuery/Zepto notification library designed to be used in mobile apps
 *
 * author: Justin Domingue
 * date: september 18, 2015
 * version: 1.0.0
 * copyright - nice copyright over here
 */

/* Shows a toast on the page
 * Params:
 *  text: text to show
 *  options: object that can override the following options
 *    color: alert will have class 'alert-color'. Default null
 *    icon: class of the icon to show before the alert. Default null
 *    duration: duration of the notification in ms. Default 5000ms
 *    container-id: id of the alert container. Default 'ohsnap'
 *    fade-duration: duration of the fade in/out of the alerts. Default 'fast'
*/
function ohSnap(text, options) {
  var defaultOptions = {
    'color'       : null,     // color is  CSS class `alert-color`
    'icon'        : null,     // class of the icon to show before the alert text
    'duration'    : '5000',   // duration of the notification in ms
    'container-id': 'ohsnap', // id of the alert container
    'fade-duration': 'fast',  // duration of the fade in/out of the alerts. fast, slow or integer in ms
  }

  options = (typeof options == 'object') ? $.extend(defaultOptions, options) : defaultOptions;

  var $container = $('#'+options['container-id']),
    icon_markup = "",
    color_markup = "";

    if (options.icon) {
        icon_markup = "<span class='" + options.icon + "'></span> ";
    }

    if (options.color) {
      color_markup = 'alert-' + options.color;
    }

    // Generate the HTML
    var html = $('<div class="alert ' + color_markup + '">' + icon_markup + text + '</div>').fadeIn(options['fade-duration']);

    // Append the label to the container
    $container.append(html);

    // Remove the notification on click
    html.on('click', function() {
        ohSnapX($(this));
    });

    // After 'duration' seconds, the animation fades out
    setTimeout(function() {
        ohSnapX(html);
    }, options.duration);
}

/* Removes a toast from the page
 * params:
 *    Called without arguments, the function removes all alerts
 *    element: a jQuery object to remove
 *    options:
 *      duration: duration of the alert fade out - 'fast', 'slow' or time in ms. Default 'fast'
 */
function ohSnapX(element, options) {
    defaultOptions = {
      'duration': 'fast'
    }

    options = (typeof options == 'object') ? $.extend(defaultOptions, options) : defaultOptions;

    if (typeof element !== "undefined") {
        element.fadeOut(options.duration, function() {
            $(this).remove();
        });
    } else {
        $('.alert').fadeOut(options.duration, function() {
            $(this).remove();
        });
    }
}


这是css文件：

/* ALERTS */
/* inspired by Twitter Bootstrap */

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #eed3d7;
  border-radius: 4px;
  position: absolute;
  bottom: 0px;
  right: 21px;
  /* Each alert has its own width */
  float: right;
  clear: right;
  background-color: white;
}

.alert-red {
  color: white;
  background-color: #DA4453;
}
.alert-green {
  color: white;
  background-color: #37BC9B;
}
.alert-blue {
  color: white;
  background-color: #4A89DC;
}
.alert-yellow {
  color: white;
  background-color: #F6BB42;
}
.alert-orange {
  color:white;
  background-color: #E9573F;
}


而且我猜我不需要附加jQuery;）

这也是我今天尝试的第五个脚本（只是尝试过的脚本已花费了5个小时以上），但它不仅会起作用。
我什至尝试阅读制造商主页的源代码，但是该解决方案对我不起作用（他使用按钮），我需要在检索页面时执行脚本。

有人遇到过这个吗？

最佳答案

1）您的第一个脚本标签未关闭:)

2）您不能在没有名称的情况下声明函数，只需在执行代码之前使用$(function(){ ... });等待页面完全加载即可。

3）您需要使用JQuery而不是JQuery Slim才能正确使用.fadeIn()函数。



/**
 * == OhSnap!.js ==
 * A simple jQuery/Zepto notification library designed to be used in mobile apps
 *
 * author: Justin Domingue
 * date: september 18, 2015
 * version: 1.0.0
 * copyright - nice copyright over here
 */

/* Shows a toast on the page
 * Params:
 *  text: text to show
 *  options: object that can override the following options
 *    color: alert will have class 'alert-color'. Default null
 *    icon: class of the icon to show before the alert. Default null
 *    duration: duration of the notification in ms. Default 5000ms
 *    container-id: id of the alert container. Default 'ohsnap'
 *    fade-duration: duration of the fade in/out of the alerts. Default 'fast'
*/
function ohSnap(text, options) {
  var defaultOptions = {
    'color'       : null,     // color is  CSS class `alert-color`
    'icon'        : null,     // class of the icon to show before the alert text
    'duration'    : '5000',   // duration of the notification in ms
    'container-id': 'ohsnap', // id of the alert container
    'fade-duration': 'fast',  // duration of the fade in/out of the alerts. fast, slow or integer in ms
  }

  options = (typeof options == 'object') ? $.extend(defaultOptions, options) : defaultOptions;

  var $container = $('#'+options['container-id']),
    icon_markup = "",
    color_markup = "";

    if (options.icon) {
        icon_markup = "<span class='" + options.icon + "'></span> ";
    }

    if (options.color) {
      color_markup = 'alert-' + options.color;
    }

    // Generate the HTML
    var html = $('<div class="alert ' + color_markup + '">' + icon_markup + text + '</div>').fadeIn(options['fade-duration']);

    // Append the label to the container
    $container.append(html);

    // Remove the notification on click
    html.on('click', function() {
        ohSnapX($(this));
    });

    // After 'duration' seconds, the animation fades out
    setTimeout(function() {
        ohSnapX(html);
    }, options.duration);
}

/* Removes a toast from the page
 * params:
 *    Called without arguments, the function removes all alerts
 *    element: a jQuery object to remove
 *    options:
 *      duration: duration of the alert fade out - 'fast', 'slow' or time in ms. Default 'fast'
 */
function ohSnapX(element, options) {
    defaultOptions = {
      'duration': 'fast'
    }

    options = (typeof options == 'object') ? $.extend(defaultOptions, options) : defaultOptions;

    if (typeof element !== "undefined") {
        element.fadeOut(options.duration, function() {
            $(this).remove();
        });
    } else {
        $('.alert').fadeOut(options.duration, function() {
            $(this).remove();
        });
    }
}

/* ALERTS */
/* inspired by Twitter Bootstrap */

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #eed3d7;
  border-radius: 4px;
  position: absolute;
  bottom: 0px;
  right: 21px;
  /* Each alert has its own width */
  float: right;
  clear: right;
  background-color: white;
}

.alert-red {
  color: white;
  background-color: #DA4453;
}
.alert-green {
  color: white;
  background-color: #37BC9B;
}
.alert-blue {
  color: white;
  background-color: #4A89DC;
}
.alert-yellow {
  color: white;
  background-color: #F6BB42;
}
.alert-orange {
  color:white;
  background-color: #E9573F;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="ohsnap"></div>

<script>
$(function(){
  ohSnap('Oh Snap! I cannot process your card...', {color: 'red'});
});
</script>

10-02 20:47
Powered by LMLPHP ©2024 ohsnap 0.026329