อยากสอบถามเกี่ยวกับ More ค่ะ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา อยากสอบถามเกี่ยวกับ More ค่ะ

อยากสอบถามเกี่ยวกับ More ค่ะ
พี่นิคค่ะ พอจะแนะนำให้ได้บ้างไหมค่ะ ว่า อยากให้กดปุ่ม more แล้วโชว์ข้อมูลขึ้นมา พร้อมกับคำว่า more แล้วเมื่อกด more อีกก้๗ะโชว์ข้อมูลอีกจนกว่าจะหมด พอหมดแล้วถึงจะโชว์คำว่า More less อ่ะค่ะ พอมีคำแนะนำบ้างไหมค่ะ

โค้ดออันนี้เป็น หน้าตา UI ของ More ค่ะ
<div class="far-content-profile">
    <div class="row">
        <div class="panel panel-primary widget">
            <div class="panel-heading">
                <h3 class="panel-title">Follow</h3>
                <span class="label label-info">78</span>
            </div>
            <div class="panel-body">
                <ul class="list-group">
                    <li class="list-group-item">
                        <div class="row">
                        	<div class="col-xs-4 col-sm-4">
                            	<img src="http://placehold.it/80" class="img-circle img-responsive" alt="" />
                            </div>
                            <div class="col-xs-8 col-sm-8">
                            	<div class="text-menu-tab">
                                	<a href="#">Sealinkk Sealinkk</a>
                                    	<div class="mic-info">
                                        	<p>Rank : Master</p>
                                    	</div>
                                </div>
                                <div class="action">
                                	<button type="button" class="btn btn-addfriend btn-xs">
                                   		<span class="fa fa-user-plus"></span>
                                        <span>Add Friend</span>
                                    </button>
                                    <button type="button" class="btn btn-follow btn-xs">
                                    	<span class="fa fa-plus"></span>
                                        <span>Follow</span>
                                    </button>
                                    <div class="far-btn-meassge">
                                    	<button type="button" class="btn btn-meassge btn-xs">
                                        	<span class="fa fa-comments-o"></span>
                                        	<span>Meassge</span>
                                    	</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                    	<div class="row">
                        	<div class="col-xs-4 col-sm-4">
                            	<img src="http://placehold.it/80" class="img-circle img-responsive" alt="" />
                            </div>
                            <div class="col-xs-8 col-sm-8">
                            	<div class="text-menu-tab">
                                	<a href="#">Sealinkk Sealinkk</a>
                                    <div class="mic-info">
                                        <p>Rank : Master</p>
                                    </div>
                                </div>
                                <div class="action">
                                    <button type="button" class="btn btn-addfriend btn-xs">
                                        <span class="fa fa-user-plus"></span>
                                        <span>Add Friend</span>
                                    </button>
                                    <button type="button" class="btn btn-follow btn-xs">
                                        <span class="fa fa-plus"></span>
                                        <span>Follow</span>
                                    </button>
                                    <div class="far-btn-meassge">
                                    <button type="button" class="btn btn-meassge btn-xs">
                                        <span class="fa fa-comments-o"></span>
                                        <span>Meassge</span>
                                    </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="row">
                            <div class="col-xs-4 col-sm-4">
                                <img src="http://placehold.it/80" class="img-circle img-responsive" alt="" />
                            </div>
                            <div class="col-xs-8 col-sm-8">
                                <div class="text-menu-tab">
                                    <a href="#">Sealinkk Sealinkk</a>
                                    <div class="mic-info">
                                        <p>Rank : Master</p>
                                    </div>
                                </div>
                                <div class="action">
                                    <button type="button" class="btn btn-addfriend btn-xs">
                                        <span class="fa fa-user-plus"></span>
                                        <span>Add Friend</span>
                                    </button>
                                    <button type="button" class="btn btn-follow btn-xs">
                                        <span class="fa fa-plus"></span>
                                        <span>Follow</span>
                                    </button>
                                    <div class="far-btn-meassge">
                                    <button type="button" class="btn btn-meassge btn-xs">
                                        <span class="fa fa-comments-o"></span>
                                        <span>Meassge</span>
                                    </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <a href="#" class="btn btn-primary btn-sm btn-block showall"><span class="glyphicon glyphicon-refresh"></span> More</a>
            </div>
        </div>
    </div>
</div>
 
ปล. อยากให้โชว์เป็นบล๊อกๆเฉพาะข้างในอ่ะค่ะ 


Chickenkook 25-10-2016 15:49:00

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
ลองโค้ดประมาณนี้เป็นแนวทาง

<div class="far-content-profile">
    <div class="row">
        <div class="panel panel-primary widget">
            <div class="panel-heading">
                <h3 class="panel-title">Follow</h3>
                <span class="label label-info">78</span>
            </div>
            <div class="panel-body">
                <ul class="list-group">
                
   					<?php for($i=1;$i<=20;$i++){?>
                    <li class="list-group-item <?=($i>5)?"hidden":""?>">
                    	<div class="row">
                        	<div class="col-xs-4 col-sm-4">
                            	<img src="http://placehold.it/80" class="img-circle img-responsive" alt="" />
                            </div>
                            <div class="col-xs-8 col-sm-8">
                            	<div class="text-menu-tab">
                                	<a href="#">Sealinkk Sealinkk</a>
                                    <div class="mic-info">
                                        <p>Rank : Master</p>
                                    </div>
                                </div>
                                <div class="action">
                                    <button type="button" class="btn btn-addfriend btn-xs">
                                        <span class="fa fa-user-plus"></span>
                                        <span>Add Friend</span>
                                    </button>
                                    <button type="button" class="btn btn-follow btn-xs">
                                        <span class="fa fa-plus"></span>
                                        <span>Follow</span>
                                    </button>
                                    <div class="far-btn-meassge">
                                    <button type="button" class="btn btn-meassge btn-xs">
                                        <span class="fa fa-comments-o"></span>
                                        <span>Meassge</span>
                                    </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
				<?php } ?>
                
                </ul>
                <a href="javascript:load_more();" class="btn btn-primary btn-sm btn-block showall"><span class="glyphicon glyphicon-refresh"></span> More</a>
            </div>
        </div>
    </div>
</div>
</div>        
    
<script type="text/javascript">
var load_more = function(){
	var hidden_list = $(".list-group-item:hidden").length;
	if(hidden_list>5){
		$(".list-group-item:hidden:lt(5)").removeClass("hidden");
	}else{
		$(".refresh").remove();
		$(".showall").text("More less");
	}

}
</script>


ninenik 25-10-2016
 ความคิดเห็นที่ 2
พี่นิคค่ะ หนูรบกวนอีกรอบค่ะ คือหนูทำแล้วดัดแปลงแล้ว มันก็ยังไม่ยอมขึ้น More less ให้อ่ะค่ะ หนูเอา  .refresh ใส่ไปเพิ่มตรง .list-group-item ตามที่เข้าใจในการอ่านโค้ดอ่ะค่ะพี่ แต่มันก็ยังไม่มาและโชว์อ่ะค่ะพี่ รบกวนด้วยนะค่ะ 




chickenkook 26-10-2016 17:19
 ความคิดเห็นที่ 3
ตัวอย่างโค้ดเป็นแค่แนวทาง
ใช้วิธีดึงรายการมาทั้งหมด ในครั้งเดียว แล้วแสดงเฉพาะ 5 รายการแรก
รายการที่เหลือใช้วิธี ซ่อนเอาไว้ ใน bootstrap มี css class ที่ชื่อ hidden
พอกำหนดเข้าไปทำให้รายการนั้นถูกซ่อน
 
โค้ดตัวอย่างใช้วิธีกำหนดลูป for แล้วใช้ตัวแปร $i นับว่าเป็นตัวที่เท่าไหร่
ถ้าใช้ while ก็อาจจะต้องกำหนดตัวแปร ก่อน while

<ul>
<?php
$i=0;
while(.....)
	$i++;
?>
<li class="<?=($i>5)?"hidden":""?>"></li>
<?php } ?>
</ul>


โค้ดคือตั้งแต่ $i ที่มากกว่า 5 ให้ซ่อนไว้ก่อน
 
ส่วนวิธีการแสดงก็เป็นการเรียกใข้ฟังก์่นอย่างง่าย
คำอธิบายในโค้ด

<script type="text/javascript">
// เมื่อเรียกใชืฟังก์ชั่น
var load_more = function(){
	// สร้างตัวแปร รับค่า ว่า list ที่มี css class ชื่อ list-group-item ที่ถูกซ่อนอยู่มีกี่่รายการ
	// สมมติทั้งหมดมี 20 แสดง 5 ตอนเริ่มต้น ซ่อนอยู่ก็คือ 15
	var hidden_list = $(".list-group-item:hidden").length;
//	console.log(hidden_list); // ไว้ debug หรือ เช็คจำนวน
	if(hidden_list>5){ // เมื่อเราแสดงครั้งละ 5 ถ้าซ่อนอยู่มากกว่า 5
		// ให้ list ที่มี css class ชื่อ list-group-item ที่ถูกซ่อนอยู่ ตั้งแต่ตัวแรกถึงตัวที่ 5 แสดง 
		// โดยเอา class hidden ออก
		$(".list-group-item:hidden:lt(5)").removeClass("hidden");
	}else{ // สมมติแสดงมาทั้งหมด ถึง 15 ตัวแล้ว ก็จะเหลืออีก <=5
		// แสดงรายการที่เหลือทั้งหมด
		$(".list-group-item:hidden:lt(5)").removeClass("hidden");		
		$(".showall").text("More less"); // ให้ข้อความในแท็ก a ที่มี class ชื่อ showall เปลี่ยนเป็น More less
	}

}
</script>


ตัวอย่าง

Follow

78
More


 


ninenik 26-10-2016
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2024 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ