JQM动态加载 collapsible

最新推荐文章于 2019-08-06 19:39:36 发布

灵峰

最新推荐文章于 2019-08-06 19:39:36 发布

阅读量2.3k

点赞数

分类专栏： html5+JQM+js

本文链接：https://blog.csdn.net/linfen1680/article/details/8530188

版权

html5+JQM+js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

jsp页面代码

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>JQM动态加载 collapsible实例</title>
		<link rel="stylesheet" href="<%=request.getContextPath()%>/mweb/sc/css/jquery.mobile-1.2.0.css" />
		<script src="<%=request.getContextPath()%>/mweb/sc/js/jquery.js"></script>
		<script src="<%=request.getContextPath()%>/mweb/sc/js/jquery.mobile-1.2.0.js"></script>
	</head>

	<script type="text/javascript">
	  	 $(document).ready(function() {
	  	  var initial = <%=request.getParameter("action")%>;
	  	    //首次加载页面
		  	  if(initial =="0"){
		  		var url ="<%=request.getContextPath()%>/M3_jobMobileServlet.back?method=RA&action=initial"; //一个servlet类，取list
		  		selectList(url);
		  	   }
		  });
 
       function selectList(url){
	       $.getJSON(url,function(data) {
		          var groupList = data.list;
		          li_array = [];
		          var temp="";
		          for(var i in groupList){
						li_array.push(tplNew(groupList[i]));
					}
					var listview = $('#invition').find('#invitiondetail');
					listview.html(li_array.join(''));
					listview.trigger("create"); // 刷新div的 注意，这个地方和Listview 有点不同，listview是强制刷新，这个是创建一个div节点
				});
       }
 
		function tplNew(newItem){
			return  '<div data-role="collapsible"  data-collapsed="true"><h2>'+newItem.job_name+' </h2>'+ newItem.job_content+' </div>'
		}
	
	  </script>


	<body>
	
		<div data-role="page" id="invition">
			 
				
			<div data-role="header" data-theme="e">
				<a href="#introdution" data-rel="back" data-role="button" data-icon="arrow-l">返回</a>
				<h1>人才招聘</h1>
			</div>
			 <div data-role="content">
				 <div id ="invitiondetail">
				 	<div data-role="collapsible">
				 	
				 	</div>
	        	 </div>
	        </div>	 
 
		</div>
	</body>
</html>

java 代码

后台的代码就是获取一个list 转换成json 输出

			//获取招聘信息list
			List list = jobInterface.queryJobMobileByCondition(pu);
			 
			String result ="";
			Map<String, List> mapUtils = new HashMap<String, List>();
			
			//转换成JSON 输出
			if (list.size()>0) {
				mapUtils.put("list",list);
				JSONObject object = JSONObject.fromObject(mapUtils);
				result = object.toString();
			}
			
			response.setContentType("application/xml;charset=UTF-8");
			PrintWriter pw = response.getWriter();
			pw.write(result);
			pw.flush();
			pw.close();

灵峰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQM动态加载 collapsible

jsp页面代码 JQM动态加载 collapsible实例 /mweb/sc/css/jquery.mobile-1.2.0.css" /> /mweb/sc/js/jquery.js"> /mweb/sc/js/jquery.mobile-1.2.0.js"> $(document).ready(function() { v
复制链接

扫一扫

专栏目录