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

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

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

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

by Before Dong » 24/07/2017 12:07 pm

tsukasaz wrote:

Code: Select all

<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

Code: Select all

<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

Code: Select all

<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 ก็จะได้ตามรูป
Image

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

by tsukasaz » 24/07/2017 11:43 am

Code: Select all

<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

Code: Select all

<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

Code: Select all

<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 ไปยังตำแหน่งในรูปภาพ ย้ายยังไงครับ

by Before Dong » 24/07/2017 10:50 am

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




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


Code HTML

Code: Select all

<!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

Code: Select all

#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{

}

Top