mohammad-hossein-miri
Mohammad Hossein Miri

درد و دل های یک برنامه نویس - وب سایت شخصی محمد حسین میری

بیشترین دانلودها
کامپوننت فروش کارت شارژ و پین کد 3029
سیستم رزرواسیون جوملا 1103
ماژول ورود به سایت جوملا 3 581
ماژول گلوبال نیوز جوملا 3 - قابلیت صفحه بندی 384
ماژول اسلایدر آکاردئونی - جوملا 2.5 208
آموزش تکنیک های طراحی قالب - ایجاد موقعیت های شرطی در قالب

سلام
تو این آموزش می خواهیم بصورت عملی موقعیت شرطی ایجاد کنیم و بهتون یاد بدیم چطوری می توانید این کار را برای همه موقعیت های قالب تون انجام بدید
برای درک صحیح از این آموزش باید طراحی قالب را بصورت نسبی بدانید.
برای ادامه آموزش به ادامه مطلب رجوع کنید ... جوملا یک قابلیت بسیار مهم و خوب دارد و آن هم این است که شما می توانید موقعیت قالب را در هر لحطه چک کنید که ایا ماژولی در این موقعیت قرار گرفته است یا خیر
کد زیر این کا رو انجام می دهد , جای position باید نام موقعیت مورد نظر را قرار می دهید و این کد یک مقدار true یا false بر میگرداند (1 یا 0)
  1. $this->countModules('position')


خب اگر یکم آشنایی با زبان برنامه نویسی php داشته باشید می توانید که یک شرط بسیار ساده قرار بدید و چک کنید ایا ماژولی در این موقعیت قرار گرفته است یا خیر
به مثال زیر توجه کنید
  1. if($this->countModules('sidebar')) {
  2.     <jdoc:include type="modules" name="sidebar" style="container" />
  3.   }


این کد ابتدا در خط 1 داره چک میکنه که ایا ماژولی در موقعیت sidebar وجود داره یا خیر - اگر وجود داره کد درون {} اجرا شود و اگر نه کد درون {} را اجرا نکند
کد درون {} هم فرار خوانی ماژولی با نام sidebar می باشد

حال به کده زیر دقت کنید
  1. if($this->countModules('sidebar') and $this->countModules('sidebar-2')) {
  2.     <jdoc:include type="modules" name="sidebar" style="container" />
  3. <jdoc:include type="modules" name="sidebar-2" style="container" />
  4. }


در خط 1 داره چک می کنه اگر موقعیت sidebar و موقعیت 2 با هم وجود داشتند (ماژول درون ان فعال شده شده بود) کد درون {} اجرا شود
در خط 2 و 3 فراخوانی ماژول ها می باشد
دقت بکنید در شرط ما کلمه and را بکار برده ایم یعنی هر دو شرط باید اجرا شود
حال اگر کلمه or را بکار ببریم یعنی یا شرط اول یا شرط دوم بر قرار بود کد درون {} اجرا شود ,نیازی به برقرار بودن هر دو شرط نیست
حال می خواهیم کدی بنویسیم که چک کنه اگر موقعیت های sidebar و sidebar-2 هدوتا بر قرار بود یک کدی را اجرا کند و اگر فقط موقعیت sidebar بر قرار بود یک کد دیگر را اجرا کند
به مثال زیر دقت کنید
  1. if($this->countModules('sidebar') and $this->countModules('sidebar-2')) {
  2.     <jdoc:include type="modules" name="sidebar" style="container" />
  3. <jdoc:include type="modules" name="sidebar-2" style="container" />
  4.   }elseif($this->countModules('sidebar')) {
  5.     <jdoc:include type="modules" name="sidebar" style="container" />
  6. }


کد بالا در خط 1 چک می کنه که ایا موقعیت های sidebar و sidebar-2 هر دو فعال و درون انها ماژول هست یا خیر اگر بود کد درون {} زیر آن اجرا شود
اگر شرط اول اجرا شد دیگر شرطی که در خط 4 هست برسی نمی گردد اما اگر شرط اول اجرا نشد در شرط دوم که در خط 4 هست برسی میگردد
در خط 4 برسی می کند ایا موقعیت sidebar فعال و درون ان ماژول قرار گرفته است یا خیر
اگر بلی کد درون {} زیر ان اجرا شود

به همین سادگی می توانید موقعیت ها را بصورت شرطی قرار دهید که اگر درون انها ماژولی فعال بود موقعیت نمایش داده شود در غیر اینصورت نمایش داده نشود
حال مثلا دو موقعیت sidebar و sidebar-2 در کنار هم هستند و شما نیاز دارید که کدی بنویسید که اگر موقعیت sidebar وجود نداشت sidebar-2 عرض ان 2برابر شود و جای sidebar رو بگیره
خب اگر برنامه نویس باشید حتما تا الان راه حل مناسب را از روش بالا بدست اوردید اما بنده یک مثالی خواهم زد تا همگی به درستی درک کنند
به کد زیر دقت کنید
  1. <?php $containarWidth = "col-md-12";
  2. if($this->countModules('sidebar')) {
  3.                             $containarWidth = "col-md-9"; ?>
  4.     <jdoc:include type="modules" name="sidebar" style="container" />
  5. <?php }; ?>
  6. <div class="<?php echo $containarWidth; ?>">
  7. <jdoc:include type="modules" name="sidebar-2" style="container" />
  8. </div>


خب در خط 1 می بینید که به متغیر containarWidth مقداری داده شد
حال در خط 2 چک میشه اگر درون موقعیت sidebar ماژولی فعال بود کدهای درون {} اجرا شود
مشاهده می کنید که اگر شرط اجرا شود مقدار containarWidth تغییر پیدا می کند
در نهایت هم مقدار containarWidth به کلاس دایوی که موقعیت sidebar-2 درون ان قرار دارد اضافه می شود
حال با css اینگونه استایل دهی خواهیم کرد
  1. .col-md-12{
  2. width:600px;
  3. }
  4. .col-md-9{
  5. width:300px;
  6. }


اگر کلاس دایو موقعیت sidebar-2 مقدار col-md-9 شد پس عرض 300 به خود خواهد گرفت
اگر col-md-12 بگیرد عرض 600 خواهد گرفت و 2 برابر خواهد شد
برای تمامی موقعیت ها همین روال طی خواهد شد

امیوارم لذت برده باشید
ارادت/

Mohammad Hossein Miri ©Copyright 2017