فراغیب

الگو:جدول اطلاعات محصول/دماوند پلیمر: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(یک نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html>
<html>
<style>
<style>
   /* استایل‌های پایه و ظرف اصلی */
   /* بخش اصلی نگهدارنده */
   .banner-table-section {
   .banner-table-section {
     margin: 20px 0;
     margin: 20px 0;
     font-family: 'IRANSansXFaNum', Tahoma, Arial, sans-serif;
     font-family: 'IRANSansXFaNum', Tahoma, sans-serif;
    direction: rtl;
   }
   }


   .banner-table-title {
   .banner-table-wrap {
     text-align: center;
     position: relative;
     font-size: 1.5rem;
     border: 1px solid #e0e0e0;
     margin-bottom: 20px;
     border-radius: 8px;
     color: #333;
     overflow: hidden;
   }
   }


   /* مدیریت ریسپانسیو برای موبایل */
   /* تنظیمات ریسپانسیو برای اسکرول افقی در موبایل */
   .banner-table-responsive {
   .banner-table-responsive {
     position: relative;
     width: 100%;
     overflow: hidden; /* برای کنترل نمایش سطرها */
     overflow-x: auto;  
    border: 1px solid #e0e0e0;
     -webkit-overflow-scrolling: touch;
    border-radius: 8px;
     transition: max-height 0.5s ease-in-out;
   }
   }


خط ۲۶: خط ۲۵:
     width: 100%;
     width: 100%;
     border-collapse: collapse;
     border-collapse: collapse;
    background-color: #fff;
     text-align: right;
     text-align: right;
   }
   }


   .banner-table th,  
   .banner-table th, .banner-table td {
  .banner-table td {
     padding: 12px 15px;
     padding: 12px 15px;
     border-bottom: 1px solid #eee;
     border-bottom: 1px solid #eee;
     font-size: 14px;
     font-size: 14px;
    line-height: 1.6;
   }
   }


   .banner-table th {
   .banner-table th {
     background-color: #f8f9fa;
     background-color: #f8f9fa;
    color: #2c3e50;
    font-weight: bold;
   }
   }


   /* حالت محدود شده (فقط ۳ سطر) */
  /* --- بخش جادویی: محدود کردن سطرها --- */
   .banner-table-wrap.collapsed .banner-table-responsive {
 
     max-height: 320px; /* ارتفاع تقریبی ۳ سطر */
   /* حالت پیش‌فرض: محدود به ارتفاع ۳ سطر */
     overflow: hidden;
   .is-collapsed .banner-table-responsive {
     max-height: 280px !important; /* این عدد را بسته به فونت خود می‌توانید کمی کم یا زیاد کنید */
     overflow: hidden !important;
   }
   }


   /* افکت محو شدن در انتهای ۳ سطر اول */
   /* ایجاد افکت محو شدن (Gradient) در حالت بسته */
   .banner-table-wrap.collapsed::after {
   .is-collapsed .banner-table-wrap::after {
     content: "";
     content: "";
     position: absolute;
     position: absolute;
     bottom: 50px; /* ارتفاع دکمه */
     bottom: 0;
     left: 0;
     left: 0;
     width: 100%;
     width: 100%;
     height: 80px;
     height: 70px;
     background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
     background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
     pointer-events: none; /* اجازه کلیک به دکمه زیر این لایه */
     pointer-events: none;
     z-index: 1;
     z-index: 10;
   }
   }


   /* دکمه نمایش بیشتر/کمتر */
   /* دکمه نمایش بیشتر */
   .toggle-btn-container {
   .toggle-container {
     text-align: center;
     text-align: center;
     margin-top: 15px;
     margin-top: 15px;
    position: relative;
    z-index: 2;
   }
   }


   .btn-expand {
   .btn-more {
     background-color: #007bff;
     background-color: #007bff;
     color: white;
     color: #fff;
     border: none;
     border: none;
     padding: 10px 25px;
     padding: 8px 25px;
     border-radius: 25px;
     border-radius: 5px;
     cursor: pointer;
     cursor: pointer;
     font-size: 14px;
     font-size: 14px;
    font-family: inherit;
     transition: 0.3s;
     transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
   }
   }


   .btn-expand:hover {
   .btn-more:hover {
     background-color: #0056b3;
     background-color: #0056b3;
    transform: translateY(-2px);
  }
  /* استایل مخصوص موبایل برای جدول */
  @media screen and (max-width: 768px) {
    .banner-table-responsive {
      overflow-x: auto; /* اجازه اسکرول افقی در موبایل */
      -webkit-overflow-scrolling: touch;
    }
    .banner-table th, .banner-table td {
      min-width: 150px; /* جلوگیری از فشرده شدن بیش از حد متن در موبایل */
    }
    .banner-table-wrap.collapsed::after {
        height: 60px;
    }
   }
   }
</style>
</style>


<section class="banner-table-section collapsed" dir="rtl" lang="fa" aria-labelledby="banner-types-title">
<!-- اضافه کردن کلاس is-collapsed به بخش اصلی برای حالت بسته -->
   <div class="banner-table-wrap" id="tableWrapper">
<section class="banner-table-section is-collapsed" id="mainSection">
     <h2 id="banner-types-title" class="banner-table-title">انواع مخازن و کاربرد آن‌ها</h2>
   <div class="banner-table-wrap">
     <h2 class="banner-table-title" style="text-align:center;">انواع مخازن و کاربرد آن‌ها</h2>


     <div class="banner-table-responsive">
     <div class="banner-table-responsive">
       <table class="banner-table">
       <table class="banner-table">
        <caption style="display:none;">جدول معرفی انواع مخازن، کاربرد و مزایای هر نوع</caption>
         <thead>
         <thead>
           <tr>
           <tr>
             <th scope="col">نام یا مدل مخزن</th>
             <th scope="col">نام یا مدل مخزن</th>
             <th scope="col">ظرفیت و ابعاد (لیست ویژگی‌ها)</th>
             <th scope="col">ظرفیت و ابعاد</th>
             <th scope="col">محل پیشنهادی برای نصب</th>
             <th scope="col">محل پیشنهادی برای نصب</th>
           </tr>
           </tr>
         </thead>
         </thead>
         <tbody>
         <tbody>
           <tr>
           <tr><td>مخزن آب افقی</td>
            <td>مخزن آب افقی</td>
          <td>بدنه کشیده با قطر کم، تمرکز بر توزیع وزن در طول مسیر، پایداری بالا در سطوح گسترده.</td>
            <td>بدنه کشیده با قطر کم، تمرکز بر توزیع وزن در طول مسیر، پایداری بالا در سطوح گسترده.</td>
          <td>فضاهای طولانی و باریک، حیاط‌های مستطیلی، یا مسیرهای انتقال آب در سطح زمین</td>
            <td>فضاهای طولانی و باریک، حیاط‌های مستطیلی، یا مسیرهای انتقال آب در سطح زمین.</td>
           </tr>
           </tr>
           <tr>
           <tr>
            <td>مخزن آب عمودی</td>
          <td>مخزن آب عمودی</td>
            <td>اشغال فضای سطحی بسیار کم، تمرکز بر ارتفاع، فشار هیدرولیکی مناسب در ارتفاع‌های بالا.</td>
          <td>اشغال فضای سطحی بسیار کم، تمرکز بر ارتفاع، فشار هیدرولیکی مناسب در ارتفاع‌های بالا</td>
            <td>پشت‌بام‌ها، فضاهای باز با محدودیت عرض، یا کنار دیوارها.</td>
          <td>پشت‌بام‌ها، فضاهای باز با محدودیت عرض، یا کنار دیوارها.</td>
           </tr>
           </tr>
           <tr>
           <tr>
            <td>مخزن کتابی (کم‌جا)</td>
          <td>مخزن کتابی (کم‌جا)</td>
            <td>عرض بسیار کم و طراحی فشرده، طراحی ارگونومیک برای عبور از فضاهای تنگ، بهینه‌سازی حداکثری فضا.</td>
          <td>عرض بسیار کم و طراحی فشرده، طراحی ارگونومیک برای عبور از فضاهای تنگ، بهینه‌سازی حداکثری فضا.</td>
            <td>فضای بین دیوار و نرده، کناره‌های راهروها، یا کناره‌های ساختمان.</td>
          <td>فضای بین دیوار و نرده، کناره‌های راهروها، یا کناره‌های ساختمان</td>
          </tr>
        </tr>
           <!-- بقیه سطرها -->
         
           <!-- سطر‌های اضافی -->
           <tr>
           <tr>
            <td>مخزن آب زیر پله</td>
              <td>مخزن آب زیر پله</td>
             <td>طراحی متناسب با شیب و زوایای نامتقارن، استفاده از فضای مرده (Dead Space) زیر سازه.</td>
             <td>طراحی متناسب با شیب و زوایای نامتقارن، استفاده از فضای مرده (Dead Space) زیر سازه.</td>
             <td>زیر پله‌ها، زیر پلکان‌های بیرونی یا در حیاط‌های شیب‌دار.</td>
             <td>: زیر پله‌ها، زیر پلکان‌های بیرونی یا در حیاط‌های شیب‌دار.</td>
           </tr>
           </tr>
           <tr>
           <tr>
خط ۱۴۸: خط ۱۲۵:
             <td>مخزن بیضی</td>
             <td>مخزن بیضی</td>
             <td>توزیع یکنواخت فشار در بدنه، کاهش تنش‌های مکانیکی در دیواره‌ها، طراحی ارگونومیک و زیبا.</td>
             <td>توزیع یکنواخت فشار در بدنه، کاهش تنش‌های مکانیکی در دیواره‌ها، طراحی ارگونومیک و زیبا.</td>
             <td>فضاهای باغی یا محیط‌های با طراحی مدرن که نیاز به ظاهری زیباتر از مخازن استاندار دارند.</td>
             <td> فضاهای باغی یا محیط‌های با طراحی مدرن که نیاز به ظاهری زیباتر از مخازن استاندار دارند.</td>
           </tr>
           </tr>
           <tr>
           <tr>
خط ۱۵۶: خط ۱۳۳:
             </tr>
             </tr>
             <tr>
             <tr>
               <td>مخزن آب مکعبی</td>
               <td> مخزن آب مکعبی</td>
               <td>ویژگی‌ها: استفاده حداکثری از حجم در یک قالب مشخص، قابلیت چیدمان کنار هم (Stacking) در صورت نیاز.</td>
               <td>ویژگی‌ها: استفاده حداکثری از حجم در یک قالب مشخص، قابلیت چیدمان کنار هم (Stacking) در صورت نیاز.</td>
               <td>محل نصب: گوشه‌های حیاط، داخل انبارهای کوچک یا فضاهایی با خطوط مستقیم و زاویه‌دار.</td>
               <td>محل نصب: گوشه‌های حیاط، داخل انبارهای کوچک یا فضاهایی با خطوط مستقیم و زاویه‌دار.</td>
             </tr>
             </tr>
           <tr>
           <tr>
               <td>مخزن نیسانی</td>
               <td>مخزن نیسانی (شبیه به سبد نیسان)</td>
             <td>ویژگی‌ها: طراحی خاص با قابلیت حمل آسان، بدنه مقاوم در برابر ضربه و لرزش، توزیع وزن متمرکز.</td>
             <td>ویژگی‌ها: طراحی خاص با قابلیت حمل آسان، بدنه مقاوم در برابر ضربه و لرزش، توزیع وزن متمرکز.</td>
               <td>محل نصب: کاربردهای متحرک، یا مخازنی که نیاز به جابه‌جایی یا قرارگیری در نقاط دارای لرزش دارند.</td>
               <td>محل نصب: کاربردهای متحرک، یا مخازنی که نیاز به جابه‌جایی یا قرارگیری در نقاط دارای لرزش دارند.</td>
خط ۱۸۰: خط ۱۵۷:
   </div>
   </div>


   <div class="toggle-btn-container">
   <div class="toggle-container">
     <button class="btn-expand" onclick="toggleTable()" id="toggleBtn">مشاهده بقیه جدول</button>
     <button class="btn-more" onclick="handleToggle()" id="actionBtn">مشاهده بقیه جدول</button>
   </div>
   </div>
</section>
</section>


<script>
<script>
  function toggleTable() {
function handleToggle() {
    const section = document.querySelector('.banner-table-section');
  const section = document.getElementById('mainSection');
    const btn = document.getElementById('toggleBtn');
  const btn = document.getElementById('actionBtn');
   
 
    if (section.classList.contains('collapsed')) {
  if (section.classList.contains('is-collapsed')) {
      // باز کردن جدول
    // باز کردن
      section.classList.remove('collapsed');
    section.classList.remove('is-collapsed');
      btn.textContent = 'بستن و نمایش کمتر';
    btn.innerText = 'نمایش کمتر';
    } else {
  } else {
      // بستن جدول
    // بستن
      section.classList.add('collapsed');
    section.classList.add('is-collapsed');
      btn.textContent = 'مشاهده بقیه جدول';
    btn.innerText = 'مشاهده بقیه جدول';
      // اسکرول نرم به سمت بالای جدول وقتی بسته می‌شود
    // اسکرول به بالای جدول برای تجربه بهتر کاربر
      section.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    section.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
   }
   }
}
</script>
</script>
</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:جدول_اطلاعات_محصول/دماوند_پلیمر»