JqueryMobile试题

1.动态添加checkbox


<html>
	<head>
		<meta charset="UTF-8">
			<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
		<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js">script>
		<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js">script>
		<title>title>
	head>
	<body>
		<div data-role="page">
			<div data-role="header">
				
			div>
		<div data-role="content"><div id="aaa">
    		 <button id="btt">添加checkboxbutton>
    	div>
		div>
		div>
	body>
	<script>
	$(function(){
		var i=0;
		$("#btt").on("click",function(){
		var aa = "";
		$("#aaa").append(aa);
		$("#pp" + i).checkboxradio();//渲染样式,js动态的
		i++;
	})
	})
	script>
html>

2.页面之间的跳转


<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
		<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js">script>
		<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js">script>
		<title>title>
	head>
	<body>
		<div data-role="page">
			<a href="#pagetwo" class="ui-btn">
				第二页
			a>
		div>
		<div data-role="page" id="pagetwo">
			<a href="#" data-rel="back" class="ui-btn">
				返回第一个界面
			a>
		div>
	body>
html>

3.popup弹出框,静态与动态


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
		<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js">script>
		<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js">script>
	<style>
			.ui-btn {
				display:inline-block;
			}
		style>
	head>
	<body>
		<div data-role="page" > 
			
  <div data-role="content">
    <a class="ui-btn" href="#mypupop" data-rel="popup">
    	简单的弹出框
    a>
    <div id="mypupop"  data-role="popup">
    <img src="img/2.jpg" style="max-height:512px;">
    div>
  div>

		div>
		<script>	
				var imgList = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
				var index =0;
				for (index=0;index < imgList.length;index++) {
					var linkx="
							+ "data-role='button' data-position-to='window' style='width:40%;' >"
							+ ""
							+ "";
					
					var popupx=""
$("[data-role='page']").append(linkx);
$("[data-role='page']").append(popupx);
}
script>
body>
html>

4.列表listview

<body>
		<div data-role="page">
			
<h1>水果h1> div>
<ul data-role="listview"> <li> <a href="#"><img src="img/u=1771744503,3274790315&fm=27&gp=0.jpg"> <P>名称P> <P>简介P> a> li> <li> <a href="#"><img src="img/u=1771744503,3274790315&fm=27&gp=0.jpg"> <P>名称P> <P>简介P> a> li> <li> <a href="#"><img src="img/u=1771744503,3274790315&fm=27&gp=0.jpg"> <P>名称P> <P>简介P> a> li> ul> div> div> body>

你可能感兴趣的:(JqueryMobile)