どんな助けでも大歓迎です。
アコーディオンのように動作する「引き出し」でいっぱいのページがあります。さまざまな理由で Jquery UI アコーディオンを使用できませんでした。代わりに、動的ドライブから Animated Collapse 2.4 を使用しています。各ドロワー div には、固有のフォームが含まれています。これらのフォームでは、Jquery Validator と tooltipster を使用して検証エラーを表示しています。
私が抱えている問題は、検証が成功する前にドローが閉じられたときに、ツールチップスターが完全に消えず、フォームがあった場所にぶら下がっていて、ページをスクロールしたり移動したりすると、ページの左上にジャンプすることです画面半分表示！そのため、彼らは隠れていますが、完全には隠れていません。上下に数十ピクセルだけ配置する必要があるかのようです。
フォームを含む複数の div ドロワーがあるため、ある特定のドローのフォームを完成させて他のデータを参照するときに、別のドロワーに切り替える必要がある場合があります。そのため、ユーザーが各フォームを完全に入力せずに引き出しを閉じて、後で戻ってくることができるようにする必要がある場合があります。
アイデアはありますか？
animationcollapse.js 用の Dynamic Drive の js スクリプトを含める必要があります - Linkで入手可能
また、リンクでダウンロードできる jquery.tooltipster.js および css ファイルを含める必要があります。
HTML:
<head>
<script src="js/animatedcollapse.js" type="text/javascript" ></script>
<script src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.tooltipster.js"></script>
</head>
<body>
<p><b>Example 1 (individual):</b>
</p>
<a href="javascript:animatedcollapse.toggle('cust')"></a> <a href="javascript:animatedcollapse.show('cust')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('cust')">Slide Up</a>
<div id="cust" style="width: 800px; background: #FFFFCC; display:none">
<form id="custForm" name="custForm" method="post">
<h4>Enter your customer details</h4>
<p>Title:
<BR />
<select name="titleBox" id="titleBox">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Mis">Ms</option>
<option value="Dr">Dr</option>
<option value="Dr">Sir</option>
</select>
</p>Firstname:
<BR>
<input name="firstnameBox" type="text" id="firstnameBox" size="40" onkeyup="" onblur="" minlength="1" required />
<BR />Surname:
<BR>
<input name="surnameBox" type="text" id="surnameBox" size="40" onkeyup="" minlength="2" required />
<BR />Home tel:
<BR />
<input name="hometelBox" type="text" class="phoneUK" id="hometelBox" size="40" onkeyup="" required />
<BR />Mobile:
<BR />
<input name="mobileBox" type="text" id="mobileBox" size="40" minlength="7" onkeyup="" required/>
<BR />Work tel:
<BR />
<input name="worktelBox" type="text" id="worktelBox" size="40" minlength="7" onkeyup="" required/>
<BR />Email:
<BR />
<input name="emailBox" type="text" class="EMAIL" id="emailBox" size="40" />
<BR />
<BR />
<BR />
<strong><em>Address Manual Entry</em></strong>
<BR/>
<BR />House Name/Flat number:
<BR />
<input name="man_housenmBox" onkeyup="" type="text" id="man_housenmBox" size="40" />
<BR />House Number:
<BR />
<input name="man_housenoBox" onkeyup="" type="text" id="man_housenoBox" size="40" />
<BR />Street Name 1:
<BR />
<input name="man_street1Box" onkeyup="" type="text" id="man_street1Box" size="40" minlength="4" required/>
<BR />Street Name 2:
<BR />
<input name="man_street2Box" onkeyup="" size="40" />
<BR />Town/City:
<BR />
<input name="man_townBox" type="text" id="man_townBox" size="40" minlength="4" />
<BR />County:
<BR />
<input name="man_countyBox" onkeyup="" type="text" id="man_countyBox" size="40" minlength="4" />
<BR />Postal Code:
<BR />
<input name="man_postcodeBox" class="postcodeUK" type="text" id="man_postcodeBox" minlength="4" />
<BR />
<BR />
<P align="center">
<button id="sub" value="Trigger validation" type="submit"><span class="ui-button-text">Trigger Valdation</span>
</button>
</P>
</form>
</div>
</body>
そしてJS：
animatedcollapse.addDiv('cust');
animatedcollapse.ontoggle = function ($, divobj, state) {};
animatedcollapse.init();
$(document).ready(function () {
// initialize tooltipster on text input elements
$('#custForm input[type="text"]').tooltipster({
theme: 'tooltipster-shadow',
positionTracker: 'true',
trigger: 'custom',
onlyOne: false,
position: 'right',
animation: 'fall',
positionTrackerCallback: function(){
this.hide();}
});
});
jQuery.validator.messages.required = "";
$.validator.addMethod("EMAIL", function (value, element) {
return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,6}$/i.test(value);
}, "Email Address is invalid: Please enter a valid email address.");
jQuery.validator.addMethod('phoneUK', function (phone_number, element) {
return this.optional(element) || phone_number.length > 9 &&
//phone_number.match(/^(((\+44)? ?(\(0\))? ?)|(0))( ?[0-9\s]{3,4}){3}$/);
phone_number.match(/^\(?(?:(?:0(?:0|11)\)?[\s-]?\(?|\+)44\)?[\s-]?\(?(?:0\)?[\s-]?\(?)?|0)(?:\d{2}\)?[\s-]?\d{4}[\s-]?\d{4}|\d{3}\)?[\s-]?\d{3}[\s-]?\d{3,4}|\d{4}\)?[\s-]?(?:\d{5}|\d{3}[\s-]?\d{3})|\d{5}\)?[\s-]?\d{4,5}|8(?:00[\s-]?11[\s-]?11|45[\s-]?46[\s-]?4\d))(?:(?:[\s-]?(?:x|ext\.?\s?|\#)\d+)?)$/);
}, 'Please specify a valid UK phone number');
jQuery.validator.addMethod("postcodeUK", function (value, element) {
return this.optional(element) || /[A-Z]{1,2}[0-9R][0-9A-Z]? [0-9][ABD-HJLNP-UW-Z]{2}/i.test(value);
}, "Please specify a valid UK Postcode - with a space between the first and second parts - e.g. RG1 2BT");
var validator = $("#custForm").validate({
messages: {
firstnameBox: "Please enter a first name or initial (min 1 character).",
surnameBox: "Please enter a last name (min 2 characters).",
hometelBox: "Please enter the end user's home UK landline number (must be a valid UK number).",
worktelBox: "Please enter a work telephone number.",
mobileBox: "Please enter a mobile phone number.",
emailBox: "Please enter a valid email address.",
man_street1Box: "Please enter a street name",
man_townBox: "Please enter a Town.",
man_countyBox: "Please enter a County.",
man_postcodeBox: "Please enter a valid UK postal code, with a space between the first and second parts - e.g. RG1 2BT."
},
rules: {
hometelBox: {
required: true
},
emailBox: {
required: false,
email: true
}
},
errorPlacement: function (error, element) {
var lastError = $(element).data('lastError'),
newError = $(error).text();
$(element).data('lastError', newError);
$(element).tooltipster('show');
if (newError !== '' && newError !== lastError) {
$(element).tooltipster('content', newError);
$(element).tooltipster('show');
}
},
success: function (label, element) {
$(element).tooltipster('hide');
},
submitHandler: function (form) {
// do other things for a valid form
}
});