treeview in YUI3

I found it on google
http://yuilibrary.com/gallery/show/treeview

ิBut , I found  jQuery Plugin easier
http://docs.jquery.com/Plugins/Treeview/treeview

Just , copy and paste to  *.php / *.html file  in web browser ,
and then run  with IE , Chrome .


-------------------------------------------------
And  TreeView from jQuery plugin again ,
with document .

http://www.dynamicdrive.com/dynamicindex1/treeview/index.htm

-------------------------------------------------
menu in jQuery Plugin
http://plugins.jquery.com/project/jme
http://sawanna.org/jquery/jmenu/#
http://www.msconcept.fr/jMenu

-------------------------------------------------

More Javascript ... here ...
http://www.dynamicdrive.com/

-------------------------------------------------

Code Sample :: Show Tooltip ( Cross Browser IE , Chrome , FireFox )

  /* Function Show Tooltip form URL

     Browser IE7 ,Google Chrom ,Mozilla FireFox

     By      Thitipong Samranvanit.

     Date    21-10-2010

     JS         Native JavaScript  ,  jQuery     
     Parameter : topic_id , object (DOM) , event (DOM)        

  */

  function showtooltip(tid,obj,event){

             /* <<<<--- Change To Your URL */

            var url = "index.php/getview/admin_show_detail/" +  tid ;

            var tt = $("#tooltip");

            var difx = 15 ;

            var dify = 15 ;

           

            var xx , yy ;

            var e = window.event  /* IE TYPE */ ;

            if( e ){  /* IE TYPE */

               xx = e.clientX + difx ;

               yy = e.clientY + dify ;

            }else{   /* FIREFOX and  Chrome */

               xx = event.pageX + difx ;

               yy = event.pageY + dify ;

            }

            tt.html("OOO1" + e + "]");  

            tt.html("OOOP2");  

            //tt.html ( xx + " : " + yy )  ;

            tt.css('z-order',99).css("position","absolute").css("top" ,yy ).css("left" , xx );

            tt.css("border","1px solid #000000").css("background-color","lightyellow");

           

            tt.load(url);

            tt.css("opacity","0.95").show();

  }

  function hidetooltip(){

        $("#tooltip").hide();

  }

------------------------------------------------------------------

Usage 

HTML/PHP File  

<img src=”…”

Onclick=”…”

…

onMouseOver="javascript: showtooltip(<?=$entry['id'] ?> ,this ,event)"

onMouseOut="javascript: hidetooltip( )" 

…

> 

In this php file  

I pass parameter  (  topic_id,  this , event ) 

this = image tag object in DOM 

event =  MouseEvent  in DOM

ลองใช้ jQuery

แล้วก็ ลองโค้ดดู
มา โพส ที่ blogspot
โค้ดมัน ก็มั่วๆๆ
เลยหาทาง ลองโพสที่ myspace แทนครับ

นี่ link ครับ ... รอ มาแก้ link อีกททีน่ะ ..

คงต้อง ใช้ function http://th2.php.net/manual/en/function.highlight-file.php
hilight_file ของ php เพื่อที่จะปรับให้ code สามารถ post บน Blogger ได้
ตัวอย่าง นี้ครับ

ใช้ $s = hightlight_file("file1.php",true); echo $s ;
โดยให้ ครอบ tag code ไว้ด้วย tag PRE อีกชั้นหนึ่ง
จะได้ผลดังนี้ ครับ

<?

$db = mysql_connect( "localhost" , "aa" 

,"123a" ) ; 


mysql_select_db("db1" ) ; 

$rs =  mysql_query( "select * from table1  ") ; 

$num =  mysql_num_rows($rs) ; 

echo  "<BR>row  num  =  $num " ;

mysql_close($db ) ;

for ($i = 0 ; $i < 10 ; $i ++) {

        echo "Test $i " ; 

} 

?>

<script  language=javascript >

function test(){

    alert( "abc") ;

}

</script> 

หรือหากไม่อยาก hilight อาจใช้วิธีนี้

<?
$s = file_get_contents( "hili2.php") ;
$s = htmlentities($s )  ; 
echo "<PRE>$s</PRE>" ;
?>

ซึ่งก็จะได้ผล เป็น plain Text ซึ่งแสดง ข้อมูล
แบบที่เป็น TextFile ธรรมดา แต่มีการ ย่อหน้าได้ ด้วย
แต่ปัญหา ที่พบคือ คนที่มา copy code จะได้ ข้อความติดกัน เป็นพืดๆ ไม่มีการย่อหน้าเว้นบรรทัดอยู่ดี ตรงนี้คือ
จะอ่านได้อย่างเดียวแต่ยังก้อบปี้ยังไม่ได้ง่ายๆ ยังหาวิธีที่ดีกว่านี้ไม่ได้ ครับ

-------------------------------------------------------------------------------
แล้วในที่สุด ก็หาตัวอย่างง่ายๆ ของ jQuery มาได้
ว่าจะทำไง ให้โพสบนเว็ป
พอดีที่เครื่องไม่ได้ลง php / apache ไว้
ก็เลย ใช้โปรแกรมที่เขียนเอง แหละชื่อ Form Basic HTML version 1.03
โพสโค้ดที่ หน้าต่างซ้าย แล้ว ก็ เลือกเมนู Edit --> Convert To String in Language --> HTML
แล้วก็ก้อบโค้ดมา ง่ายๆ
เพียงแต่ ช่องว่างมันจะแสดงเป็น nbsp เท่านั้นเอง
แล้วต้องมา replace
ออก ด้วย notepad แล้ว เติม PRE ครอบไว้

<html>
  <head>
    <script type="text/javascript"
 src="jquery-1.2.6.js"></script>
    <script type="text/javascript">
      // Your code goes here
      $(document).ready(function(){
       alert("a");
       $("#sp1").addClass("red");
       
        $("#list1 li").hover(function(){
  $(this).addClass("green");
     },function(){
  $(this).removeClass("green");
   });     
      
      });


      </script>
 <style >
 .red     {background-color:red;}
 .green     {background-color:lightgreen;}
 </style>
   
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
    <button id=bt1 >aa</button>
    <span id=sp1 >aa</span>
    <ol id=list1>
     <li>aaa1</li>
     <li>aaa2</li>
     <li>aaa3s</li>
    </ol>
  </body>
  </html>