لیست های کشویی |
خلاصه ی چند نکته ی مهم درمورد لیست های کشویی Html به همراه مثال لیستهای کشویی (Select) استفاده از تگ پایانی </option> اختیاری است . نمونه کد :
<select name="MyList"> <option value="value 1" >گزینه اول</option> <option value="value 2">گزینه دوم</option> <option value="value 3">گزینه سوم</option> <option value="value 4">گزینه چهارم</option> </select>
از شناسه های زیر می توان در تگ <select> استفاده کرد: name : از این شناسه برای اختصاص یک نام به لیست استفاده می شود . size : "multiple="multiple : "disabled="disabled : این شناسه لیست را برای کاربر غیر فعال می کند و در نتیجه گزینه های آن امکان انتخاب شدن ندارند. در این مورد نیز میتوان فقط کلمه disabled را به تگ اضافه کرد . (بدون اینکه به آن مقداری بدهیم) وارد کردن گزینه ها به لیست با تگ <option> از این شناسه برای مشخص کردن گزینه ای که به هنگام باز کردن صفحه ، به صورت پیش فرض انتخاب شده است استفاده می شود. در صورتی که برای هیچکدام از گزینه های موجود در لیست از این شناسه استفاده نشده باشد گزینه اول به عنوان گزینه انتخاب شده پیش فرض استفاده می شود. استفاده از رویداد های زیر در تگ <option> مجاز است: دسته بندی گزینه های لیست های کشویی با استفاده از <optgroup>
مثال درمورد لیست های کشویی: رفتن به صفحه مورد نظر با انتخاب یکی از گزینه های لیست با استفاده از دکمه Button 1- کد جاوا اسکریپت زیر را در قسمت head صفحه وارد کنید :
<script> <!-- function land(ref, target) { lowtarget=target.toLowerCase(); if (lowtarget=="_self") {window.location=loc;} else {if (lowtarget=="_top") {top.location=loc;} else {if (lowtarget=="_blank") {window.open(loc);} else {if (lowtarget=="_parent") {parent.location=loc;} else {parent.frames[target].location=loc;}; }}} } function jump(menu) { ref=menu.choice.options[menu.choice.selectedIndex].value; splitc=ref.lastIndexOf("*"); target=""; if (splitc!=-1) {loc=ref.substring(0,splitc); target=ref.substring(splitc+1,1000);} else {loc=ref; target="_self";}; if (ref != "") {land(loc,target);} } //--> </script> 2- کد زیر را در قسمت body وارد کنید : <form> <select name="choice" size="1"> <option value="">My List ...</option> <option value="http://www.yahoo.com">Yahoo</option> <option value="http://www.fc-perspolis.com">FC Perspoils</option> <option value="http://www.google.com">Google</option> <option value="http://www.ebay.com">eBay</option> <option value="http://www.amazon.com">Amazon</option> </select> <input TYPE="button" VALUE="GO!" onClick="jump(this.form)"> </form>
نکات : نکته 1- با اضافه کردن عبارت blank_* به آخر لینک ها ، اون لینک در تب جدید باز میشه ، مثال : <option value="http://www.fc-perspolis.com*_blank">FC Perspoils</option> میتونیم بجای blank_ ، اگه از frame توی صفحمون استفاده کردیم ، نام اون فریم رو وارد کنیم تا لینک توی اون فریم باز بشه . نکته 2- فریم چیست ؟ به طور خیلی خیلی خلاصه برای نمایش دادن یک صفحه html در داخل یک صفحه ی دیگه ، از فریم استفاده میشه . مثال ساده : فرض کنید بخواهیم با کلیک روی یه لینک ، لینک توی فریمی که توی صفحه ساختیم بازبشه : کد : <a href="http://itzenderood.blogsky.com" target="myframe"> وبلاگ دانشجویان آیتی دانشگاه اصفهان </a> <br /> <br /> <center> <iframe width="350" height="200" frameborder="1" name="myframe"> </iframe> </center> اگه روی لینک زیر کلیک کنید ، صفحه توی فریم زیر باز میشه : نکته ی مهم ، همنام بودن محل باز شدن لینک با نام فریمه . مهم ترین شناسه های تگ فریم ، name و src هستند . با افزودن شناسه src و دادن یک آدرس به آن ، آدرس موجود توی src ، درون فریم باز میشه . آشنایی بیشتر با فریم ها : اینجا پس فرض کنید بخواهیم در مثال بالا ، سایت یاهو توی همون پنجره ، سایت گوگل توی یه صفحه جدید و سایت fc-perspolis.com توی فریمی که زیرش ساختیم باز بشه . کد قسمت body بالا رو بصورت زیر تغییر میدیم : <form> <select name="choice" size="1"> <option value="">My List ... </option> <option value="http://www.yahoo.com*_blank">Yahoo</option> <option value="http://www.fc-perspolis.com*mynewframe"> FC Perspoils</option> <option value="http://www.google.com">Google</option> <option value="http://www.ebay.com">eBay</option> <option value="http://www.amazon.com">Amazon</option> </select> <input TYPE="button" VALUE="GO!" onClick="jump(this.form)"> </form> <br /> <br /> <center> <iframe width="350" height="250" scrolling="no" frameborder="1" name="mynewframe" />
نکته 3- شناسه scrolling="no" در تگ <iframe>، باعث حذف Scroll bar از فریم میشه . نکته 4- اگه بخوایم بدون استفاده از دکمه button ، با انتخاب یک گزینه از لیست کشویی ، مستقیم به اون آدرس وارد بشیم بجای کد body در قسمت بالا از کد زیر استفاده می کنیم . یعنی بجای استفاده از Button ، از رویداد onChange توی تگ <select> استفاده می کنیم : <form> <select name="choice" size="1" onChange="jump(this.form)"> <option value="">My List ... </option> <option value="http://www.yahoo.com*_blank">Yahoo</option> <option value="http://www.fc-perspolis.com*mynewframe"> FC Perspoils</option> <option value="http://www.google.com">Google</option> <option value="http://www.ebay.com">eBay</option> <option value="http://www.amazon.com">Amazon</option> </select> </form> <br /> <br /> <center> <iframe width="350" height="250" scrolling="no" frameborder="1" name="mynewframe" /> |