简单的jquery mobile demo

< head >
< link  rel = "stylesheet"  href = "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" >
< script  src = "http://code.jquery.com/jquery-1.8.3.min.js" > script >
< script  src = "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js" > script >
head >
< body >
 
< div  data-role = "page" >
   < div  data-role = "header" >
   < h1 >主题化可折叠表单 h1 >
   div >
 
   < div  data-role = "content" >
     < form  method = "post"  action = "demoform.asp" >
       < fieldset  data-role = "collapsible"  data-theme = "b"  data-content-theme = "e" >
         < legend >点击我 - 我是可折叠的! legend >
           < label  for = "name" >全名: label >
           < input  type = "text"  name = "text"  id = "name" >
           < p >喜爱的颜色: p >
         < div  data-role = "controlgroup" >
           < label  for = "red" >红色 label >
           < input  type = "checkbox"  name = "favcolor"  id = "red"  value = "red" >
           < label  for = "green" >绿色 label >
           < input  type = "checkbox"  name = "favcolor"  id = "green"  value = "green" >
           < label  for = "blue" >蓝色 label >
           < input  type = "checkbox"  name = "favcolor"  id = "blue"  value = "blue" >
         div >   
       < input  type = "submit"  data-inline = "true"  value = "提交"  data-theme = "a" >
       fieldset >
     form >
   div >
div >
body >
html >

看看PC上的效果:

看看手机上的效果:

你可能感兴趣的:(简单的jquery mobile demo)