استفاده بهتر از فضاها

محتوا‌‌ به‌ صورت ‌‌اسلاید

همیشه استفاده از فضا‌های صفحه به بهترین نحو ممکن از دغدغه‌های طراحان حرفه‌ای وب بوده است. این هفته شما را با روشی آشنا می‌کنیم که می‌توانید بر اساس آن مطالب خود را به‌صورت اسلاید در صفحه نمایش دهید و از فضا‌های موجود استفاده بهتری داشته باشید.
کد خبر: ۲۰۷۲۸۲

پلاگینی که این هفته از آن در کار خود استفاده خواهیم کرد،jQuery Coda Slider  نام دارد. با استفاده از این پلاگین می‌توانید محتویات موجود در صفحه را به‌بخش‌های جداگانه‌ای تقسیم کنید و هر کدام از آن بخش‌ها را به‌صورت یک اسلاید جداگانه برای بازدیدکنندگان نمایش دهید.

برای شروع به صفحه خانگی این پلاگین در این آدرس بروید:

http://www.ndoherty.com/demos/coda-slider/1.1.1


سپس پلاگین 1.1.1Coda-Slider را دریافت کنید. محتویات فایل دریافت شده را از حالت فشرده خارج کرده، سپس فایل  index.html موجود در پوشه 1.1.1 coda-slider. را اجرا کنید.

در نگاه اول ممکن است استفاده از این پلاگین کمی پیچیده به‌نظر برسد. برای استفاده از این پلاگین ابتدا باید فایل‌هایjs  مورد نیاز آن را در بخش سرآیند ( header)  صفحه قرار دهید.

برای انجام این کار فایل  index.html را با استفاده از یک ویرایش‌گر متنی باز کرده و در بخش  سرآیند به جستجوی چهار فایل  js  بپردازید، پس از مشاهده این 4 فایل، آنها را باید در صفحه‌ای که می‌خواهید از قابلیت‌های این پلاگین استفاده کنید، قرار دهید.
بعد از انجام این کار می‌باید از امکانات این پلاگین در صفحه خود استفاده کنید، برای این کار می‌توانید از کدهایی شبیه مثال زیر استفاده کنید:

<script type="text/javascript">
jQuery(window).bind("load", function()
ت").codaSlider()1jQuery("divslider
؛(ت
</script>
با استفاده از دستورات بالا تابع codaSlider()  را به عنصری که می‌خواهیم محتویات درونش به صورت اسلاید نمایش داده شود، مرتبط می‌سازیم.

توجه کنید که 1  slider نام ID عنصری است (در اینجا عنصر(div که می‌خواهید آنها را به‌صورت اسلاید نمایش دهید.

پس از انجام این کار نوبت به محتویات صفحه می‌رسد. کار را با یک عنصر div ادامه می‌دهیم و  ID آن را 1  slider انتخاب می‌کنیم. سپس محتویاتی که می‌خواهیم به‌صورت اسلاید نمایش داده شوند را به انتخاب خود به بخش‌های جداگانه‌ای تقسیم می‌کنیم و هر بخش را در یک عنصرdiv قرار می‌دهیم و مشخصهtitle  را برای این div تعریف می‌کنیم. بسته به ترتیب نمایش هر بخش مقدار  title را به‌صورت َ Panel وارد می‌کنیم.

برای نمونه تکه‌ای از محتوای صفحه که قرار است در اسلاید دوم نمایش داده شود باید به این شکل در صفحه استفاده گردد:

</div>محتوای صفحه<"2div title="Panel >
این کار را باید برای کلیه بخش‌های صفحه خود انجام دهیم.

کمی‌صبر کنید! کار هنوز به پایان نرسیده است، باید قابلیتی را به صفحه بیافزاییم تا کاربران بتوانند به اسلاید‌های مورد نظر خودشان بروند و میان اسلاید‌ها حرکت کنند. این کار را می‌توانیم با استفاده از لینک‌ها انجام دهیم، می‌توانیم به تعداد بخش‌های ایجاد شده، لینک ایجاد کنیم و نشانی هر کدام از آنها را برابر با شماره هر اسلاید قرار دهیم، برای مثال، برای حرکت به اسلاید شماره 3، آدرس لینک مورد نظر باید 3 باشد همچنین کلاس لینک مورد نظر باید cross-link  قرار داده شود، با این توضیحات لینک ما می‌تواند چیزی شبیه مثال زیر باشد:
a href="َ3" class=>
<cross-link"<>Panel3 /a"
با استفاده از این پلاگین می‌توانیم حالت نمایش محتویات صفحه خود را جذاب‌تر کنیم. البته اگر شما به زبان‌های برنامه‌نویسی تحت وب مانندphp ، نیز مسلط باشید و یا از سیستم‌های مدیریت سایت‌ها و وبلاگ‌ها استفاده می‌کنید، می‌توانید با استفاده از دانش خود این پلاگین را با صفحات سایت و یا بلاگ خود ادغام کنید، به‌نحوی که اسلاید‌ها و لینک‌ها به‌صورت خودکار ایجاد شوند و نتیجه بسیار جالبی را به‌دست آید. در اصل این پلاگین می‌تواند نوشته‌های شما را به‌نوعی صفحه‌بندی کند و با استفاده از آن می‌توانید از فضای موجود در صفحه‌های سایت خود استفاده بهتری داشته باشید.

پویا سلیمی‌

newsQrCode
ارسال نظرات در انتظار بررسی: ۰ انتشار یافته: ۰

نیازمندی ها