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

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

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

ภาพประจำตัวสมาชิก
jamepiyawat
PHP VIP Members
PHP VIP Members
โพสต์: 2008
ลงทะเบียนเมื่อ: 21/05/2019 10:45 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย jamepiyawat »

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

แสดงข้อมูลที่จอคอม
Selection_999(1145).png
Selection_999(1145).png (45.22 KiB) Viewed 1448 times
แสดงตารางข้อมูลบนคอม
Selection_999(1146).png
Selection_999(1146).png (34.09 KiB) Viewed 1448 times
โค้ดที่ใช้

โค้ด: เลือกทั้งหมด

	<?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();
		});

	});

	");

?>
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 21911
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

ใช้ Media Queries ของ css กำหนดการแสดงผลตามความกว้างของหน้าจอได้ครับ
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 28508
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

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

โพสต์ที่ยังไม่ได้อ่าน โดย thatsawan »

Media Query หรือ การเขียนเงื่อนไขใน CSS3 กำหนดขนาดมุมมองอุปกรณ์
https://www.mindphp.com/%E0%B8%9A%E0%B8 ... y_css.html
ภาพประจำตัวสมาชิก
jamepiyawat
PHP VIP Members
PHP VIP Members
โพสต์: 2008
ลงทะเบียนเมื่อ: 21/05/2019 10:45 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย jamepiyawat »

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

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

โค้ด: เลือกทั้งหมด

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

@media screen and (min-width: 150px) and (max-width: 420px) {
	.phone-vertical-style {
		display: inline !important;
  }
}
ถ้ากำหนดแนวนอนจะเป็นแบบนี้

โค้ด: เลือกทั้งหมด

.phone-horizontal {
  display: none;
}

@media screen and (min-width: 419px) and (max-width: 767px) {
	.phone-horizontal {
		display: inline !important;
  }
}
ตอบกลับโพส

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 60