در طراحی های امروزی استفاده از تکنیک هایی که کار با
وبسایت و همچنین برقراری ارتباط را برای مخاطبان ساده تر می کنه بسیار فراگیر شده . بسیاری از گروه های توسعه وب با ارائه بسته های بسیار کاربردی در ورژن های مختلف به بهبود این قضیه کمک می کنند. قصد داریم به این موضوع بیشتر و به طور ویژه بپردازیم.
jQuery lightBox plugin
یکی از نمونه های پر کاربرد از این بسته های کاربردی lightBox است کا با استفاده از کتابخانه jQuery ساخته شده است و تا کنون چندین ورژن از آن انتشار پیدا کرده است . البته استفاده از این plugin ها در بین
طراحان حرفه ای وب بسیار معمول است .
در زیر نحوه استفاده از اینplugin را با زبان ساده برای استفاده دوستانی که آشنایی چندانی با استفاده از این plugin ها ندارند توضیح خواهیم داد.
مثالی را از این Plugin ببینید و بسته مربوط به آن را دریافت کنید.در این بسته فولدر های js , images , css , photos و یکی صفحه index.html نیز به عنوان نمونه قرار دارد.
در ابتدا طبق روال استفاده از تمامی Plugin هایی که از کتابخانه jQuery استفاده میکنند این کتابخانه را به همراه فایل js مربوط به خود این بسته در صفحه اضافه می کنیم.
1 | <script type="text/javascript" src="js/jquery.js"></script> |
2 | <script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script> |
بعد از اضافه کردن فایلهای js نوبت به فایل css میرسد که بعد از فایلهای js در قسمت head صفحه اضافه می شود.
1 | <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" /> |
بعد از بار گزاری فایلهای css و js نوبت به فراخوانی آنها میرسد که به وسیله Function زیر انجام می گیرد.
01 | <script type="text/javascript"> |
03 | // Use this example, or... |
04 | $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel |
06 | $('#gallery a').lightBox(); // Select all links in object with gallery ID |
08 | $('a.lightbox').lightBox(); // Select all links with lightbox class |
10 | $('a').lightBox(); // Select all links in the page |
11 | // ... The possibility are many. Use your creative or choose one in the examples above |
با توجه به function بالا متوجه خواهید شد که می توان با روشهای مختلفی از این plugin استفاده نمود. به طور مثال
1 | $('a[@rel*=lightbox]').lightBox(); |
بیانگر این است که تمامی image هایی که در بین یک تگ <a></a> قرار گرفته باشند و تگ <a></a> آنها نیز دارای خاصیت rel با مقدار lightbox باشد از lightBox استفاده می کنند.
مانند مثال زیر :
1 | <a href="#" rel="lightbox"><img src="ittutorial.jpg" alt="ittutorial.ir" /></a |
می توانید از رو شهای دیگر نیز برای بکار گیری این plugin در
صفحات وب استفاده نمائید.
می توانید به مثال های موجود در فایل آماده شده برای دانلود نیز مراجعه نمائید و با دقت در کدها روشهای دیگر استفاده از این plugin را نیز ملاحظه نما ئید.
