回退练习

index.html

<!DOCTYPE html>
<html>
<head>
 <title>jQuery Mobile: Demos and Documentation</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet"  href="importFile/jquery.mobile-1.0.1.min.css" />
 <script src="importFile/jquery.js"></script>
 <script src="importFile/jquery.mobile-1.0.1.min.js"></script>
 
 <script language ="javascript" >
     function selectPerson(obj) {
         //$("#ee").append("<div data-role='collapsible' data-collapsed='true' class='info'><ul data-role='listview' data-inset='true'  class='detail'> </ul><ul data-role='listview' data-inset='true'  class='detail'></ul></div>").trigger("create");
         var id = $(obj).prev().attr("id");
    
         var divObj = document.createElement("div");
         divObj.id = "slectPersonPage";
         divObj.setAttribute("data-role", "page");
         divObj.setAttribute("targetSelPer", id);

         var divHead = document.createElement("div");
         divHead.setAttribute("data-role", "header");
         divHead.innerHTML = "<h1>Page Title</h1>";

         var divContent = document.createElement("div");
         divContent.setAttribute("data-role", "content");
         divContent.innerHTML = "<input type ='text' value='王明' /><a οnclick='post(this)' data-role='button'>提交</a>"

         divObj.appendChild(divHead);
         divObj.appendChild(divContent);
        
         document.body.appendChild(divObj);

         $("#slectPersonPage").trigger("create");
        
         //alert(document .body .innerHTML);         
         //alert($("#slectPersonPage")[0].innerHTML);
     }

     function post(obj) {
         var val = $(obj).prev().val();
        
         var tarId = $(obj).parents("div[targetSelPer]").attr("targetSelPer");

         $("#" + tarId).val(val);

         $(obj).parents("div[targetSelPer]").dialog('close')
     }
 </script>
 
</head>
<body>

<div data-role="page" class="type-home" id="mainPage">
 <div data-role="content">
   <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
    <li><a href="dbgw.html"  data-ajax="false">代办公文页面</a></li>
    <li><a href="0325.html"  data-ajax="false">练习</a></li>
   </ul>
   
   <br />
   
   <table>
       <tr>
           <td>人员选框</td>
           <td>
               <span>
                   <input type ="hidden" />
                   <input id="selectPerson1" type ="text" />
                   <a href ="#slectPersonPage" onclick ="selectPerson(this)" data-rel="dialog" data-direction="slidedown"><img src="importFile/2012-03-24_085415.png" /></a>
               </span>
           </td>
       </tr>
   </table>

 </div>
</div>

<!--<div data-role="page" id="test">
    <div data-role="header">
    <h1>Page Title</h1>
</div>

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

 

 

dbgw.html

<!DOCTYPE html>
<html>
<head>

 
 <title>jQuery Mobile: Demos and Documentation</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet"  href="importFile/jquery.mobile-1.0.1.min.css" />
 <script src="importFile/jquery.js"></script>
 <script src="importFile/jquery.mobile-1.0.1.min.js"></script>
 
</head>
<body>

<div data-role="page" class="type-home">
 
 <div data-role="header" data-position="inline">  
  <a href="cancel.html" data-icon="delete">Cancel</a>  
  <h1>Edit Contact</h1>  
  <a href="save.html" data-icon="check">Save</a>
 </div>

 <div data-role="content">
       <div>
        <a href="" data-rel="back" data-iconpos="notext" class ="ui-btn-right back">返回</a>
    </div>
        <div>
            代办公文数据
        </div>
 </div>
 
 <pre class="brush:html;gutter:false;">
 <div data-role="navbar">  
  <ul>     
   <li><a href="#nav1" class="ui-btn-active">One</a></li>     
   <li><a href="#nav2">Two</a></li>  
  </ul>
 </div><!-- /navbar -->
</div>

</body>
</html>

 

0325.html

<!DOCTYPE html>
<html>
<head>

 
 <title>jQuery Mobile: Demos and Documentation</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet"  href="importFile/jquery.mobile-1.0.1.min.css" />
 <script src="importFile/jquery.js"></script>
 <script src="importFile/jquery.mobile-1.0.1.min.js"></script>
 
</head>
<body>
<div data-role="page" id="ff" data-position="fixed">
<div data-role="header" data-position="fixed">
      <h1>Navigation</h1>
   </div><!-- /header -->
   <div data-role="content" >
      <ul data-role="listview" data-dividertheme="d" style="margin-top: 0;">
      <li><a href="#nav1">Henry VIII <span class="ui-li-count">Reign 37 Years</span></a></li>
      <li><a href="#nav1">George V <span class="ui-li-count">Reign 25 Years</span></a></li>
      <li><a href="#nav1">Prince of Wales <span class="ui-li-count">N/A</span></a></li>
     <li><a href="#nav1">Elizabeth I <span class="ui-li-count">Reign 44 Years</span></a></li>
      <li><a href="#nav1">Elizabeth II<span class="ui-li-count">Reign since 1952</span></a></li>
         <li data-role="list-divider">Prime Miniseters</li>
         <li><a href="#nav2">Winston Churchill</a></li>
         <li><a href="#nav2">Tony Blare</a></li>
         <li><a href="#nav2">David Cameron</a></li> <li><a href="#nav1">Prince of Wales</a></li>
         <li><a href="#nav1">Elizabeth I</a></li>
         <li><a href="#nav1">Elizabeth II</a></li>
         <li data-role="list-divider">Prime Miniseters</li>
         <li><a href="#nav2">Winston Churchill</a></li>
         <li><a href="#nav2">Tony Blare</a></li>
         <li><a href="#nav2">David Cameron</a></li> <li><a href="#nav1">Prince of Wales</a></li>
         <li><a href="#nav1">Elizabeth I</a></li>
         <li><a href="#nav1">Elizabeth II</a></li>
         <li data-role="list-divider">Prime Miniseters</li>
         <li><a href="#nav2">Winston Churchill</a></li>
         <li><a href="#nav2">Tony Blare</a></li>
         <li><a href="#nav2">David Cameron</a></li>
      </ul>
   </div><!-- /content -->
<div data-role="footer" data-position="fixed">
   <div data-role="navbar">
      <ul>
         <li><a href="#nav1" class="ui-btn-active">Royals</a></li>
         <li><a href="#nav2">Leaders</a></li>
      </ul>
   </div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="nav1" data-position="fixed">
   <div data-role="header">
      <h1>Royal Family</h1>
   </div><!-- /header -->
<div data-role="content">
<p>Members and relatives of the British Royal Family historically represented the monarch in various places throughout the British Empire, sometimes for extended periods as viceroys, or for specific ceremonies or events. Today, they often perform ceremonial and social duties throughout the United Kingdom and abroad on behalf of the UK, but, aside from the monarch, have no constitutional role in the affairs of government. This is the same for the other realms of the Commonwealth though the family there acts on behalf of, is funded by, and represents the sovereign of that particular state, and not the United Kingdom.</P>
</div><!-- /content -->
   <div data-role="footer" data-position="fixed">
      <h4>Royal Family</h4>
   </div><!-- /header -->
</div><!-- /page -->
<div data-role="page" id="nav2" data-position="fixed">
   <div data-role="header">
      <h1>Prime Ministers</h1>
   </div><!-- /header -->
<div data-role="content">
The Prime Minister of the United Kingdom of Great Britain and Northern Ireland is the Head of Her Majesty's Government in the United Kingdom. The Prime Minister and Cabinet (consisting of all the most senior ministers, who are government department heads) are collectively accountable for their policies and actions to the Sovereign, to Parliament, to their political party and ultimately to the electorate. The current Prime Minister, David Cameron, was appointed on 11 May 2010.</div><!-- /content -->
<div data-role="footer" data-position="fixed">
   <h4>Prime Minister</h4>
      </div><!-- /header -->
   </div><!-- /page -->

</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值