如何获取标题并发布到通知?..通知的标题取自表单并弹出通知。因此,当用户单击提交按钮时,将提取持续时间和标题,并且通知幻灯片存在直到指定的持续时间。我已经发布了代码...如果可能请纠正它。如果你有一个b8r替代plzz发布它。
$(document).ready(function() {
$("#form").validate({
rules: {
time: {
required: true,
number: true
},
title: "required"
},
messages: {
time: "Please enter time(digit) in Seconds",
title: "Please enter the title"
}
});
$("#notify").hide();
$("#form").submit(function(e) {
if($('#form').valid()) {
$("#notify").slideDown();
var timeOut = parseInt($("#time").val())*1000 ;
var str = parseInt($("#title").val());
setTimeout(function() {
$("#notify").slideUp();
}, timeOut, str);
}
return false;
});
});

#notify
{
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 50px;
background: #00FF00;
opacity: 0.8;
display: none;
}
#message
{
width: 100%;
text-align: center;
padding-top: 15px;
}
#form .formelement
{
display: inline-block;
padding: 10px 10px;
width: 900px;
}
#form .formelement label{
float: left;
text-align: left;
width: 110px;
}
#form .submit {
padding: 10px;
width: 220px;
height: 40px;
}
#form .formelement label.error {
color: red;
display: inline-block;
margin: 4px 0 10px 100px;
padding: 0;
text-align: left;
width: 900px;
}

<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="valid.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<div id="notify">
<div id="message"></div>
</div>
<fieldset>
<form action="" id="form" >
<div class="formelement">
<label for="time">Time(in Sec) : </label>
<input type="text" name="time" id="time"/>
</div>
<div class="formelement">
<label for="title">Title : </label>
<input type="text" name="title" id="title"/>
</div>
<div class="formelement">
<input type="submit" value="Show Success" class="submit" id="s"/>
</div>
</form>
</fieldset>
</html>
&#13;
答案 0 :(得分:1)
你有几个问题。首先,你在最后一行javascript中缺少一个右括号。
其次,你要两次包括jquery.min.js。由于validate.js附加到第一个,第二个将无法访问该插件。删除最后一次加载jquery。
$(document).ready(function() {
$("#form").validate({
rules: {
time: "required",
},
messages: {
time: "Please enter Time in Miliseconds",
}
});
$("#notify").hide();
$("#form").submit(function(e) {
$("#notify").slideDown();
var timeOut = parseInt($("#time").val());
setTimeout(function() {
$("#notify").slideUp();
}, timeOut);
return false;
});
});
#notify
{
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 50px;
background: #FF0000;
opacity: 0.8;
display: none;
}
#message
{
width: 100%;
text-align: center;
padding-top: 15px;
}
#form .formelement
{
display: inline-block;
padding: 10px 10px;
width: 900px;
}
#form .formelement label{
float: left;
text-align: left;
width: 110px;
}
#form .submit {
padding: 10px;
width: 220px;
height: 40px;
}
#form .formelement label.error {
color: red;
display: inline-block;
margin: 4px 0 10px 100px;
padding: 0;
text-align: left;
width: 900px;
}
<body>
<div id="notify">
<div id="message">SUCCESSFULL</div>
</div>
<fieldset>
<form action="" id="form" method="post" >
<div class="formelement">
<label for="time">Time (in Ms): </label>
<input type="text" name="time" id="time"/>
</div>
<div class="formelement">
<input type="submit" value="Show Success" class="submit" />
</div>
</form>
</fieldset>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
</body>