无法在bootstrap-notify插件上使用HTML内容

时间:2014-02-04 02:42:33

标签: javascript twitter-bootstrap

我正在尝试使用bootstrap-notify插件来显示通知。它可以在Bootstap-Notify找到。但是我无法按照指定的方式使用html选项。如果我在通知上打开HTML选项,则没有任何消息。我很感激任何帮助。谢谢

这是显示消息的功能(在指定的时间,它工作正常,但只是文本)

    function notifyMessage(position, messageIn, dd,mm,yyyy,hh,mn)
{
    //add the timestamp to the message
//        var message1 = '<html>Scheduled - '+dd+'/'+mm+'/'+yyyy+' '+hh+':'+mn+'<br>'+ message + '</html>';
    var message1 = '<html>Scheduled - '+ messageIn + '</html>';
    alert (message1.html());
    //hardcoded blackgloss type, this can be made a parameter if required
    var type = 'blackgloss';
    var now = new Date();  
    var millisTillTime = new Date(yyyy, mm-1, dd, hh, mn, 00, 0) - now; //ms till the specified time
    //set millisTillTime to 0 incase its value < 0 (to display expired undisplayed messages)
    if(millisTillTime < 0)
    {
        millisTillTime = 0;
    }
    setTimeout(function()
    {
            $('.' + position).notify({ message: { text: message1}, type: type, fadeOut: {enabled: false}}).show();
    }, millisTillTime);
}

现在,如果我将行message: { text: message1}更改为message: { html: true, text: message1},则该消息将变为空白。

我的主页在这里  

<!-- Le styles -->
<link href="css/prettify.css" rel="stylesheet">
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">

<!-- Notify CSS -->
<link href="css/bootstrap-notify.css" rel="stylesheet">

<!-- Custom Styles -->
<link href="css/styles/alert-bangtidy.css" rel="stylesheet">
<link href="css/styles/alert-blackgloss.css" rel="stylesheet">

</head>
<body>
<div class='notifications top-right'></div>
<div class='notifications bottom-right'></div>
<div class='notifications top-left'></div>
<div class='notifications bottom-left'></div>
<script src="../../javascripts/jquery-1.8.3.js"></script>
<script src="js/prettify.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-notify.js"></script>
<? include 'notify.php';?>
</body>

可以在Bootstap-Notify

找到实际的插件

1 个答案:

答案 0 :(得分:1)

这里有效:http://jsfiddle.net/HSQE7/

我将html属性设置为message1

<div class="test"></div>
function notifyMessage(position, messageIn, dd,mm,yyyy,hh,mn) {
  //add the timestamp to the message
  var message1 = '<strong style="color: blue">'
      + 'Scheduled - '
      + messageIn
      + '</strong>';
  //hardcoded blackgloss type, this can be made a parameter if required
  var type = 'blackgloss';
  var now = new Date();  
  var millisTillTime = new Date(yyyy, mm-1, dd, hh, mn, 00, 0) - now; //ms till the specified time
  //set millisTillTime to 0 incase its value < 0 (to display expired undisplayed messages)
  if(millisTillTime < 0) millisTillTime = 0;
  setTimeout(function(){
    $('.' + position).notify({ message: { html: message1}, type: type, fadeOut: {enabled: false}}).show();
  }, millisTillTime);
}

notifyMessage('test', 'hello', 3, 2, 2014, 11, 53);