如何使用jquery将气球弹出窗口绑定到图像？ [英] how to bind a balloon popup to image using jquery?
本文介绍了如何使用jquery将气球弹出窗口绑定到图像？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的代码是js文件中的
：
my code is
in js file:
function debug(msg) { if (annoy) { annoy = confirm(msg); }; }
/* --- DOCUMEN READY --- */
$(document).ready(function () {
mustCheck = true;
$("." + classprefix + "Cancel").click(function (event) {
mustCheck = false;
});
// HINTS: Add *title hints to form elements
for (var i = 0; i < document.forms.length; i++) {
var fe = document.forms[i].elements;
for (var j = 0; j < fe.length; j++) {
if ((fe[j]).title.indexOf("**") == 0) {
if ((fe[j]).value == "" || (fe[j]).value == titleHint) {
var titleHint = (fe[j]).title.substring(2);
(fe[j]).value = titleHint;
}
} else if (((fe[j]).type == "text" || (fe[j]).type == "password" || (fe[j]).tagName == 'TEXTAREA') && (fe[j]).title.indexOf("*") == 0) {
addHint((fe[j]));
$(fe[j]).blur(function (event) { addHint(this); });
$(fe[j]).focus(function (event) { removeHint(this); });
}
}
}
// VALIDATION:
$("FORM").submit(function (event) {
if (mustCheck) {
// Prevent submit if validation fails
if (!checkForm(this)) {
event.preventDefault();
};
} else {
mustCheck = !mustCheck;
}
});
}); // end jQuery $(document).ready
/* --- FUNCTIONS --- */
function addHint(field) {
var titleHint = field.title.substring(1);
if (field.value == "" || field.value == titleHint) {
//in "password" inputs, set to "text" to show hint, preserve type in class attribute
if (field.type == "password") {
$(field).addClass("password");
var newObject = changeInputType(field, "text")//returns false for non-ie
if (document.all) { // if IE
field = newObject;
}
} //end type == "password"
$(field).addClass("hint");
field.value = titleHint;
} //end value==""
} //end addHint
function removeHint(field) { //only on INPUT.text items
/*if( field.type == "text" && field.title.indexOf("*")==0 ) {*/
var titleHint = field.title.substring(1);
if (field.value == "" || field.value == titleHint) {
$(field).removeClass('hint');
field.value = "";
//re-set password type if appropiate
if ($(field).hasClass("password")) {
var newObject = changeInputType(field, "password"); //returns false for non-ie
if (newObject) { ///IE, element was replaced: reset focus
$(newObject).focus();
$(newObject).select();
}
} //end hasClass("password")
} //end value == titleHint
//}//end what.title
} //end rmhint
function changeInputType(oldObject, oType) {
//based on http://arjansnaterse.nl/changing-type-attribute-in-ie
//used to simulate change of INPUT type in IE
if (!document.all) {
oldObject.type = oType;
return false;
} else {
//ie can't change INPUT's type, must create new element
/*
newObject = $(oldObject).clone(true);
//newObject.type = oType;
$(newObject).attr('type');
$(newObject).insertBefore(oldObject);
debug(newObject);
return newObject;
*/
var newObject = document.createElement('input');
newObject.type = oType;
if (oldObject.size) newObject.size = oldObject.size;
if (oldObject.title) newObject.title = oldObject.title;
if (oldObject.value) newObject.value = oldObject.value;
if (oldObject.name) newObject.name = oldObject.name;
if (oldObject.id) newObject.id = oldObject.id;
if (oldObject.className) newObject.className = oldObject.className;
oldObject.parentNode.replaceChild(newObject, oldObject);
//live()
//newObject.blur = oldObject.blur;
//newObject.focus = oldObject.focus;
//$(newObject).blur(function(event){ addHint(this); });
//$(newObject).focus(function(event){ removeHint(this); });
return newObject;
} //end document.all
}
function checkForm(form) {
var send = true;
var password = '';
radioGroups = Array();
$(form).removeClass("haserrors");
//inputs = $(form).find('INPUT[class*="' + classprefix + '"]');
inputs = $(form).find('INPUT[class*="' + classprefix + '"], .required INPUT, .required TEXTAREA, .required SELECT');
$.each(inputs, function (i, val) {
input = $(val);
if (input.attr('offsetWidth') != 0) {
switch (input.attr('type')) {
case 'select-one':
if (input.get(0)[input.attr('selectedIndex')].value == '') {
if (send) moveTo(input);
showErrorOn(input);
send = false;
}
break;
case 'select-multiple':
if (input.get(0)[input.attr('selectedIndex')].value == '') {
if (send) moveTo(input);
showErrorOn(input);
send = false;
}
break;
case 'radio':
if (window.radioGroups[input.attr('name')] === undefined) radioGroups[input.attr('name')] = new Array();
radioGroups[input.attr('name')][radioGroups[input.attr('name')].length] = input;
break;
case 'checkbox':
if (!input.attr('checked')) {
if (send) moveTo(input);
showErrorOn(input);
send = false;
}
break;
case 'file':
if (!isFilled(input)) {
if (send) moveTo(input);
showErrorOn(input);
send = false;
}
break;
case 'password':
if (input.hasClass(classprefix + 'PasswordConfirm')) {
if (input.val() != password) {
if (send) moveTo(input);
showErrorOn(input);
send = false;
}
break;
} else {
password = input.val();
}
case 'textarea':
case 'text':
if ((isFilled(input) || isRequired(input)) && (!isValid(input))) {
if (send) moveTo(input);
showErrorOn(input);
send = false;
}
break;
default:
break;
}
}
});
for (var i in radioGroups) {
for (var j in radioGroups[i]) {
if (radioGroups[i][j].attr('checked')) {
break;
}
}
if (!radioGroups[i][j].attr('checked')) {
for (var j in radioGroups[i]) {
if (send) moveTo(radioGroups[i][j]);
showErrorOn(radioGroups[i][j]);
}
send = false;
}
}
return send;
}
function isRequired(input) {
return input.parents(".required").length != 0;
}
function isFilled(input) {
hintText = '';
//clear HINTs before validation
if (input.attr('title').indexOf("**") == 0) {
var hintText = input.attr('title').substring(2);
} else if (input.attr('title').indexOf("*") == 0) {
var hintText = input.attr('title').substring(1);
} //end clear hints
return input.val() != hintText && input.val() != '';
}
function isValid(input) {
if (!isFilled(input)) return false;
string = input.attr('class');
value = input.val();
start = string.indexOf(classprefix);
type = '';
result = true;
while (result) {
if (
start == -1 ||
string.charAt((start + classprefix.length)) == ' ' ||
string.charAt((start + classprefix.length)) != string.charAt((start + classprefix.length)).toUpperCase()
) {
break;
} else {
for (i = start; i < string.length; i++) {
if (string.charAt(i) == ' ') {
break;
}
type += string.charAt(i);
}
if (!isTypeValid(type, value)) {
result = false;
break;
}
start = string.indexOf(classprefix, start + 1);
}
}
return result;
}
function isTypeValid(type, value) {
if (type == classprefix + 'Text') {
return true;
}
if (type == classprefix + 'Integer') {
return ((value.match(/^[\d|,|\.|\s]*$/)) && (value != ''));
}
if (type == classprefix + 'Url') {
return (value.match(/^(https?:\/\/)?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?(([0-9]{1,3}\.){3}[0-9]{1,3}|([0-9a-z_!~*'()-]+\.)*([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\.[a-z]{2,6})(:[0-9]{1,4})?((\/?)|(\/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+\/?)$/));
}
if (type == classprefix + 'MultipleWords') {
return value.match(/^.*[^^]\s[^$].*$/);
}
if (type == classprefix + 'Mail') {
if (value.indexOf("@example.com") > -1) { return false; };
//var emailFilter=/^.+@.+\..{2,}$/;
var emailFilter = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/;
var illegalChars = /[\(\)\<\>\,\;\:\\\/\"\[\]]/
if (!(emailFilter.test(value)) || value.match(illegalChars)) { return (false); } else { return (true); }
return false;
}
if (typeof isTypeValidExt == 'function') {
fr = isTypeValidExt(classprefix, type, value);
if (isTypeValidExt(classprefix, type, value) === null) {
return false;
} else {
return true;
}
}
return true;
}
function moveTo(input) {
var targetOffset = input.offset().top - 40;
$('html,body').animate({ scrollTop: targetOffset }, 200);
input.get(0).focus();
}
//function fn(){
//$("#imgerr").balloon( {classname: "balloonTip"}).toggle(
// function rmErrorClass(elm) { $(this).hideBalloon(); },
// function showErrorOn(input){ $(this).showBalloon(); }
//};
function showErrorOn(input) {
/* BUG FIXED FOR IE: when submited it auto focuses to the first required field, so the hint and red box aren't there. Might be confusing to a user!
input.bind('focus.rmErrorClass', function(){
rmErrorClass( this );
});
*/
input.bind('mousedown.rmErrorClass', function () {
rmErrorClass(this);
});
input.bind('keydown.rmErrorClass', function () {
rmErrorClass(this);
});
input.addClass("error");
input.parents(".required, .field").addClass("error");
}
function rmErrorClass(elm) {
var etag = $(elm).parents(".error");
var eform = $(elm).parents('FORM');
$(elm).removeClass("error");
$(elm).unbind('.rmErrorClass'); //no further clicks will trigger rmErrorClass();
if (etag) { $(etag).removeClass("error"); };
}
in aspx页面：
in aspx page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Demo - JQuery Form Validation And Hints Demo</title>
<!-- DEMO PAGE STYLES -->
<link href="css/pagestyle.css" rel="stylesheet" type="text/css" />
<link href="css/Serror.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/JScript.js" type="text/javascript"></script>
<%--<script src="http://www.icograma.com/cms/wp-content/themes/icograma/rsrc/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="http://www.icograma.com/cms/wp-content/themes/icograma/rsrc/js/jquery.form-validation-and-hints.js" type="text/javascript"></script>--%>
</head>
<body>
<div id="main">
<div id="mainbody">
<div class="mbody">
<form>
<h3>Sample Form</h3>
<div class="field required">
<p><label>Required field</label></p>
<input class="text verifyText" type="text" />
<span class="iferror">Field required</span>
</p>
</p></div>
<p><!--/field--></p>
<div class="field required">
<p><label>Password field with hint</label></p>
<input class="text" type="password" title="*Password hint..." />
<span class="iferror"><img id="errimg" src="imgs/Chrysanthemum.jpg" alt="errorimg" width="30px" /></span>
</p>
</p></div>
<p><!--/field--></p>
<div class="field">
<p><label>Optional field</label></p>
<input class="text" type="text" />
</p>
</p></div>
<p><!--/field--></p>
<div class="field required">
<p><label>Integer</label></p>
<input class="text verifyInteger" type="text" size="8" />
<span class="iferror">This value must be an integer</span>
</p>
</p></div>
<p><!--/field--></p>
<div class="field required">
<p><label>Email</label></p>
<input class="text verifyMail" type="text" size="24" title="*mail(a)example.com" />
<span class="iferror">Field email</span>
</p>
</p></div>
<p><!--/field--></p>
<div class="field">
<p>Textarea <br />
<textarea rows="10" cols="50" title="*Write your message here..."></textarea>
</p>
</p></div>
<p><!--/field--></p>
<div class="field required">
<p><input class="checkbox" type="checkbox" name="terms" /> I agree with the terms and conditions<br />
<span class="iferror">You must agree with the terms and conditions to continue</span>
</p>
</p></div>
<p><!--/field--></p>
<div class="field required">
<p><input class="radio" type="radio" name="sex" value="male" /> Male </p>
<input class="radio" type="radio" name="sex" value="female" /> Female <br />
<span class="iferror">You must select an option</span>
</p>
</p></div>
<p><!--/field--></p>
<div class="field required">
<p><label>Select</label></p>
<select>
<option value="">Select an option…</option><br />
<option value="1">Option 1</option><br />
<option value="1">Option 2</option><br />
</select>
<p> <span class="iferror">Please, select an option</span>
</p>
</p></div>
<p><!--/field--></p>
<div class="field required">
<p><label>File field</label></p>
<input class="file" type="file" />
<span class="iferror">Field required</span>
</p>
</p></div>
<p><!--/field--></p>
<input class="submit" type="submit" value="Send" />
</p></form>
</div><!-- /mbody -->
</div><!-- /mainbody -->
</div><!-- /main -->
</body>
</html>
where i have to write the code for balloon popup to display the message?
where i have to write the code for balloon popup to display the message?
推荐答案
(document).ready(function () {
mustCheck = true;
(document).ready(function () { mustCheck = true;
(\".\" + classprefix + \"Cancel\").click(function (event) {
mustCheck = false;
}）;
// HINTS: Add *title hints to form elements
for (var i = 0; i < document.forms.length; i++) {
var fe = document.forms[i].elements;
for (var j = 0; j < fe.length; j++) {
if ((fe[j]).title.indexOf(\"**\") == 0) {
if ((fe[j]).value == \"\" || (fe[j]).value == titleHint) {
var titleHint = (fe[j]).title.substring(2);
(fe[j]).value = titleHint;
}
} else if (((fe[j]).type == \"text\" || (fe[j]).type == \"password\" || (fe[j]).tagName == 'TEXTAREA') && (fe[j]).title.indexOf(\"*\") == 0) {
addHint((fe[j]));
("." + classprefix + "Cancel").click(function (event) { mustCheck = false; }); // HINTS: Add *title hints to form elements for (var i = 0; i < document.forms.length; i++) { var fe = document.forms[i].elements; for (var j = 0; j < fe.length; j++) { if ((fe[j]).title.indexOf("**") == 0) { if ((fe[j]).value == "" || (fe[j]).value == titleHint) { var titleHint = (fe[j]).title.substring(2); (fe[j]).value = titleHint; } } else if (((fe[j]).type == "text" || (fe[j]).type == "password" || (fe[j]).tagName == 'TEXTAREA') && (fe[j]).title.indexOf("*") == 0) { addHint((fe[j]));
(fe[j]).blur(function (event) { addHint(this); });
(fe[j]).blur(function (event) { addHint(this); });
这篇关于如何使用jquery将气球弹出窗口绑定到图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
