GORAGOD.com

freelance, web developer, web designer, hosting, domain name

Menu List 2ชั้น ชั้นที่ 2คิวรี่ ข้อมูลออกมาไม่ครบครับ!!


นี่ Code แบบ Static นะครับ



 



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

  <!--Make sure your page contains a valid doctype at the very top-->



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>



<script type="text/javascript">

 function drilldownmenu(setting){

  this.sublevelarrow={src:'image/blank.png', width:'8px', top:'3px', left:'40px'} //full URL to image used to indicate there's a sub level

  this.breadcrumbarrow='../image/blank.png' //full URL to image separating breadcrumb links (if it's defined)

  this.loadingimage='loader.gif' //full URL to 'loading' image, if menu is loaded via Ajax

  this.homecrumbtext='Home Dir' //Top level crumb text

  this.titlelength=35 //length of parent LI text to extract from to use as crumb titles

  this.backarrow='image/undo.png' //full URL to image added in front of back LI



  ////////// No need to edit beyond here /////////////

  this.menuid=setting.menuid

  this.$menudiv=null

  this.mainul=null

  this.$uls=null

  this.navdivs={}

  this.menuheight=setting.menuheight || 'auto'

  this.selectedul=setting.selectedul || null

  this.speed=setting.speed || 70

  this.persist=setting.persist || {enable: false, overrideselectedurl: false}

  this.$arrowimgs=null

  this.currentul=0

  this.filesetting=setting.filesetting || {url: null, targetElement: null}

  this.zIndexvalue=100

  this.arrowposx=0 //default arrow x position relative to parent LI

  var thisdrill=this

  jQuery.noConflict()

  jQuery(document).ready(function($){

   if (thisdrill.filesetting.url && thisdrill.filesetting.url.length>0){ //menu defined inside external file (use Ajax)?

    var $dest=(typeof thisdrill.filesetting.targetElement=="string")? $('#'+thisdrill.filesetting.targetElement) : null

    if (!$dest || $dest.length!=1){ //if target element isn't defined or multiple targets found

     alert("Error: The target element \"" + thisdrill.filesetting.targetElement + "\" to add the menu into doesn't exist or is incorrectly specified.")

     return

    }

    $dest.html('<img src="'+thisdrill.loadingimage+'" style="vertical-align:middle" /> <b>Loading Drill Down Menu...</b>')

    $.ajax({

     url: thisdrill.filesetting.url,

     error:function(ajaxrequest){

      alert('Error fetching Ajax content.\nServer Response: '+ajaxrequest.responseText)

     }, //end error

     success:function(content){

      $dest.html(content)

      thisdrill.init($, setting)

     } //end success

    }) //end ajax

   }

   else{ //if inline menu

    thisdrill.init($, setting)

   }

  }) //end document.ready

 }



 drilldownmenu.prototype.init=function($, setting){

   var thisdrill=this

   var $maindiv=$('#'+setting.menuid).css({position:'relative'}) //relative position main DIV

   var $uls=$maindiv.find('ul')

   $uls.css({position:'absolute', left:0, top:0, visibility:'hidden'}) //absolutely position ULs

   this.$maindiv=$maindiv

   this.$uls=$uls

   this.navdivs.$crumb=$('#'+setting.breadcrumbid)

   this.navdivs.$backbuttons=$('a[rel^="drillback-'+setting.menuid+'"]').css({outline:'none'}).click(function(e){

    thisdrill.back()

    e.preventDefault()

   })

   this.buildmenu($)

   $(window).bind('unload', function(){

    thisdrill.uninit()

   })

   setting=null 

 }



 drilldownmenu.prototype.buildmenu=function($){

  var thisdrill=this

  this.$uls.each(function(i){ //loop through each UL

   var $thisul=$(this)

   if (i==0){ //if topmost UL

    $('<li class="backcontroltitle"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Brands -•</li>').prependTo($thisul).click(function(e){e.preventDefault()})

    thisdrill.$maindiv.css({height:(thisdrill.menuheight=='auto')? $thisul.outerHeight() : parseInt(thisdrill.menuheight), overflow:'hidden'}) //set main menu DIV's height to top level UL's height

     .data('h', parseInt(thisdrill.$maindiv.css('height')))

    

   }

   else{ //if this isn't the topmost UL

    var $parentul=$thisul.parents('ul:eq(0)')

    var $parentli=$thisul.parents('li:eq(0)')

    $('<li class="backcontrol"><img src="'+thisdrill.backarrow+'" style="border-width:0" /> Choose Brand</li>') //add back LI item

     .click(function(e){thisdrill.back(); e.preventDefault()})

     .prependTo($thisul)

    var $anchorlink=$parentli.children('a:eq(0)').css({outline:'none'}).data('control', {order:i}) //remove outline from anchor links

    var $arrowimg=$('<img class="arrowclass" />').attr('src', thisdrill.sublevelarrow.src).css({position:'absolute', borderWidth:0, paddingTop:thisdrill.sublevelarrow.top, left:$parentli.width()-parseInt(thisdrill.sublevelarrow.width)-parseInt(thisdrill.sublevelarrow.left)}).prependTo($anchorlink)

    $anchorlink.click(function(e){ //assign click behavior to anchor link

     thisdrill.slidemenu(jQuery(this).data('control').order)

     e.preventDefault()

    })

   }

   var ulheight=($thisul.outerHeight() < thisdrill.$maindiv.data('h'))? thisdrill.$maindiv.data('h') : 'auto'

   $thisul.css({visibility:'visible', width:'100%', height:ulheight, left:(i==0)? 'auto' : $parentli.outerWidth(), top:0})

   $thisul.data('specs', {w:$thisul.outerWidth(), h:$thisul.outerHeight(), order:i, parentorder:(i==0)? -1 : $anchorlink.parents('ul:eq(0)').data('specs').order, x:(i==0)? $thisul.position().left : $parentul.data('specs').x+$parentul.data('specs').w, title:(i==0)? thisdrill.homecrumbtext : $parentli.find('a:eq(0)').text().substring(0, thisdrill.titlelength)})

  }) //end UL loop

  var selectedulcheck=this.selectedul && document.getElementById(this.selectedul) //check if "selectedul" defined, plus if actual element exists

  this.$arrowimgs=this.$maindiv.find('img.arrowclass')

  this.arrowposx=parseInt(this.$arrowimgs.eq(0).css('left')) //get default x position of arrow

  if (window.opera)

   this.$uls.eq(0).css({zIndex: this.zIndexvalue}) //Opera seems to require this in order for top level arrows to show

  if (this.persist.enable && (this.persist.overrideselectedul || !this.persist.overrideselectedul && !selectedulcheck) && drilldownmenu.routines.getCookie(this.menuid)){ //go to last persisted UL?

   var ulorder=parseInt(drilldownmenu.routines.getCookie(this.menuid))

   this.slidemenu(ulorder, true)

  }

  else if (selectedulcheck){ //if "selectedul" setting defined, slide to that UL by default

   var ulorder=$('#'+this.selectedul).data('specs').order

   this.slidemenu(ulorder, true)

  }

  else{

   this.slidemenu(0, true)

  }

  this.navdivs.$crumb.click(function(e){ //assign click behavior to breadcrumb div

   if (e.target.tagName=="A"){

    var order=parseInt(e.target.getAttribute('rel'))

    if (!isNaN(order)){ //check link contains a valid rel attribute int value (is anchor link)

     thisdrill.slidemenu(order)

     e.preventDefault()

    }

   }

  })

 }



 drilldownmenu.prototype.slidemenu=function(order, disableanimate){

  var order=isNaN(order)? 0 : order

  this.$uls.css({display: 'none'})

  var $targetul=this.$uls.eq(order).css({zIndex: this.zIndexvalue++})

  $targetul.parents('ul').andSelf().css({display: 'block'})

  this.currentul=order

  if ($targetul.data('specs').h > this.$maindiv.data('h')){

   this.$maindiv.css({overflowY:'hidden'}).scrollTop(0)

   this.$arrowimgs.css('left', this.arrowposx-15) //adjust arrow position if scrollbar is added

  }

  else{

   this.$maindiv.css({overflowY: 'hidden'}).scrollTop(0)

   this.$arrowimgs.css('left', this.arrowposx)

  }

  this.updatenav($, order)

  this.$uls.eq(0).animate({left:-$targetul.data('specs').x}, typeof disableanimate!="undefined"? 0 : this.speed)

 }



 drilldownmenu.prototype.back=function(){

  if (this.currentul>0){

   var order=this.$uls.eq(this.currentul).parents('ul:eq(0)').data('specs').order

   this.slidemenu(order)

  }

 }



 drilldownmenu.prototype.updatenav=function($, endorder){

  var $currentul=this.$uls.eq(endorder)

  if (this.navdivs.$crumb.length==1){ //if breadcrumb div defined

   var $crumb=this.navdivs.$crumb.empty()

   if (endorder>0){ //if this isn't the topmost UL (no point in showing crumbs if it is)

    var crumbhtml=''

    while ($currentul && $currentul.data('specs').order>=0){

     crumbhtml=' <img src="'+this.breadcrumbarrow+'" /> <a href="#nav" rel="'+$currentul.data('specs').order+'">'+$currentul.data('specs').title+'</a>'+crumbhtml

     $currentul=($currentul.data('specs').order>0)? this.$uls.eq($currentul.data('specs').parentorder) : null

    }

    $crumb.append(crumbhtml).find('img:eq(0)').remove().end().find('a:last').replaceWith(this.$uls.eq(endorder).data('specs').title) //remove link from very last crumb trail

   }

   else{

    $crumb.append(this.homecrumbtext)

   }

  }

  if (this.navdivs.$backbuttons.length>0){ //if back buttons found

   if (!/Safari/i.test(navigator.userAgent)) //exclude Safari from button state toggling due to bug when the button is an image link

    this.navdivs.$backbuttons.css((endorder>0)? {opacity:1, cursor:'pointer'} : {opacity:0.5, cursor:'default'})

  }

 }



 drilldownmenu.prototype.uninit=function(){

  if (this.persist.enable)

   drilldownmenu.routines.setCookie(this.menuid, this.currentul)

 }



 drilldownmenu.routines={



  getCookie:function(Name){

   var re=new RegExp(Name+"=[^;]*", "i"); //construct RE to search for target name/value pair

   if (document.cookie.match(re)) //if cookie found

    return document.cookie.match(re)[0].split("=")[1] //return its value

   return null

  },



  setCookie:function(name, value){

   docume nt.cookie = name+"="+value+"; path=/"

  }



 }

</script>



<script type="text/javascript">

 var mymenu=new drilldownmenu({

  menuid: 'drillmenu1',

  menuheight: 'auto',

  breadcrumbid: 'drillcrumb',

  persist: {enable: true, overrideselectedul: true}

 })

</script>



<style>

 .drillmenu{ /* main DIV container of menu */

 border: 1px dotted yellow;

 width: 130px; /*width of menu*/

 height: 190px; /*Height of DIV for those with JavaScript disabled*/

 overflow-y: scroll; /*Scrollable DIV for those with JavaScript disabled*/

 background: silver; /*background of menu.*/

 overflow-y: scroll; border:2 #000000 dotted;

 padding: 2px; scrollbar-arrow-color:yellow;scrollbar-face-color:#505050;scrollbar-highlight-color:#333333;

 scrollbar-3dlight-color:#333333;scrollbar-track-color:#333333;scrollbar-shadow-color:#333333;scrollbar-darkshadow-color:#333333; background-color:black;

 background:url(../image/Frame.png) repeat-y;

 }



 .drillmenu ul{ /*menu ULs*/

 font: normal 13px Verdana;

 margin: 0;

 padding: 0;

 list-style-type: none;

 width: 130px;

 margin-left:15px;

 background: #333333; /*background of menu*/

 background:url(../image/Frame.png) no-repeat;

 }



 .drillmenu li a{ /*menu links*/

 display: block;

 color: black;

 text-decoration: none;

 margin-left:50px;

 width: 140px;

 text-align:left;

 padding-bottom:0px;

 }



 * html .drillmenu li{ /*IE6 CSS hack*/

 display: inline-block;

 }



 .drillmenu li a:hover{

 background-color: #4d3c00;

 color: white;

 border-style:dashed; border-color:gold; border-width: 1px;

 }



 li.backcontroltitle{ /*style of top level menu title*/

 background: black;

 color: white;

 padding: 4px;

 margin-bottom:3px;

 }



 li.backcontrol { /*style of back button control that gets added to the top of each sub UL*/

 background: #011054;

 color: white;

 padding: 4px;

 cursor: hand;

 cursor: pointer;

 margin-bottom:3px;

 }



 #drillcrumb{ /*custom, user defined DIV that contains breadcrumb trail*/

 margin-bottom: 5px;

 font: bold 13px Verdana;

 }



 #drillcrumb a{ /*custom element*/

 color: darkred;

 }

</style>

 

</HEAD>

 



<BODY>

 <div id="drillmenu1" class="drillmenu">

  <ul>

   <li><a href="#">Activities</a>

    <ul>

     <li><a href="#">Activities 1</a></li>

        <li><a href="#">Activities 2</a></li>

        <li><a href="#">Activities 3</a></li>

     </ul>      

   </li>

   <li><a href="#">Water Sports 3</a>

    <ul>

     <li><a href="#">Water Sports 3</a></li>

    </ul> 

   </li>

  </ul>



  <br style="clear: left" />

 </div>



 </BODY>



</HTML>



 ถ้า Code ตามด้านบนนี้ จะแสดงผลได้ตามปกติครับ

แต่ ถ้า query จาก DB โดยใช้ Code ด้านล่าง

 



<div id="drillmenu1" class="drillmenu">

  

  <ul>

   <?

   include ("db/connect.php");



   $sql = "select * from main_type where part_main=2";

   $query = mysql_db_query($dbname, $sql);



   while($result = mysql_fetch_array($query))

     {

      $id_main = $result[id_main];

      $logo_main = $result[logo_main];

      ?>

   <li><a href="#"><img src="admin/logo/<?php echo $logo_main;?>" alt="" class="Ul"></a>

    <? 



     $sql1 = "select * from product_type where ref_id_main='$id_main'";

     $query1 = mysql_db_query($dbname, $sql1);   

     

     while($result1 = mysql_fetch_array($query1))

      {

       $id_type = $result1[id_type];

       $logo_type = $result1[logo_type];

       ?>

    <ul>

     <li><a href="product_shotoy.php?id_type=<?php echo $id_type;?>"><img src="admin/sublogo/<?php echo $logo_type;?>" alt="" class="Li"></a></li>

    </ul>

   </li>  

       <?

      }

    }?>

  </ul>

    

  

  <br style="clear: left" />

 </div>



 



ชั้นที่ 2 ของ List จะแสดงแค่รายการที่มี id_main เดียวกัน แต่จะแสดงแค่รายการเดียว (ใน DB ผมจะมี 3รายการ) โดยจะแสดงแค่id_type ที่มากที่สุด (เช่น id_type มี 1-3) จะแสดงรายการที่ 3 เท่านั้น แต่ถ้าเอา code ส่วนที่เป็ สีฟ้า ออกก็จะแสดงรายการได้ครบตามปกติ แต่จะแสดงแบบปกติ ยาวๆลงมาเป็นรายการหลัก และ ย่อย



รบกวนด้วยนะครับ ขอบคุณมากครับ


02 ต.ค. 2554 4 4,354

ORDER BY id_type DESC LIMIT 1



แสดงรายการที่ id_type มากสุด
#1

อ.ครับ ไม่ใช่ครับ คือผมคงเขียนไม่เคลียร์ ผลที่ได้จาก code ผมมันจะแสดงแค่รายการเดียว แต่ผมอยากให้แสดงทุกรายการที่เป็น sub / แต่ถ้าผมเอา code ที่เป็น สีฟ้า ออกมันจะแสดงตามที่ผมต้องการ ที่มันผิดอยู่ มันแสดงให้ผมรายการเดียวนี่แหล่ะครับ 

รบกวน อ. อีกครั้งนะครับ ขอบคุณครับ frown
#2

อ้างอิงจาก ความคิดเห็น #2อ.ครับ ไม่ใช่ครับ คือผมคงเขียนไม่เคลียร์ ผลที่ได้จาก code ผมมันจะแสดงแค่รายการเดียว แต่ผมอยากให้แสดงทุกรายการที่เป็น sub / แต่ถ้าผมเอา code ที่เป็น สีฟ้า ออกมันจะแสดงตามที่ผมต้องการ ที่มันผิดอยู่ มันแสดงให้ผมรายการเดียวนี่แหล่ะครับ 

รบกวน อ. อีกครั้งนะครับ ขอบคุณครับ frown


55+++

ที่อยากจะบอกจริงๆ คือผมไม่ได้ดูโค้ดหรอก มันยาวมาก ทำให้ดูไม่ค่อยรู้เรื่อง.....และข้อมูลที่ให้มาไม่ได้สรุปมาก่อน ดังนั้นคงยากที่จะได้คำตอบไม่ว่าจะไปถามที่ไหน



ผมเดานะ

ตัวลิสต์ สามารถแสดงได้ ดังนั้นที่ผิดก็คงเป็น query ว่าแต่ เงื่อนไข ของ query คืออะไรไม่ได้บอก ถ้าแค่ต้องการรายการที่ไม่ซ้ำกันก็ลอง

DISTINCT field_name ดู จะได้รายการทั้งหมดที่ field_name ไม่ซ้ำกัน หรือไม่ก็ใช้ GROUP BY field_name แทน



ก็เดาๆเอาจากคำอธิบายที่พออ่านรู้เรื่องสั้นๆ ถ้าคำตอบยังไม่ใช่ ลองสรุปให้สั้นๆ และถามใหม่อีกที น่าจะมีผู้ช่วยให้ความคิดเห็นได้ง่ายขึ้น :28:
#3


ผมก็งง ว่าทำไมมันไม่ได้แบบที่ผมต้องการ :44: ผมเปลี่ยนไปใช้อีกแบบแล้วครับ ขอบคุณมากครับ


#4
ความคิดเห็น
ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 2M
^