การใช้งาน grids เพื่อแสดงเป็นคอลัมน์ ด้วย jQuery Mobile ตอนที่ 6

03 April 2014 เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee

jquery mobile

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery mobile

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

grids ใน jQuery Mobile มีลักษณะ ความกว้าง 100% ไม่มีขอบ

สามารถกำหนด จำนวน คอลัมน์ ได้ไม่เกิน 5 คอลัมน์ โดยใช้รูปแบบ

เบื้องต้นดังนี้

เพิ่ม คลาส ui-grid- ต่อด้วย solo / a / b / c / d /

โดยจำนวนคอลัมน์ จะเท่ากับ 1 / 2 / 3 / 4 / 5 ตามลำดับ

โค้ด

<!--	สำหรับแสดง 1 คอลัมน์-->
    <div class="ui-grid-solo">
    </div><!-- /grid-solo -->        

<!--	สำหรับแสดง 2 คอลัมน์-->
    <div class="ui-grid-a">
    </div><!-- /grid-a -->

<!--	สำหรับแสดง 3 คอลัมน์-->
    <div class="ui-grid-b">
    </div><!-- /grid-b -->

<!--	สำหรับแสดง 4 คอลัมน์    -->
    <div class="ui-grid-c">
    </div><!-- /grid-c -->

<!--	สำหรับแสดง 5 คอลัมน์    -->
    <div class="ui-grid-d">
    </div><!-- /grid-d -->

เมื่อได้ในส่วนของ เงื่อนไขว่า ต้องการแสดง กี่คอลัมน์

ส่วนต่อไป คือส่วนของ บล็อกคอลัมน์ ต้องมีจำนวน ตาม การกำหนดคอลัมน์ก่อนหน้า

โดยใช้ คลาส ui-block- ต่อด้วย a / b / c / d / e

ซึ่งก็คือ บล็อกที่ 1 / 2 / 3 / 4 / 5 ตามลำดับ

โค้ด

       <div class="ui-grid-solo">
            <div class="ui-block-a">A</div>
        </div><!-- /grid-solo -->
    
        <br>
    
        <div class="ui-grid-a">
            <div class="ui-block-a">A</div>
            <div class="ui-block-b">B</div>
        </div><!-- /grid-a -->
        
        <br>
        
        <div class="ui-grid-b">
            <div class="ui-block-a">A</div>
            <div class="ui-block-b">B</div>
            <div class="ui-block-c">C</div>
        </div><!-- /grid-b -->    
        
        <br>
        
        <div class="ui-grid-c">
            <div class="ui-block-a">A</div>
            <div class="ui-block-b">B</div>
            <div class="ui-block-c">C</div>
            <div class="ui-block-d">D</div>        
        </div><!-- /grid-c -->        
        
        <br>
        
        <div class="ui-grid-d">
            <div class="ui-block-a">A</div>
            <div class="ui-block-b">B</div>
            <div class="ui-block-c">C</div>
            <div class="ui-block-d">D</div>       
            <div class="ui-block-d">e</div>     
        </div><!-- /grid-c -->            
        
        <br>

กรณีต้องการให้ grids แสดงมากกว่า 1 แถว

ให้เราเพิ่ม ชุดของจำนวน คอลัมน์ เพิ่มเข้าไป

ตัวอย่าง โค้ดด้านล่าง แสดง 2 คอลัมน์ 1 แถว

        <div class="ui-grid-a">
            <div class="ui-block-a">A</div>
            <div class="ui-block-b">B</div>  
        </div><!-- /grid-a -->

หากต้องการแถวที่สอง ให้ คัดลอก ชุดคอลัมน์ เพิ่มเข้าไป ได้ดังนี้

        <div class="ui-grid-a">
            <div class="ui-block-a">A</div>
            <div class="ui-block-b">B</div>
            <div class="ui-block-a">C</div>
            <div class="ui-block-b">D</div>        
        </div><!-- /grid-a -->

ตัวอย่างแสดงให้เห็นภาพ เราจะแทรกรูปภาพ เข้าไปใน แต่ละคอลัมน์

โดยกำหนดให้ขนาดรูปภาพมีความกว้าง 100%

โค้ดเกที่ยวกับ grids

<!DOCTYPE html> 
<html>
<head>
	<title>ใส่ไตเติล ตามใจชอบ</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="js/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
</head>

<body>

<!-- Start of  page HOME  -->
<div data-role="page" id="page_home">

	<div data-role="header" data-position="fixed">
    	<a href="#left_panel" class="ui-btn ui-shadow ui-corner-all ui-icon-bars ui-btn-icon-notext">Bars</a>
		<h1>Home</h1>
        
        <div data-role="navbar" >  
            <ul>  
                <li><a href="#" class="ui-btn-active"  data-icon="heart">เมนู 1</a></li>  
                <li><a href="#" data-icon="calendar">เมนู 2</a></li>  
                <li><a href="#" data-icon="audio">เมนู 3</a></li>  
                <li><a href="#" data-icon="alert">เมนู 4</a></li>  
                <li><a href="#" data-icon="gear">เมนู 5</a></li>  
            </ul>  
        </div><!-- /navbar -->            
	</div><!-- /header -->

	<div data-role="content">

      <div class="ui-grid-solo">
            <div class="ui-block-a"><img src="images/pic1.jpg" style="width:100%;" /></div>
        </div><!-- /grid-solo -->
    
        <br>
    
        <div class="ui-grid-a">
            <div class="ui-block-a"><img src="images/pic1.jpg" style="width:100%;" /></div>
            <div class="ui-block-b"><img src="images/pic1.jpg" style="width:100%;" /></div>
        </div><!-- /grid-a -->
        
        <br>
        
        <div class="ui-grid-b">
            <div class="ui-block-a"><img src="images/pic1.jpg" style="width:100%;" /></div>
            <div class="ui-block-b"><img src="images/pic1.jpg" style="width:100%;" /></div>
            <div class="ui-block-c"><img src="images/pic1.jpg" style="width:100%;" /></div>
        </div><!-- /grid-b -->    
        
        <br>
        
        <div class="ui-grid-c">
            <div class="ui-block-a"><img src="images/pic1.jpg" style="width:100%;" /></div>
            <div class="ui-block-b"><img src="images/pic1.jpg" style="width:100%;" /></div>
            <div class="ui-block-c"><img src="images/pic1.jpg" style="width:100%;" /></div>
            <div class="ui-block-d"><img src="images/pic1.jpg" style="width:100%;" /></div>        
        </div><!-- /grid-c -->        
        
        <br>
        
        <div class="ui-grid-d">
            <div class="ui-block-a"><img src="images/pic1.jpg" style="width:100%;" /></div>
            <div class="ui-block-b"><img src="images/pic1.jpg" style="width:100%;" /></div>
            <div class="ui-block-c"><img src="images/pic1.jpg" style="width:100%;" /></div>
            <div class="ui-block-d"><img src="images/pic1.jpg" style="width:100%;" /></div>       
            <div class="ui-block-d"><img src="images/pic1.jpg" style="width:100%;" /></div>     
        </div><!-- /grid-c -->            
        
        <br>
        
        <div class="ui-grid-a">
            <div class="ui-block-a"><img src="images/pic1.jpg" style="width:100%;" /></div>
            <div class="ui-block-b"><img src="images/pic1.jpg" style="width:100%;" /></div>
            <div class="ui-block-a"><img src="images/pic1.jpg" style="width:100%;" /></div>
            <div class="ui-block-b"><img src="images/pic1.jpg" style="width:100%;" /></div>
        </div><!-- /grid-a -->    

		<hr />

       <div class="ui-grid-solo">
            <div class="ui-block-a">A</div>
        </div><!-- /grid-solo -->
    
        <br>
    
        <div class="ui-grid-a">
            <div class="ui-block-a">A</div>
            <div class="ui-block-b">B</div>
        </div><!-- /grid-a -->
        
        <br>
        
        <div class="ui-grid-b">
            <div class="ui-block-a">A</div>
            <div class="ui-block-b">B</div>
            <div class="ui-block-c">C</div>
        </div><!-- /grid-b -->    
        
        <br>
        
        <div class="ui-grid-c">
            <div class="ui-block-a">A</div>
            <div class="ui-block-b">B</div>
            <div class="ui-block-c">C</div>
            <div class="ui-block-d">D</div>        
        </div><!-- /grid-c -->        
        
        <br>
        
        <div class="ui-grid-d">
            <div class="ui-block-a">A</div>
            <div class="ui-block-b">B</div>
            <div class="ui-block-c">C</div>
            <div class="ui-block-d">D</div>       
            <div class="ui-block-d">e</div>     
        </div><!-- /grid-c -->            
        
        <br>
        
        <div class="ui-grid-a">
            <div class="ui-block-a">A</div>
            <div class="ui-block-b">B</div>
            <div class="ui-block-a">C</div>
            <div class="ui-block-b">D</div>        
        </div><!-- /grid-a -->    

    
	</div><!-- /content -->
    
    <div data-role="panel" id="left_panel" data-display="push">
        <ul data-role="listview" data-icon="false"  data-divider-theme="a">
            <li data-role="list-divider">หัวข้อแบ่ง</li>
            <li><a href="#">เมนูที่ 1</a></li>
            <li><a href="#">เมนูที่ 2</a></li>
            <li><a href="#">เมนูที่ 3</a></li>
            <li><a href="#">เมนูที่ 4</a></li>            
            <li data-role="list-divider">หัวข้อแบ่ง</li>
            <li><a href="#">เมนูที่ 6</a></li>
            <li><a href="#">เมนูที่ 7</a></li>
        </ul>
    </div><!-- /panel -->        

	<div data-role="footer" data-position="fixed">
		<h4>ส่วน  footer ใส่ตามใจชอบ</h4>
	</div><!-- /footer -->

</div><!-- /page -->

</body>
</html>

ดาวน์โหลดโค้ดตัวอย่าง

http://www.ninenik.com/demo/jqmobile/jqmobile_6.rar

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

Tags:: jquery mobile

URL สำหรับอ้างอิง

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน