2013-02-28 4 views
0

나는 기존의 모바일 사이트 톰캣에 자바로 작성된 및 호스팅이있는 나는이 슬라이드 MENUE에게어려움 기존 모바일 사이트

https://github.com/tegansnyder/JQuery-Mobile-Slide-Menu

그러나 난을 통합하는 것을 시도하고있다 내 삼성 갤럭시 S3 브라우저에만 해당되는 것처럼 보이는 이상한 문제가 있습니다. 크롬이나 파이어 폭스에서도 똑같이 보지는 않습니다.

슬라이더 메뉴에서 내 메뉴 링크 중 하나를 클릭하면 지정한 URL로 리디렉션되지만 # 기호가 추가됩니다. 예

domain.mobi/#/help.jsp?helpsource=index.jsp

것이되어야 반면

domain.mobi/help.jsp?helpsource=index.jsp

이렇게하면 페이지의 슬라이더 메뉴가 더 이상 작동하지 않으므로 효과적으로 페이지가 중단됩니다.

아이디어가 있으십니까? 여기

내 index.jsp에 당신이 직면하고있는 어떤

<?xml version="1.0"?> 
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" 
        "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> 
<c:set var="locale" value="en"/> 
<c:if test="${not empty param.locale}"> 
    <c:set var="locale" value="${param.locale}"/> 
</c:if> 
<fmt:setLocale value="${locale}"/> 
<fmt:setBundle basename="chale"/> 
<%@taglib uri="/WEB-INF/tld/chale.tld" prefix="chale" %> 

<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="HandheldFriendly" content="True"> 
<meta name="MobileOptimized" content="320"/> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
<meta http-equiv="cleartype" content="on"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 

<link href="css/themes/jqmfb.min.css" rel="stylesheet" type="text/css"> 
<link href="css/chale_style.css" rel="stylesheet" type="text/css"> 
<link href="css/jquery.mobile.structure.min.css" rel="stylesheet" type="text/css"> 

<!--Include JQM and JQ--> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"> </script> 
<script src="js/jquery.animate-enhanced.min.js"></script> 

     <!--JQM globals you can edit or remove file entirely... note it needs to be loaded  before jquerymobile js --> 
<script src="js/jqm.globals.js"></script> 

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script> 

<!--JQM SlideMenu--> 
<link rel="stylesheet" href="css/jqm.slidemenu.css" /> 
<script src="js/jqm.slidemenu.js"></script> 
<title><fmt:message key="index.pagetitle"/></title> 
</head> 
<body> 
<c:set var="pageVal" value="0"/> 
<c:if test="${not empty param.page}"> 
<c:set var="pageVal" value="${param.page}"/> 
</c:if> 



<div id="slidemenu"> 

    <div id="profile"> 

     <div class="profile_info"><strong>Chale</strong></div> 
    </div> 

    <h3>MENU</h3> 

    <ul> 
     <c:url var="finder" value="m/browse.jsp"/> 
     <li><a href="${finder}"><img src="../img/smico4.png"><fmt:message key="index.optionflirtfinder"/></a></li> 

     <c:url var="fav" value="m/favourites.jsp"/> 
     <li><a href="${fav}"><img src="../img/smico4.png"><fmt:message key="general.favourites"/></a></li> 


     <c:url var="message" value="m/messaging.jsp"><c:param name="messagesource" value="../index.jsp"/></c:url> 
     <li><a href="${message}"><img src="../img/smico4.png"><fmt:message key="general.messages"><fmt:param value="${unreadMessages}"/></fmt:message></a></li> 

     <c:url var="chat" value="chat/checkdetailsservlet"/> 
     <li><a href="${chat}"><img src="../img/smico4.png"><fmt:message key="index.optionchatcentral"/></a></li> 

     <c:url var="prof" value="m/profile.jsp"/> 
     <li><a href="${prof}"><img src="../img/smico4.png"><fmt:message key="index.optionmyprofile"/></a></li> 

     <c:url var="help" value="help.jsp"><c:param name="helpsource" value="index.jsp"/></c:url> 
     <li><a href="${help}"><img src="../img/smico4.png"><fmt:message key="general.helpcentre"/></a></li> 

    </ul> 


</div> 

<div data-role="page" id="main_page" data-theme="a"> 

    <div data-role="header" data-position="fixed" data-tap-toggle="false" data- update-page-padding="false"> 
     <a href="@" data-slidemenu="#slidemenu" data-slideopen="false" data-icon="smico" data-corners="false" data-iconpos="notext">Menu</a> 
     <h1>Chale</h1> 
    </div> 
+0

안녕하세요, Derek, 맞습니다. 물론, 나는 나의 질문을 편집하고 코드를 추가 할 것이다. –

답변

1

있어에서 코드입니다. <a> 태그는 jQuery 모바일이 AJAX를 사용하여 페이지를 직접 변경하는 대신 HTML을 가져 오거나 페이지를 탐색 할 수 있습니다.

해시 (#)가있는 URL을 생성하여 페이지를 탐색합니다.
참조 : http://jquerymobile.com/demos/1.2.0/docs/api/methods.html
키워드를 검색 해시

domain.mobi/#/help.jsp?helpsource=index.jsp

이 문제를 해결하려면, 당신은 추가 할 데이터 아약스 URL에 = "false"를.

<a href="${finder}" data-ajax="false"><img src="../img/smico4.png"><fmt:message key="index.optionflirtfinder"/></a> 

링크가 다른 사이트 또는 도메인에 연결되어 있으면 rel="external"도 추가해야합니다.
Ref : http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/page-links.html

+0

고마워, 나는 지금 그것을 시도 할 것이다. Chrome이나 Firefox에서 왜 작동하지 않는지 알고 싶습니다. –

+0

고마워, 그 덕분에 –

+0

안녕하세요, Derek, 제발 당신의 이메일 주소를 알려주세요. 너에게 몇 가지 일을하라고 계약하고 싶다. –