<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)
}
})
})