خب شما دوست عزیز اول این فایل جدید رو دانلود بفرما بعد ادامه رو بخون تا کامل بفهمی چی به چیه.
خب اول اینکه HTML اون قسمت مورد نیاز ما اینجوریه:
<form>
<input id="input-1" type="text" class="double-click"><br />
<input id="input-2" type="text" class="double-click"><br />
<input id="input-3" type="text" class="double-click"><br />
<input id="input-4" type="text" class="double-click"><br />
</form>
<div id="hidden-box-input-1" class="hidden-box">
<span class="close">X</span>
<ul>
<li>Value 1</li>
<li>Value 2</li>
<li>Value 3</li>
<li>Value 4</li>
</ul>
</div>
<div id="hidden-box-input-2" class="hidden-box">
<span class="close">X</span>
<ul>
<li>Value 1</li>
<li>Value 2</li>
<li>Value 3</li>
<li>Value 4</li>
</ul>
</div>
<div id="hidden-box-input-3" class="hidden-box">
<span class="close">X</span>
<ul>
<li>Value 1</li>
<li>Value 2</li>
<li>Value 3</li>
<li>Value 4</li>
</ul>
</div>
<div id="hidden-box-input-4" class="hidden-box">
<span class="close">X</span>
<ul>
<li>Value 1</li>
<li>Value 2</li>
<li>Value 3</li>
<li>Value 4</li>
</ul>
</div>
بخش اول که iput های ما هستن. هر کدوم دارای کلاس double-click هستن و idای که یک آخر هر آیدی شماره ای قرار داره. اون شماره می تونه هر چیزی باشه. ولی بهتره از بالا به پایین اضافه بشه.
بخش دوم div هایی هستن که می خواییم نشونشون بدیم با هر دابل کلیک. این دایو ها هم یه کلاس یکسان hidden-box دارن و یک id ای که می بایست شماره آخرشون با اون input ای که می خوای جلوش نمایش داده بشن باید یکسان باشه. فقط چیزی که درباره این دایو ها مهم هست این خصوصیات توی CSS اشون هست:
.hidden-box {
width: 100px;
display: none;
position: absolute;
}
اولی که طولش هست که می تونی برای اینکه از fix بودن در بیاد اون رو به min-width تغییر بدی. دومی هم برای این هست که در صفحه نمایش داده نشن. سومی هم برای این هست که بتونیم هرجای صفحه که خواستیم با دادن فاصله از بالاو چپ نشونشون بدیم. بدون اینکه روی دیگر عناصر تاثیر بزارن. فقط یه نکته که اونم این هست که با دادن یه z-index بالا مثلا 5555 می تونی کاری بکنی که همیشه بالاتر از دیگر المنت ها قرار بگیرن.
حال محتوای دایو ها دو بخش هست. یک span که برای بستن این دایو هست و دیگری هم یه لیست که برای هر متنی که بخوای انتخاب بشه باید توی این لیست جدا جدا قرارشون بدی.
این از HTML و CSS. حالا بریم سراغ بخش Javascriptاش.
نکته اول اینکه برای استفاده از فریم ورک Jquery باید اون رو فراخونی کنی. حالا کد کلی ما اینجوریه:
$(document).ready(function(){
$("input.double-click").dblclick(function() {
$(".hidden-box").hide();
var offset = $(this).offset();
var width = $(this).width();
var id = $(this).attr("id");
$("div#hidden-box-" + id).css({top : offset.top , left : offset.left + (width + 10)});
$("div#hidden-box-" + id).show(500);
});
$("div.hidden-box li").click(function() {
var value = $(this).text();
var id = $(this).parent().parent().attr("id");
id = id.replace("hidden-box-","");
$("input#" + id).attr("value",value);
});
$("span.close").click(function() {
$(this).parent().hide(100);
});
});
خط اول : $(document).ready(function(){
این میگه که بعد از اینکه صفحه ما کامل شد و آماده شد از اینها استفاده کن.
خط دوم: $("input.double-click").dblclick(function() {
این برای انجام اون چیزایی که ما می خوایم وقتی روی inputای که دارای کلاس double-click هست. یعنی وقتی روی اون input خاص دابل کلیک شد این کارهای زیرش رو انجام بده.
خط سوم: $(".hidden-box").hide();
این برای مخفی کردن تمام hidden-box ها هست. این برای موقعی هست که دایو مربوط به یه hidden-box وجود داره، روی یک input دیگه دابل کلیک می کنی تا دایو اون نمایش داده بشه. پس همه بسته می شن تا رو هم قرار نگیرن.
خط چهارم: var offset = $(this).offset();
این خط، فاصله inputای که روش دابل کلیک شده از بالا و چپ صفحه در متغییر offset قرار می ده.
خط پنجم: var width = $(this).width();
این بخش هم طول input رو در متغییر width قرار می ده.
خط ششم: var id = $(this).attr("id");
این خط، آیدی inputای که روش کلیک کردیم رو در متغییر آیدی قرار می ده. حالا بعد می گم که چه نیازی به این سه تا داریم.
خط هفتم: $("div#hidden-box-" + id).css({top : offset.top , left : offset.left + (width + 10)});
این بخش برای تعیین کردن موقعیت دایو ما هستش. اگه بالا رو نگاه کنی، id مربوط به Input با id دایو مربوط به اون یه بخش یکسان و یه بخش متفاوت داشتن. بخش ای که تو هردوتاشون یکسان هست دقیقا id اون input هست. بطور مثال، input اول دارای ای دی input-1 هست و دایو مربوط به اون دارای
hidden-box-input-1 هست. یعنی تفاوت این دوتا توی بخش اول یعنی hidden-box- هست. پس ما از همین ویژگی استفاده می کنیم و توی "div#hidden-box-" + id اون آیدی رو به اون ترم ثابت اضافه می کنیم تا دایو مورد نظر ما انتخاب بشه. بعدش هم داریم:
.css({top : offset.top , left : offset.left + (width + 10)})
که تو اینجا top مربوط به css دایو رو به همون اندازه ای که input موردنظرش فاصله از بالا داره قرار می دیم و مقدار فاصله از چپ رو به اندازه مقدار فاصله از چپ input بعلاوه طول input بعلاوه یه 10px که برای ایجاد فاصله بین دایو و input اضافه می شه. فقط یه نکته. این برای صفحات چپ به راست هست. اگر صفحه شما راست به چپ هست اون + قبل از (width + 10) رو به - تبدیل کن.
خط هشتم: $("div#hidden-box-" + id).show(500);
که می گه دایو مورد نظر رو در مدت زمان 500 میلی ثانیه نشون بده.
خط نهم که مربوط به بستن اون دابل کلیک خط دوم هست. حالا خط دهم: $("div.hidden-box li").click(function() {
این خط برای اون عناصر liای هست که در دایوم نمایش داده شده وجود دارن که وقتی روشون کلیک بشه مقدارشون رو به input متناظرش وارد کنه.
خط یازدهم: var value = $(this).text();
این که متن موجود در li رو در متغییر value قرار می ده. توجه کن که اگر داخل li لینک یا هرگونه تگ html باشه همشون وارد این می شن. پس فقط متن ساده.
خط دوازدهم: var id = $(this).parent().parent().attr("id");
این جا هم برای پیدا کردن آیدی دایوی هست که این li داخلش وجود داره. parent که می بینی توشه برای پیدا کردن والد این li هست. اولین دستور parent تگ ul بالاییش رو انتخاب می کنه. دومین parent، والد ul که همون دایو ما هست رو انتخاب می کنه. بعد مقدار attribute id دایو رو در متغییر id قرار می ده.
خط سیزدهم: id = id.replace("hidden-box-","");
این خط برای حذف کردن اون ترم ثابت یعنی
hidden-box- از ماغییر id ما هست و قرار دادن دوباره اون توی خودش.
خط چهاردهم: $("input#" + id).attr("value",value);
این خط هم مقدار Valueای که توی متغییر value هست رو داخل input متناظرش قرار می ده. با استفاده از id
خط پانزدهم که بستن اونبخش کلیک بر روی liها هست. خط شانزدهم: $("span.close").click(function() {
اینم که برای انتخاب اون علامت ضربدر ما هست برای بستن دایو.
خط هفدهم: $(this).parent().hide(100);
والد این span که دایو ما هست رو انتخاب می کنه و توی 100 میلی ثانیه می بندتش.
خط هیجدهم که مربوط به بخش ضربدر برای بستن هست که اون رو می بنده و خط نوزدهم که برای بستن اون بخش که قرار دادم توی خط اول که وقتی صفحه لود شد اون کارها رو انجام بده.
اینم یه توضیح کامل کامل. اگه بازم مشکلی بود بفرما. اینجوری شما از یک تا 100 میلیون input هم داشته باشی می تونی به راحتی و با قرار دادن یه input با شماره و به دایو با همون شماره و اضافه کردن hidden-box- به اول آیدی input متناظرش هرکاری خواستی بکنی. اگه باز مشکلی بود در خدمتم