جستجو
زمانی که متن خود را وارد می نمایید در صورت وجود اطلاعات ، اطلاعات مورد نظر بصورت همزمان و بدون زدن هیچ دکمه ای نمایش داده می شود.
عضویت در خبرنامه
جهت لغو عضویت کلیک نمایید
شمارشگر شبکه های اجتماعی
پسندیده
0
فیسبوک
0
توییتر
0
گوگل پلاس
0
لینک ادین
11
نمودار بازدید از موضوع ها
نویسنده : admin تعداد بازدید : ۴۰۳ تاریخ : سه شنبه,۱۵ مهر ۱۳۹۳
پیغام هشدار از طریق صدا با استفاده از jQuery.
امتیاز دهید
تعداد رای 0 امتیاز 0

دراین مقاله می خواهیم چگونگی اطلاع رسانی در چت وب سایت ها با استفاده از صدا را توضیح دهیم. ما در یک برنامه ساده چت با استفاده از برچسب های صوتی jQuery و HTML5، آن را فقط در پنج خط کد آموزش می دهیم. استفاده از کتابخانه Modernizer برای پشتیبانی اینترنت اکسپلورر از HTML5 لازم می باشد.

کد جاوا اسکریپت

با استفاده از این دکمه ای که شناسه آن trig می باشد$("#trig").on("click",function(){} فراخوانی می نماییم.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){ 
$("#chatData").focus();
//Appending HTML5 Audio Tag in HTML Body
$("<audio id="chatAudio"><source src="notify.ogg" type="audio/ogg"><source src="notify.mp3" type="audio/mpeg"><source src="notify.wav" type="audio/wav"></audio>").appendTo("body");

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

کد HTML

<div id="chatBox">
<div id="chat">
<ul id="chatMessages">
//Old Messages
<li>
<img src="small.jpg"/><span>Hello Friends</span>
</li>
<li>
<img src="small.jpg"/><span>How are you?</span>
</li>

</ul>
</div>
<input type="text" id="chatData" placeholder="Message" />
<input type="button" value=" Send " id="trig" />
</div>

کد 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
}

دمو نهای هشدار صدا برای سیستم چت

comments powered by Disqus
تبلیغات
آخرین تصاویر
شهر تاریخی جیزد باغ شازده ماهان عمارت و باغ نشاط (سالار) تقی آباد غار پرده رستم کاروانسرای شاه عباس یونسی حلزون اسب در کوهستان بچه پنگوئن بچه میمون ديگو کاستا دنی آلوز میامی هیت پیرلو فرانچسکو توتی لیونل مسی طوطی دریا جاده زمستانی گورخر ... ... پل کلبه ببر
وضعیت آب و هوا
  • یزد
  • ارومیه
  • اصفهان
  • البرز
  • مشهد
  • شیراز
  • تبریز
  • تهران
  • زاهدان
  • اهواز
  • زنجان
  • رامسر
  • بابلسر
  • کرمانشاه
  • بندرعباس
  • کرمان
  • گرگان
  • یاسوج
  • همدان
  • آبادان
  • مکه
موضوعات مشابه
بزرگنمایی تصاویر با پلاگین جی کوئری

بزرگنمایی تصاویر با پلاگین جی کوئری

   تعداد بازدید: ۹۰۶
نمایش متن بصورت متن تایپ شده بوسیله جی کوئری و سی اس اس

نمایش متن بصورت متن تایپ شده بوسیله جی کوئری و سی اس اس

   تعداد بازدید: ۶۵۷
آشنایی با Modernizr و کاربرد آن در HTML5

آشنایی با Modernizr و کاربرد آن در HTML5

   تعداد بازدید: ۴۳۴
عناصر جدید HTML5

عناصر جدید HTML5

   تعداد بازدید: ۵۱۰
عناصر معنایی در HTML5

عناصر معنایی در HTML5

   تعداد بازدید: ۵۳۲