0

Hi I am new for Jquery mobile. I need to develop mobile apps which consist lot of screen. There are around 50 html inside my apps. I am facing this problem nw which is hw to linking to each other page?

Btw let say i need to embedded cordova.js or custom js file to all pages. So did i need to embedded java-script file to every 50 page's header? It is very time-consuming to restructure my apps for example

    <head>
<meta charset="utf-8">
<title>Smart Realtor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">  
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 

<link rel="stylesheet" href="css/smartrealtor-theme.css" />
<link rel="stylesheet" type="text/css" href="css/snap.css" />
<link rel="stylesheet"  href="css/custom.css"> 
<link rel="stylesheet"  href="css/themes/default/jquery.mobile.structure-1.4.2.css">
<link rel="stylesheet"  href="css/themes/default/jquery.mobile.icons-1.4.2.css">
<link rel="stylesheet"  href="css/jqm-icon-pack-fa.css">
<script src="js/jquery.js"></script>
<script src="js/globalsetting.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>

</head>

Did Jquery mobile provide any function like I need only include js file to index.html. Then my other page will automatically load those js file. Please guide me solution and provide me some sample code instead of give me jquery mobile document link. Thanks

user998405
  • 1,329
  • 5
  • 41
  • 84

1 Answers1

0

Okay so just to clarify, it sounds like you've got 2 problems:

  1. Adding navigation links to all 50 html files
  2. Adding an extra javascript source to all 50 html files

Two basic approaches come to mind:

  • You could write a script or use a program to do a text find and replace for all the files in the html directory. If you want to use a program, you could use ReplaceText or a similar tool. If you want to use a script then you could write it in whatever you prefer, I'd probably use Python, this link might help you write such a script. So then to add the navigation links and embed an extra javascript file, you could seach for <body> and replace with:
    <body> <nav> <a href="page1.html">link1</a> <a href="page2.html">link2</a> </nav> <script src="js/cordova.js"></script>

  • Another possible option would be to add the navigation and dynamically load the javascript file using a javascipt file that you already include in all of your html files. Note though that this approach will slightly reduce the performance of the page as compared to directly changing the html files (as in the previous approach). So for example, to load an extra javascript source, you could add the following code to globalsetting.js
    Using jQuery's getScript() function $( document ).ready(function() { $.getScript( "js/cordova.js", function( data, textStatus, jqxhr ) { console.log( data ); // Data returned console.log( textStatus ); // Success console.log( jqxhr.status ); // 200 console.log( "Load was performed." ); }); }); Or as normal javascript (source1, source2) var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script'); script.type= 'text/javascript'; script.src= 'helper.js'; head.appendChild(script); And to add the navigation you could add the following jQuery code to globalsetting.js: (source) $("body").append("<nav> <a href="page1.html">link1</a> <a href="page2.html">link2</a> </nav></nav>")

Community
  • 1
  • 1
wgardiner
  • 243
  • 2
  • 4