DataLife Engine > Версия для печати > Создаем звуковое оповещение при помощи jQuery

22.09.2013
Datalife Engine

Нас часто спрашивают о том, чтобы мы опубликовали руководство, посвященное тому, как создать звуковое оповещение на сайте? Мы постарались воссоздать этот трюк в небольшом приложении веб-чата при помощи Jquery и HTML5 audio, и нам потребовалось все 5 строк кода. Также нужно воспользоваться библиотекой Modernizer для HTML5-поддержки в Internet Explorer. Приглашаем вас посмотреть, что из этого получилось.

javascript

В javascript-коде во фрагменте $(«#trig»).on(«click»,function(){}- trig – это имя ID кнопки ввода. Используя $(«#chatData»).attr(«id») мы получаем значение введенного текста.



$(function(){ 
$("#chatData").focus();
//Appending HTML5 Audio Tag in HTML Body
$('').appendTo('body');

$("#trig").on("click",function(){
var a = $("#chatData").val().trim();
if(a.length > 0)
{
$("#chatData").val(''); 
$("#chatData").focus();
$("
").html(''+a+'').appendTo("#chatMessages");
// Scrolling Adjustment 
$("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");
$('#chatAudio')[0].play();
}
});
});

HTML-код

Простой HTML-код.
    //Old Messages

  • Hello Friends
  • How are you?

CSS-код

* { padding:0px; margin:0px; }
body{font-family:arial;font-size:13px}
#chatBox
{
width:400px;
border:1px solid #000;
margin:5px;
}
#chat 
{
max-height:220px;
overflow-y:auto;
max-width:400px;
}
#chat > ul > li
{
padding:3px;
clear:both;
padding:4px;
margin:10px 0px 5px 0px;
overflow:auto
}
#chatMessages
{
list-style:none
}
#chatMessages > li > img
{ width:35px;float:left
}
#chatMessages > li > span
{
width:300px;
float:left;
margin-left:5px
}
#chatData 
{
padding:5px;
margin:5px;
border-radius:5px;
border:1px solid #999;
width:300px
}
#trig 
{
padding: 4px;
border: solid 1px #333;
background-color: #133783;
color:#fff;
font-weight:bold
}
Метки: