อยากย้าย Component ไปยังตำแหน่งในรูปภาพ ย้ายยังไงครับ

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ
BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด
กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: อยากย้าย Component ไปยังตำแหน่งในรูปภาพ ย้ายยังไงครับ

Re: อยากย้าย Component ไปยังตำแหน่งในรูปภาพ ย้ายยังไงครับ

โดย Before Dong » 24/07/2017 12:07 pm

tsukasaz เขียน:

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

<div class="container" id="maincontent">
                <div class="span2" > <jdoc:include type="modules" name="left" style="xhtml"/></div>
                 <div class="span10" >
                    <div >
                       <jdoc:include type="message" />
                       <jdoc:include type="component" />
                   </div>
              </div>
          </div>
จากโค้ดจะแบ่งการแสดงเป็น 2 ส่วน ตาม grid ของ bootstrap เป็น span2 กับ span10

ซึ่งในตำแหน่ง left ที่เป็น span2 อาจจะไม่ได้กำหนดให้แสดงทุกหน้า ซึ่งอาจจะทำให้บางหน้าเกิดช่องว่างทางซ้ายได้

เพราะฉะนั้นใน template เราจะต้องใช้เงื่อนไขในการกำหนดขนาด

เช่น ถ้าไม่มีตำแหน่ง left ที่เป็น span2 ให้ตำแหน่ง component ที่เป็น span10 ปรับเป็น span12 แทน เพื่อให้มันแสดงเต็มจอ

ก่อนอื่นกำหนดเงื่อนไขให้กับตำแหน่ง left คือไม่มีการแสดงในตำแหน่ง left ก็จะไม่แสดง span2

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

<div class="container" id="maincontent">
		<?php if ($this->countModules('left')) : ?>
			<div class="span2" > <jdoc:include type="modules" name="left" style="xhtml"/></div>
		<?php endif; ?>
		<div class="span10" >
			<div >
				<jdoc:include type="message" />
				<jdoc:include type="component" />
			</div>
		</div>
	</div>

จากนั้นกำหนดเงื่อนไขให้กับตำแหน่ง component คือไม่มีการแสดงในตำแหน่ง left ก็จะแสดง span12 ถ้ามีจะแสดง span10

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

<div class="container" id="maincontent">
		<?php if ($this->countModules('left')) : ?>
			<div class="span2" > <jdoc:include type="modules" name="left" style="xhtml"/></div>
		<?php endif; ?>
		<div class="<?php echo ($this->countModules('left')) ? 'span10' : 'span12' ; ?>" >
			<div >
				<jdoc:include type="message" />
				<jdoc:include type="component" />
			</div>
		</div>
	</div>

พอกำหนดเงื่อนไขให้กับ Modules left ก็จะได้ตามรูป
รูปภาพ

Re: อยากย้าย Component ไปยังตำแหน่งในรูปภาพ ย้ายยังไงครับ

โดย tsukasaz » 24/07/2017 11:43 am

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

<div class="container" id="maincontent">
                <div class="span2" > <jdoc:include type="modules" name="left" style="xhtml"/></div>
                 <div class="span10" >
                    <div >
                       <jdoc:include type="message" />
                       <jdoc:include type="component" />
                   </div>
              </div>
          </div>
จากโค้ดจะแบ่งการแสดงเป็น 2 ส่วน ตาม grid ของ bootstrap เป็น span2 กับ span10

ซึ่งในตำแหน่ง left ที่เป็น span2 อาจจะไม่ได้กำหนดให้แสดงทุกหน้า ซึ่งอาจจะทำให้บางหน้าเกิดช่องว่างทางซ้ายได้

เพราะฉะนั้นใน template เราจะต้องใช้เงื่อนไขในการกำหนดขนาด

เช่น ถ้าไม่มีตำแหน่ง left ที่เป็น span2 ให้ตำแหน่ง component ที่เป็น span10 ปรับเป็น span12 แทน เพื่อให้มันแสดงเต็มจอ

ก่อนอื่นกำหนดเงื่อนไขให้กับตำแหน่ง left คือไม่มีการแสดงในตำแหน่ง left ก็จะไม่แสดง span2

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

<div class="container" id="maincontent">
		<?php if ($this->countModules('left')) : ?>
			<div class="span2" > <jdoc:include type="modules" name="left" style="xhtml"/></div>
		<?php endif; ?>
		<div class="span10" >
			<div >
				<jdoc:include type="message" />
				<jdoc:include type="component" />
			</div>
		</div>
	</div>

จากนั้นกำหนดเงื่อนไขให้กับตำแหน่ง component คือไม่มีการแสดงในตำแหน่ง left ก็จะแสดง span12 ถ้ามีจะแสดง span10

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

<div class="container" id="maincontent">
		<?php if ($this->countModules('left')) : ?>
			<div class="span2" > <jdoc:include type="modules" name="left" style="xhtml"/></div>
		<?php endif; ?>
		<div class="<?php echo ($this->countModules('left')) ? 'span10' : 'span12' ; ?>" >
			<div >
				<jdoc:include type="message" />
				<jdoc:include type="component" />
			</div>
		</div>
	</div>

อยากย้าย Component ไปยังตำแหน่งในรูปภาพ ย้ายยังไงครับ

โดย Before Dong » 24/07/2017 10:50 am

หน้าเมนู Product พอแบ่งตำแหน่งเป็น span2 กับ span10 มันจะทำให้ตำแหน่งในหน้าอื่นเลื่อน
รูปภาพ




มีวิธีที่ทำให้หน้าอื่นใน span 10 เลื่อนไปชิดซ้ายใน span 2 ไหมครับ
รูปภาพ


Code HTML

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

<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
	<link rel="stylesheet" href="user.css" />
	<meta name=viewport content="width=device-width, initial-scale=1">
	<jdoc:include type="head" />
</head>
<body id="page_bg">		
		<div class="container" id="con-border-logo">
				<div class="container">
					<div class="col-sm-10" id="center_div_top" > <jdoc:include type="modules" name="top" style="xhtml"/> </div>
				</div>
						
					<img src="http://snap.mindphp.com/index.php?view=2017Jul22_59731b8dd3e2b">
          
					<div class="container" >
					<div class="col-md-12">
						<div  id="center_div">
                                <nav class="navigation" role="navigation">
                        <div class="navbar pull-left">
                            <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
                                <span class="element-invisible"><?php echo JTEXT::_('TPL_PROTOSTAR_TOGGLE_MENU'); ?></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </a>
                        </div>
                        <div class="nav-collapse">
                            <jdoc:include type="modules" name="user3" style="xhtml"/>
                        </div>
                    </nav>
						
						 </div>
						 
					</div>
				</div>	
          				
					<div class="container">
						<div class="span12"></div>
					</div>				
		</div>
		
		<div class="container" id="con-border">

			<div class="container" id="div_bread">
				<div class="span12">  <jdoc:include type="modules" name="breadcrumb" style="xhtml"/> </div>
			</div>
			
          
			<div class="container" id="maincontent">
                <div class="span2" > <jdoc:include type="modules" name="left" style="xhtml"/></div>
              
                 <div class="span10" >
           			<div > 
              			<jdoc:include type="message" />
             			 <jdoc:include type="component" />
         			 </div>
              </div>

 			</div>
          
			<div class="container" id="div_right">
				<div class="span12" ><jdoc:include type="modules" name="right" style="xhtml"/></div>
			</div>
			
			
			
				<div class="container" >
					<div class="col-md-12" id="div_foot">
						<jdoc:include type="modules" name="footer" style="xhtml"/>
					</div>
                    </div>                                                             
				</div>		
		
		</div>
		
		
		
		<div class="footer">
			<jdoc:include type="modules" name="debug" style="xhtml"/>
		</div>
		
</body>
</html>
CODE CSS

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

#con-border-logo{
margin-top:25px;
height:90px;
background: linear-gradient(#f5f5f5, #ebebeb); /* Standard syntax */
border-radius:10px 10px 0px 0px;

border-color: white;
border-width: 5px;
border-style: solid;
}
#con-border{
margin-top:0px;
background: linear-gradient(#f5f5f5, #ebebeb); /* Standard syntax */
padding-top: 5px;
border-color: white;
border-width: 5px;
border-style: solid;
border-radius:0px 0px 10px 10px;
margin-bottom:30px;
}
#col-right{
float: center;
}

#center_div {
width:100%;

}



.li-color{
display:block;

}

#center_div_top{


}

#div_foot{

}


#page_bg {
    background: #0C3A6D
}
#div_content{
margin-top:300px;
}
ul.nav.menu.nav-pills {
    border-radius: 5px;
    background-color: white;
    height: 30px;
    margin-top: 0;
    border-radius: 15px;
    line-height: 20px;
    margin-left: 23%;
    float: left;
    background: #fff;
  box-shadow: 0px 2px 10px -2px rgba(0,0,0,0.48);
}



div#maindivider {
    margin-bottom: 10px;
    overflow: hidden;
}

#maincontent{
 border-style: solid;
 border-color: #ebebeb;
 background:white;
  border-width: 1px;
}

#maincontent > .span10{
 margin-left:0px;
}

div.moduletable {

}

.nav {
    margin-left: 0;
    list-style: none;
}

.navigation{

}

ข้างบน