作者:林小琳LLL | 来源:互联网 | 2023-09-15 03:38
1.html代码为在input和select同级元素中添加.error的标签,用来存放报错信息2.定义css样式.form-group{position:relative;}.er
1.html 代码为 在input和select同级元素中添加 .error的标签,用来存放报错信息
2.定义css 样式 .form-group {position:relative;} .error的定义可参考
.error { position: absolute; top: 50px; left: 73px; color: #fff; background: #e00a0a; font-weight: bold; border: 0; border-radius: 5px; }
3.js部分
// 正则表达式
var reg1 = /^.{1,}$/; //名称满足条件
// alert(window.innerWidth+‘ssssssssss‘+window.innerHeight);
// alert(window.innerHeight);
// 设置音频信息
function SetAudio($id,name,sound,length,note,volume){
var tan = layer.open({
type:1,
title: ‘编辑声音‘,
area:[‘370px‘,‘450px‘],
offset: ‘50px‘,
anim: 1,
content: $("#sound-dialog"),
btn:[‘保存‘,‘播放‘,‘删除‘,‘取消‘],
btn1:function(index){
// 获取标签的值
var name = $(‘#name‘).val();
// var length = $(‘#length‘).val();
var sound = $(‘#sound‘).val();
var note = $(‘#note‘).val();
var volumeAmount = $("#volumeAmount").text( $( "#volumeSlider" ).slider( "value" )).text();
// 声音名称的正则
if(!reg1.test(name)){var SoundNameError=$("#SoundName-Error").text("请输入正确的名称");$("#SoundName-Error").css({"padding": "2px 6px 2px 6px"});ErrorName("name",SoundNameError);}
if(sound===null||sound===""||sound===undefined){var PlayVolumError=$("#PlayVolume-Error").text("请选择音频");$("#PlayVolume-Error").css({"padding": "2px 6px 2px 6px"});ErrorVolume("sound",PlayVolumError);return;
}
if(!SoundNameError){
$.ajax({
"url": "{:U(‘Sound/EditVolume‘)}",
"type": "post",
"data": {
"action": "EditSound",
"id":$id,
"name":name,
// "length":length,
"volumeSlider":volumeAmount,
"note":note,
"sound":sound
},
success:function(data){
layer.close(index);
layer.msg("修改成功!");
$("#navside").load("/Sound/index #navside");
},
error:function (data){
layer.msg("设置音频信息错误");
}
})
}
},
btn2:function(index){
// 音量
var play_slider_val = Number($("#volumeAmount").text($("#volumeSlider").slider("value")).text());
// 音频
var play_audio_frequency = $("#sound").val();
if(play_audio_frequency==null){
layer.msg("请选择音频");
}else{
// 获取音频
var audios= new ROSLIB.Message({
data:play_audio_frequency
});
volume_play.publish(audios);
//调试音量
var volumes= new ROSLIB.Message({
data:play_slider_val
});
volume_voice.publish(volumes);
console.log(play_slider_val);
console.log(play_audio_frequency);
}
return false;
},
btn3:function(index){
$.ajax({
"url": "{:U(‘Sound/EditVolume‘)}",
"type": "post",
"data": {
"action": "DeleteSound",
"id":$id
},
success:function(data){
layer.close(index);
layer.msg("删除成功!");
$("#navside").load("/Sound/index #navside");
},
error:function (data){
layer.msg("删除音频有误!");
}
})
// return false;
},
end:function(){
// layer.msg("已取消");
}
});
if($id!==undefined){
// $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
LabelElement($id,name,sound,note,length,volume);
}else{
LabelElement();
$(".layui-layer-btn2").hide();
}
}
// slider滑动获取音量的大小
$( "#volumeSlider" ).slider({
min: 0,
max: 100,
value: 100,
slide: function( event, ui ) {
$( "#volumeAmount" ).text( ui.value );
$( "#sound-volume" ).val( ui.value );
var slider_display=$( "#volumeAmount" ).text();
var slider_input= $("#VolumeValue").val(slider_display);
var slider_val=Number(slider_input.val());//音量
var audio_frequency = $("#sound").val();//声音
if(audio_frequency==null){
layer.msg("请选择音频");
}else{
// 音频
var number= new ROSLIB.Message({
data:audio_frequency
});
volume_play.publish(number);
//音量
var number1= new ROSLIB.Message({
data:slider_val
});
volume_voice.publish(number1);
console.log(audio_frequency);
console.log(slider_val);
}
}
});
// 获取元素的值
function LabelElement(id,name,sound,note,length,volume){
if(id===undefined&&name===undefined&&sound===undefined&&volume===undefined){
id="";name="";sound="";note="";length="";volume=100;
}
$("#name").val(name);
$("#sound").val(sound);
$("#sound").prop(‘required‘,false);
$("#note").val(note);
// // $(‘#sound-dialog‘).find(‘#length‘).val(length);
$("#volumeSlider").slider(‘value‘,volume);
$("#volumeAmount").text( $( "#volumeSlider" ).slider( "value" )).text();
//
}
// 隐藏错误触发方式
function ErrorName(value,error){
var ErrTxt=error.text();//获取错误信息
// 按下触发事件
$("#"+value).keyup(function(){
var ValueText=$("#"+value).val();//随时监测input输入的值
ErrorMode(value,ValueText,error,ErrTxt);
});
}
// 隐藏错误触发方式
function ErrorVolume(value,error){
var ErrTxt=error.text();//获取错误信息
// 点击触发事件
$("#"+value).click(function(){
var ValueText=$("#"+value).val();//随时监测input输入的值
ErrorMode(value,ValueText,error,ErrTxt);
});
}
// 错误信息处理
function ErrorMode(value,texts,error,errtxt){
if(texts!==""&&texts!==null&&texts!==undefined){
error.text("");//清除错误信息
$("#"+value).siblings(".error").css({"padding":"0px"});
}else{
// 添加错误信息
$("#"+value).siblings(".error").text(errtxt);
$("#"+value).siblings(".error").css({"padding":"2px 6px 2px 6px"});
}
}
效果预览 链接: https://pan.baidu.com/s/1FkZ1DlqG_E_GFLw06HXtkQ 密码: irdi