怎样用angular js给按钮添加提示音

JavaScript012

怎样用angular js给按钮添加提示音,第1张

js代码如下:

<script type="text/javascript">

var app = angular.module("tip",[])

app.controller("bucTipController",function(){

})

.directive("bucButton",function(){

return {

restrict : 'E',

replace : true,

scope : {

myTitle : "@",

id : "@",

tipTitle : "@"

},

template : "<button class='bucSelectedButton bucSelected' ng-click='clicked()' ng-mouseover = 'mouseover()' ng-mouseout = 'mouseout()'>{{myTitle}}\

<div style='border:1px solid #dcdcdcborder-radius:6pxwidth:autoheight:20pxline-height:20pxposition:absolutetop:-40pxpadding:5pxwhite-space:nowrapbackground-color:#fafafadisplay:nonecolor:#000left:20px' class='tip'>{{tipTitle}}\

<span style='position:absolutetop:25pxleft:10pxbackground-color:#fafafaborder:1px solid #dcdcdcwidth:10pxheight:10pxtransform:rotate(45deg)border-left:noneborder-top:none'>\

</span>\

</div>\

</button>",

link : function(scope,elem,attrs) {

scope.mouseover = function(){

$(".tip").show()

}

scope.mouseout = function(){

$(".tip").hide()

}

scope.clicked = function(){

elem.toggleClass("bucSelectedHover")

$(".tip").hide()

}

}

}

})

</script>

1、加入语音提示

<audio id="sound" autoplay="autoplay">

动态加入播放语音文件代码:

document.getElementById("sound").src="<%=basePath%>admin/media/global.wav"

2、动态弹出消息提示框:

在此处我导入了jquery.gritter.js和jquery.gritter.css,具体实现代码:

jQuery(document).ready(function() {

setInterval(function(){

$.post('ajax/linecheck',function(data){

var json=eval("("+data+")")

$.each(json,function(index,item){

$("#line"+item.id).html("")

$.each(item.localList,function(index,item2){

if(item2.attendOCList!=""){

$("#line"+item.id).append("<li class='in' id='in"+item2.id+"'><div class='avatar'>"

+item2.location+"</div><div class='message'><ul id=li"+item2.id+"></ul></div></li>")

}

$.each(item2.attendOCList,function(index,item3){

if(item3.status==0){

$("#li"+item2.id).append("<li class='user'><span class='username'>"+item3.person_name

+"</span><br><span style='color:red' class='username'>时间: "

+ item3.today+" "+item3.times +"</span><br><span class='username'>电话:"

+item3.person_phone+"</span><br><span class='username'>身份证:"

+item3.card_id+"</span></li><hr>")

}else{

$("#li"+item2.id).append("<li class='user'><span class='username'>"

+item3.person_name+"</span><br><span style='color:red' class='username'>时间: "

+ item3.today+" "+item3.times +"</span><br><span class='username'>电话:"

+item3.person_phone+"</span><br><span class='username'>身份证:"

+item3.card_id+"</span></li><hr>")

document.getElementById("sound").src="<%=basePath%>admin/media/global.wav"

setTimeout(function () {

var unique_id = $.gritter.add({

title: item3.person_name+"("+item2.location+")",

text:"<span class='username'>"+item3.person_name

+"</span><br><span style='color:red' class='username'>时间: "

+ item3.today+" "+item3.times +"</span><br><span class='username'>电话:"

+item3.person_phone+"</span><br><span class='username'>身份证:"+item3.card_id+"</span>",

sticky: true,

time: '',

class_name: 'my-sticky-class'

})

setTimeout(function () {

$.gritter.remove(unique_id, {

fade: true,

speed: 'slow'

})

}, 12000)

}, 2000)

}

})

})