จะทำอย่างไรให้การแสดงตารางข้อข้อมูลบนมือถือต่างกันได้ในแนวตั้งแนวนอน ครับ

สำหรับผู้ที่ เริ่มต้น Programming - PHP มีอะไร แนะนำ หรือข้อสงสัยต้องบอร์ด นี้ คนที่มีความรู้ แบ่งปันคนอื่นบ้างนะ ปัญหาการเขียนโปรแกรม แบบ OOP Session Cookies php network

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
jamepiyawat
PHP VIP Members
PHP VIP Members
Posts: 1121
Joined: 21/05/2019 10:45 am

จะทำอย่างไรให้การแสดงตารางข้อข้อมูลบนมือถือต่างกันได้ในแนวตั้งแนวนอน ครับ

Postby jamepiyawat » 03/10/2019 3:36 pm

สวัดดีครับพอดีว่าผมนั้นสามารถให้แสดงตารางข้อมูลแบบบนหน้าจอคอมและหน้าจอมือถือต่างกันแล้วแต่ว่าผมอยากจะให้มือถือแนวนอนแสดงผลต่างออกไปอีกแบบหนึ่งครับพอจะมีวิธีไหนบ้างครับ

แสดงข้อมูลที่จอคอม
Selection_999(1145).png
Selection_999(1145).png (45.22 KiB) Viewed 111 times


แสดงตารางข้อมูลบนคอม
Selection_999(1146).png
Selection_999(1146).png (34.09 KiB) Viewed 111 times


โค้ดที่ใช้

Code: Select all

   <?php
         foreach ($recent_topic_news As $k => $v) {
            $topic_poster = $v['topic_poster'];
            if ($recent->format_date(time(), 'd M Y', false, false) == $recent->format_date($v['topic_time'], 'd M Y', false, false)) {
               $time_md = $recent->format_date($v['topic_time'], 'g:i a', false, false);
            } else {
               $tmtb = explode(' ', $recent->format_date($v['topic_time'], '| g:i a', false, false));
               if (empty($tmtb[0])) {
                  $time_md = $recent->format_date($v['topic_time'], 'd M Y g:i a', false, false);
               } else {
                  $time_md = $recent->format_date($v['topic_time'], '| g:i a', false, false);
               }
            }
            ?>
            <tr>
               <td>
                  <a href="<?php echo $path; ?>/viewtopic.php?f=<?php echo $v['forum_id']; ?>&t=<?php echo $v['topic_id']; ?>" target="NEW"><?php echo $v['topic_title']; ?></a><br />
                  <div>
                     <?php echo JText::_('MOD_MTB_NEWS_BY') ?>
                  <?php if ($v['topic_poster'] == "1") {
                     echo JText::_('MOD_MTB_NEWS_BY') . JText::_('MOD_MD_NEWS_ANONYMOUS') ?>
                  <?php } elseif ($v['topic_poster'] != "1") { ?>
                     <a href="<?php echo $path . '/memberlist.php?mode=viewprofile&u=' . $v['topic_poster']; ?>" target="NEW"><?php echo $recent_data_news['topic_poster'][$topic_poster]; ?></a>
                  <?php }?>
                <?php echo $recent->format_date($v['topic_last_post_time'], false, false, $params->get('time_md')) ?>
                  <span class="phone-horizontal">
                     <?php echo JText::_('MOD_MTB_NEWS_BOARD'); ?>
                     <a href="<?php echo $path; ?>/viewforum.php?f=<?php echo $v['forum_id']; ?>" target="NEW">  <?php echo $v['forum_name']; ?></a>
                  </span>

                  </div>

                     <?php echo JText::_('MOD_MTB_NEWS_HEAD_POST') ?>
                     <span class="badge badge-info"><?php echo $v['topic_posts_approved'] - 1; ?></span>
                  </div>
                     <?php echo JText::_('MOD_MTB_NEWS_HEAD_VIEWS')." "?><span class="badge badge-info"><?php echo $v['topic_views']; ?></span>

                        <a href="<?php echo $path; ?>/viewtopic.php?f=<?php echo $v['forum_id']; ?>&t=<?php echo $v['topic_id']; ?>#p<?php echo $v['topic_last_post_id']; ?>"><img src="modules/mod_md_recent/tmpl/icon_topic_latest.gif"></a>
                     </div>
               </td>
            </tr>
         <?php } ?>
      </tbody>
   </table>
<?php } else {
?>
   <div class="row-fluid ">
      <div class="span12 container">
         <div class="span12 mobile-view">
            <?php
            if ($f_check) {
               if ($t_head) {
                  $r = 1;
                  foreach ($recent_forums As $v) {
                     echo ' <a href="' . $path . '/viewforum.php?f=' . $v['forum_id'] . '" >' . $v['forum_name']
                        . '</a> <a href="' . $path . '/posting.php?mode=post&f=' . $v['forum_id'] . '" title="'
                        . JText::_('MOD_MTB_NEW_TOPIC') . ' ' . $v['forum_name']
                        . '" target="_blank" ><i class="icon-pencil"></i></a>';
                     if ($r++ !== COUNT($recent_forums)) {
                        echo ',';
                     }
                  }
               } else { ?>
                  <form action="<?= $path . '/viewforum.php' ?>" id="frm_bd">
                     <select id="bd_select" name="f" class="inputbox">
                        <option>- <?= JText::_('MOD_MD_SHOWTYPE_B') ?> -</option>
                        <?php foreach ($recent_forums As $v) { ?>
                           <option value="<?= $v['forum_id'] ?>"><?= $v['forum_name'] ?></option>
                        <?php } ?>
                     </select>
                  </form>
               <?php }
            } ?>
         </div>
         <table class="category table table-striped table-bordered table-hover">
            <thead class="mtb_title_content">
               <tr>
                  <th width="60%"><h5> <?php echo JText::_('MOD_MTB_NEWS_HEAD') ?> </h5></th>
                  <th width="10%" class="mobile-view"><h5> <?php echo JText::_('MOD_MTB_NEWS_HEAD_POST') ?> </h5></th>
                  <th width="10%" class="mobile-view"><h5> <?php echo JText::_('MOD_MTB_NEWS_HEAD_VIEWS') ?> </h5></th>
                  <th class="mobile-view"><h5> <?php echo JText::_('MOD_MTB_NEWS_RECENT') ?> </h5></th>
               </tr>
            </thead>
            <tbody>
               <?php
               foreach ($recent_topic_news as $k => $v) {
                  $topic_poster = $v['topic_poster'];
                  ?>
               <tr>
                  <td> <!--  topic  -->
                     <a href="<?php echo $path; ?>/viewtopic.php?f=<?php echo $v['forum_id']; ?>&t=<?php echo $v['topic_id']; ?>" target="NEW"><?php echo $v['topic_title']; ?></a><br />
                     <small>
                        <?php echo JText::_('MOD_MTB_NEWS_BY'); ?>
                        <a href="<?php echo $path . '/memberlist.php?mode=viewprofile&u=' . $v['topic_poster']; ?>" target="NEW"><?php echo $recent_data_news['topic_poster'][$topic_poster]; ?></a>
                        <?php echo $recent->format_date($v['topic_time'], false, false, $params->get('time_md')); ?>
                        <?php echo JText::_('MOD_MTB_NEWS_BOARD'); ?>
                        <a href="<?php echo $path; ?>/viewforum.php?f=<?php echo $v['forum_id']; ?>" target="NEW">  <?php echo $v['forum_name']; ?></a>
                     </small>
                  </td>
                  <td class="mobile-view"> <!--  post back  -->
                     <CENTER>
                        <span class="badge badge-info">
                           <?php
                              echo $v['topic_posts_approved'] - 1;
                           ?>
                        </span>
                     </CENTER>
                  </td>
                  <td class="mobile-view"> <!--  Open  -->
                     <CENTER>
                        <span class="badge badge-info"><?php echo $v['topic_views']; ?></span>
                     </CENTER>
                  </td>
                  <td class="mobile-view"> <!--  By  -->
                     <small>
                        <?php echo $recent->format_date($v['topic_last_post_time'], false, false, $params->get('time_md')) ?>
                     </small>
                     <?php
                     if ($v['topic_last_poster_id'] == "1") {
                        echo JText::_('MOD_MTB_NEWS_BY') . JText::_('MOD_MD_NEWS_ANONYMOUS');
                     } else {
                        ?>
                        <?php echo JText::_('MOD_MTB_NEWS_BY') ?>
                        <a href="<?php echo $path . '/memberlist.php?mode=viewprofile&u=' . $v['topic_last_poster_id']; ?>" target="NEW"><?php echo $v['topic_last_poster_name']; ?></a>
                     <?php } ?>
                     <a href="<?php echo $path; ?>/viewtopic.php?f=<?php echo $v['forum_id']; ?>&t=<?php echo $v['topic_id']; ?>#p<?php echo $v['topic_last_post_id']; ?>">
                        <img src="modules/mod_md_recent/tmpl/icon_topic_latest.gif">
                     </a>
                  </td>
               </tr>
               <?php } ?>
            </tbody>
         </table>
      </div>
   </div>
<?php } ?>
<div class="pagination pagination-toolbar clearfix" style="text-align: center;">
<?php echo $page->getPagesLinks(); ?>
</div>
<?php
$document = JFactory::getDocument();
$document->addScriptDeclaration("

   jQuery(document).ready(function() {

      jQuery('#bd_select').change(function() {
         jQuery('#frm_bd').submit();
      });

   });

   ");

?>

User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 10298
Joined: 18/04/2012 9:39 am

Re: จะทำอย่างไรให้การแสดงตารางข้อข้อมูลบนมือถือต่างกันได้ในแนวตั้งแนวนอน ครับ

Postby tsukasaz » 03/10/2019 3:41 pm

ใช้ Media Queries ของ css กำหนดการแสดงผลตามความกว้างของหน้าจอได้ครับ
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)



User avatar
jamepiyawat
PHP VIP Members
PHP VIP Members
Posts: 1121
Joined: 21/05/2019 10:45 am

Re: จะทำอย่างไรให้การแสดงตารางข้อข้อมูลบนมือถือต่างกันได้ในแนวตั้งแนวนอน ครับ

Postby jamepiyawat » 03/10/2019 4:20 pm

ทำได้แล้วครับ ขอบคุณครับ

ถ้ากำหนัดให้แสดงมือถือแนวตั้งคำสั่ง css ก็จะเป็นแบบนี้

Code: Select all

.phone-vertical-style {
  display: none;
}

@media screen and (min-width: 150px) and (max-width: 420px) {
   .phone-vertical-style {
      display: inline !important;
  }
}


ถ้ากำหนดแนวนอนจะเป็นแบบนี้

Code: Select all

.phone-horizontal {
  display: none;
}

@media screen and (min-width: 419px) and (max-width: 767px) {
   .phone-horizontal {
      display: inline !important;
  }
}


Return to “Programming - PHP”

Who is online

Users browsing this forum: MSN [Bot], mstsksmstsks and 38 guests