모바일 책검색 파일 만들기

JQueryMoblic.com

사용자가 사용할 수 있는 화면 UI(USER INTERFACE)


※모바일에서 jQueryMobile 보는 방법!※
jQueryMoblie설치파일

[file]-[export]-[web]-[WAR.file]-[Browse..]
-apachTomcat>webapp 저장해야되는데 방화벽 문제로 내문서에 저장후 직접 tomcap에 webapps에  파일 붙여넣기

주소:http://192.168.0.42:8088(IPv4 주소[cmd>ipconfig>])/web/mbook(jsp이름)
(path)

BookController.java(class)

 

package com.example.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class BookController {
	@RequestMapping("mbook")
	public String mbook(){
		return "mbook";
	}
	
}

 

mbook.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>


	모바일 버전 도서 검색
	[모바일 버전 도서검색]도서목록
			{{#each documents}}
				<li contents="{{contents}}" title="{{title}}" authors="{{authors}}" image="{{thumbnail}}" price="{{price}}"><a href="#sub">{{title}}</a></li>
			{{/each}}
			더보기[ICIA 교육원]
저자:가격:
[ICIA 교육원]
	var page=1;
	var is_end=false;
	var query=$("#query").val();
	//검색버튼
	$(document).ready(function(){
		$("#query").keydown(function(key){			
			if(key.keyCode=13){
				page=1;
				query=$("#query").val();
				getList();
				$("#list-book").html(" ");
			}
		});
	});
	//li를 클릭했을때
	$("#list-book").on("click", "li",function(){
		var title=$(this).attr("title");
		var authors=$(this).attr("authors");
		var image=$(this).attr("image");
		var price=$(this).attr("price");
		var contents=$(this).attr("contents");
		
		$("#title").html(title);
		$("#authors").html(authors);
		$("#image").attr("src",image);
		$("#price").html(price);
		$("#contents").html(contents);
	});
	//더보기 버튼
	$("#btnMore").on("click",function(){
		//alert(page);
		if(!is_end){
			page += 1;
			getList();	
		}		
	});	
	getList();
	function getList(){
		$.ajax({
			type:"get",
			url:"https://dapi.kakao.com/v3/search/book?target=title",
			headers:{"Authorization":"KakaoAK 6baa3500ff42695b48d705aa87132cb3"},
			data:{"query":query,"page":page},
			dataType:"json",
			success:function(data){
				//alert("안녕");
				var temp=Handlebars.compile($("#temp").html());
				$("#list-book").append(temp(data)).listview("refresh");
				is_end=data.meta.is_end;
			}			
		});
	}