<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Live Score</title>
<meta name="viewport" content="width=divice-width, initial-scale=1.1.0" />
<script type="text/javascript" charset="utf-8" src="store/cordova-1.7.0.js"></script>
<link rel="stylesheet" href="store/themes/my-theme.min.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

<!--
<style type="text/css">
 #logo{
  width:176px;
  height:80px;
  text-indent:-9999px;
  background-image:url();
  background-repeat:no-repeat;
  margin-top:0px;
  margin-right:auto;
  margin-bottom:10px;
  margin-left:auto;
  }
  .title_style{
   color:#3F3C30;
   padding-top:10px;
   }
  
</style> -->
<script type="text/javascript">
</script>
</head>

<body>

 <?php
 $connect=mysql_connect("localhost", "root", "apmsetup") or die(mysql_error());
 $db_select=mysql_select_db("test",$connect) or die(mysql_error());
 ?>
    <div data-role="page" id="News"data-theme="a">
     <div data-role="header">    
   <h2 id="logo">Live Score</h2>
   <div data-role="navbar" data-theme="a" width=10 height=50>
      <ul>
       <li><a href="#News" class="ui-btn-active" data-icon="grid">News</a></li>
       <li><a href="#soccer" class="ui-btn-active" data-icon="grid">LiveScore</a></li>
        <li><a href="#today" class="ui-btn-active" data-icon="grid">Today</a></li>
        <li><a href="#About" class="ui-btn-active" data-icon="grid">About</a></li>
      </ul>
      </div>      
        </div>   
        <div data-role="content" data-theme="a">
            <ul data-role="listview" data-inset="true">
                <li><a href="#News1"><h3 class="title_style">1</h3></a>
                </li>
                <li><a href="#News2"><h3 class="title_style">2</h3></a>
                </li>
                <li><a href="#News3"><h3 class="title_style">3</h3></a>
                </li>
                <li><a href="#News4"><h3 class="title_style">4</h3></a>
                </li>
                <li><a href="#News5"><h3 class="title_style">5</h3></a>
                </li>
          </ul>        
        </div> <!-- content 끝-->
        <div data-role="footer" data-position="fixed" data-theme="a">
        </div>  
    </div><!-- page 끝-->
    <!--여기까지 메인 메뉴 끝-->
    <div data-role="page"  id="soccer">
     <div data-role="header">    
   <h2 id="logo">Live Score</h2>
   <a href="#News" data-icon="back" data-direction="reverse" class="ui-btn-left"> </a>
        </div>
       <div data-role="content" data-theme="a">
            <ul data-role="listview" data-inset="true">
                <li><a href="#match1" style="display:inline-block;"><h3 class="title_style">1</h3></a>
                </li>
                <li><a href="#match2"><h3 class="title_style">2</h3></a>
                </li>
                <li><a href="#match3"><h3 class="title_style">3</h3></a>
                </li>
                <li><a href="#match4"><h3 class="title_style">4</h3></a>
                </li>
                <li><a href="#match5"><h3 class="title_style">5</h3></a>
                </li>
          </ul>        

      </div>
      <div data-role="footer" data-position="fixed">
     
      </div>
 </div>
    <!---->
 <div data-role="page"  id="match1">
     <div data-role="header">    
   <h2 id="logo">Live Score</h2>
   <a href="#soccer" data-icon="back" data-direction="reverse" class="ui-btn-left"> </a>
        </div>

        <div data-role="content" data-theme="a">
            <ul data-role="listview" data-inset="true">
                <li><a href="#"><h3 class="title_style">아</h3></a>
                </li>
                <li><a href="#"><h3 class="title_style">야</h3></a>
                </li>
                <li><a href="#"><h3 class="title_style">어</h3></a>
                </li>
                <li><a href="#"><h3 class="title_style">여</h3></a>
                </li>
                <li><a href="#"><h3 class="title_style">오</h3></a>
                </li>
          </ul>        

      </div>
   </div>


</body>
</html>
-----------------------------------------------------------------------------------

1. 리스트뷰가 처음 빨간 부분을 클릭을 하면 화면 전환이아니라 리스트가 열리면서 아래로 열리게 하고싶습니다.. 제가 아직 초보라서 잘 모르는데 이부분에 도움좀 주세요..ㅠㅠ

2. 지금은 ui만 제작한다고 리스트뷰에 임의로 5개의 리스트를 줬는데요..

   php를 사용해서 mysql에 연동할 예정인데 php에서 받아오는 자료가 5개면 리스트가 5개만 2개면 2개만 뜰수 있도록 하고싶습니다 ㅠㅠ

답변하실때 소스만 주지마시고 주석달아서 설명도 부탁드려요..ㅠㅠ 젭알..ㅠㅠ