为什么jquery移动css主题不适用于带参数或/的网址?

时间:2014-01-07 18:02:04

标签: php css jquery-mobile

我正在开发一个有两页的简单移动网站。我使用主题滚轮创建我想要的外观,当我访问没有参数的网址时,主题适用于自己。但是,如果我在url的末尾添加一个参数或只是一个/,我会得到默认主题。以下是一个示例网址:http://www.devtownbeam.com/mobile/mobileevents.php 如果你只添加一个/,它会改变 http://www.devtownbeam.com/mobile/mobileevents.php/

这是html和文档就绪功能

<!doctype html>
<html>
<head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
    <link rel="stylesheet" href="themes/townbeammobile.css">
    <link rel="stylesheet" href="themes/jquery.mobile.icons.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>

<style type="text/css">

.ui-controlgroup-controls
{
    width:100%;
}
</style>
</head>
<body>

<div data-role="page" data-theme="a" id="pageone" >
  <div data-role="header">
   <img style="display:block;" src="http://townbeam.com/siteimages/tbtransparentCrop.png" alt="TownBeam.com" /> 
  <h1 style="color:#9aac3c;">Atlantic Highlands</h1>    

<div id="mobNav" data-role="controlgroup" data-type="horizontal" style="margin-bottom:0px;border-bottom:0px;" >
    <a  data-role="button" href="mobileplaces.php" style="width:49%;border-bottom:0px;" >Go<br>Visit Local Businesses</a>
    <a data-role="button" class="ui-btn-active ui-state-persist" href="#"  style="width:49%;border-bottom:0px;" >Do<br>Attend Events</a>
</div>

 </div>

<div  data-role="fieldcontain" data-theme="b">
    <select name="select-choice-1" id="select-choice-1">
        <option value="mobgetevents.php/?_escaped_fragment_=events&calid=townbeam@gmail.com">Town Calendar</option>
        <option value="mobgetevents.php/?_escaped_fragment_=events&calid=cddh69iavn9gqmmcai9s4qdue0@group.calendar.google.com">Giving </option>
        <option value="mobgetevents.php?_escaped_fragment_=events&calid=h1j9lsj20kec8nugnecu4b25h0@group.calendar.google.com">Kids</option>
        <option value="mobgetevents.php/?_escaped_fragment_=events&calid=4btasp0rcfq0skr4c6tuu7g7m8@group.calendar.google.com">Historical</option>
    </select>
</div> 

<div id="theContent" data-role="content" data-theme="b" >
<?php
    include_once ("mobgetevents.php");
?>
</div>

 <div data-role="footer" data-position="fixed">
 <h4 style="color:#9aac3c">Your town brought to view</h4>
 </div><!-- /footer -->

</div> 
</body>
</html>

<script type="text/javascript" >
$(document).ready(function(){   
    $('#select-choice-1').bind('change', function() {

        $('#theContent').load($("#select-choice-1 option:selected").attr('value'), function(){
            $("#pageone").trigger("pagecreate");
        });
    }); 


});
</script>

0 个答案:

没有答案