I am using Dojo 1.7. to implement a Android mobile App with Phonegap.
Well my problem is, that I have implemented a tabbar in index.html in my project. Now I want to make a transition by clicking on a tabbar-icon from index.html to a view-div (called testdiv) of view2.html which is another html file in the same project.
Use the url property available within the data-dojo-prop attribute as shown below -
Index.html - link to view on another page
<div id="detailsHeading" data-dojo-type="dojox.mobile.Heading"
data-dojo-props="fixed: 'top', label: 'Details', back:'Back', moveTo:'view1', transition:'slide', transitionDir:'-1',url:'sample.html'">
</div>
The url property above contains the name of the html to be referened and moveTo contains the view to be displayed (your another html may have multiple views)
Sample.html - view definition
<div data-dojo-type="dojox.mobile.ScrollableView" id="view1"
data-dojo-props="selected:false,scrollDir:'v'">
</div>
When the "detailsHeading" is clicked, the application will load sample.html and render the view - view1
theres not a lot to go by here; but im nearly a 100% sure that the 'tabbar' you speak of a dojox.mobile.TabBar?
If so, there's no support out-the-box for pulling in remote pages but you can do this by adding a dijit.layout.ContentPane to the tabbar.
Try out this code for your project, each pane loads viewX.html
<div id="groupview1" data-dojo-type="dojox.mobile.View"
data-dojo-props='selected:true'>
<ul data-dojo-type="dojox.mobile.TabBar"
data-dojo-props='barType:"segmentedControl", fixed:"top"'>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='moveTo:"subview1", selected:true'>New</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='moveTo:"subview2"'>What's Hot</li>
</ul>
<div id="subview1" data-dojo-type="dojox.mobile.ScrollableView"
data-dojo-props='selected:true'>
<ul data-dojo-type="dijit.layout.BorderContainer">
<li data-dojo-type="dijit.layout.ContentPane"
data-dojo-props='region:"center", href:"view1.html"'>Hello</li>
</ul>
</div>
<div id="subview2" data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props=''>
<ul data-dojo-type="dijit.layout.BorderContainer">
<li data-dojo-type="dijit.layout.ContentPane"
data-dojo-props='region:"center", href:"view2.html"'></li>
</ul>
</div></div>
<script type="text/javascript">
require(["dojox/mobile/TabBar", "dojox/mobile/TabBarButton", "dojox/mobile/TabBarButton", "dojox/mobile/ScrollableView", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"], function() {
dojo.parser.parse();
});
</script>
Related
I'm working with Django to build a simple website, and in one of my my pages, analysis.html, I call the Twitter API to load some data.
In analysis.html, I have this card that I got from Bootstrap's components:
<div class="card text-center" style="width: 800px;">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link" href="#buttona" style="color:#1DA1F2">Content A</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#buttonb" style="color:#1DA1F2">Content B</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Content A</h5>
<p class="card-text">
// Content A Stuff
</p>
</div>
</div>
There's 2 buttons, Content A and Content B, and upon clicking Content A I'd like the page to load content A stuff only inside the card, and similarly for content B.
I'm fairly new to HTML, so my first thought was to just load a new page, say analysisA.html, upon someone clicking button A, and anaysisB.html upon someone clicking button B, where everything on the HTML template is the same except for content A/B.
But this seems like bad coding, and it'd be calling the Twitter API unnecessarily, as all the necessary data is already called when analysis.html is opened.
So, how should I go about swapping the content back and forth in the card only, while keeping everything else in the page the same? Thank you.
Normally you would use a javascript framework like AngularJS to load your page content, but since bootstrap uses jQuery you could take advantage of the jQuery based load function. For instance:
$("#contentA").click(function() {
//Load an entire external page in to contentA
$( "#contentB" ).load( "analysisB.html div#content" );
//Load just a piece of data from an external file in to contentA
$( "#contentB" ).load( "analysisB.html" );
})
I'm developing an application using angular JS . I have a menu and when I click on one of the options it becomes active (changes color ) and I include a different html page. for example :
<ul class="nav navbar-nav side-nav">
<li >
</i> Home
</li>
<li >
</i> Profil
</li>
</ul>
........
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div ng-include="subPage.url"></div>
</div>
</div>
that works fine . but when I refresh the page I always get the welcome page with no page included . I tried to initialize the subPage.url :
<div ng-init="subPage.url = 'home.html'">
but this way when I refresh I always get the home.html included .
How to do so that when I refresh I keep having the same page included and refresh it ???
When you refresh the page, the application starts from scratch. All you've stored in memory (i.e. the subPage url) is lost.
You should use a router (ngRoute or ui-router). Clicking on a menu option should change the URL in addition to changing the view. That way, refreshing the page would start the application again, but the router would still see that the URL is the one of a sub page, and would automatically route to that sub page.
You should use a $routeProvider and set your default route ('/') to home.html.
Look here for more info: https://thinkster.io/egghead/routeprovider-api
Sorry as this may be a very open ended question... I am wondering if it is at all possible to display different text when a link is clicked. For example on my personal website if I was to have an "About" or "Contact" link could I switch the text of the body without reloading the page.
In the body of my index.html file I have:
<div class="nav-bar">
<ul class="nav">
<li id="other"><a>About</a></li>
<li id="other"><a>Contact</a></li>
<li id="other"><a>Other</a></li>
</ul>
</div>
And in was wondering if I could using a:active or a:target in a separate CSS style sheet to perform the task as described above or if I need to use JS.
The idea of switching the text of the body without reloading the page is what is commonly known as “single page application”, a rather trendy thing with many benefits and some disadvantages or challenges. It is normally implemented using JavaScript, often using a library or framework, since that’s how we handle programming on web pages.
However, it is possible to achieve the very basic functionality of a single-page application using HTML and CSS only. This functionality means that the page has the content of an entire site and only a selected part of it is visible. You would use :target, which refers to the element that was the target of the most recent link that was followed. (The :active pseudo-class is something very different: it refers to a link or equivalent when it has been activated, typically by clicking on it, and before it has actually been followed – normally, a short time.)
Minimal example:
<!doctype html>
<meta charset=utf-8>
<style>
.section { display: none }
.section:target { display: block }
</style>
<div class="nav-bar">
<ul class="nav">
<li><a href=#About>About</a></li>
<li><a href=#Contact>Contact</a></li>
<li><a href=#Other>Other</a></li>
</ul>
</div>
<div id=About class=section>
About us
</div>
<div id=Contact class=section>
Contact us
</div>
<div id=Other class=section>
Other stuff
</div>
This does not work e.g. on IE 8 and older (which do not support :target), which is one of the reasons why this is a rather theoretical approach.
You are going to need to use Javascript to change things dynamically without page refresh ... This is crude, but will show you how to do what you are expecting ...
NOTE: You must include the <script src="http://code.jquery.com/jquery-1.9.1.js"></script> since I have used a bit of jQuery (A JavaScript library)
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="nav-bar">
<ul class="nav">
<li id="other1" onClick="changeText('other1');"><a>About</a></li>
<li id="other2" onClick="changeText('other2');"><a>Contact</a></li>
<li id="other3" onClick="changeText('other3');"><a>Other</a></li>
</ul>
</div>
<div id="page_content">
PAGE CONTENT!!
</div>
<script>
function changeText(text){
if (text === 'other1'){
$('#page_content').html('About Us!!');
}
if (text === 'other2'){
$('#page_content').html('Contact Us!!');
}
if (text === 'other3'){
$('#page_content').html('Other!!');
}
}
</script>
</body>
</html>
I am using
$('#result').load('http://.... #div');
to get the content of external website. I edited the domain whitelist for PhoneGap. It is working, if I set this page as the index page. However, it can't function well when it is set as the next page by submitting a form. Content from external website is not shown. How can I solve it? Thank you
It's better to use a javascript framework for this and still use a single index.html file. Best practice i have come across is to make an application not multiple html files. There are many frameworks to accomplish this the best documented is jquerymobile.
Using JQueryMobile in your javascript file you would check when page1 div loads using jquerymobile then run your .load code.
JQueryMobile has differen't events it looks out for..in this case before page initiates (pageinit) you want to run the load thing to grab content from the other website.
$( "#page1" ).live( "pageinit",function(){
$('#result').load('http://.... #div'); //place your load here..you can even $.post(function(){..}); to a php script to get exactly what you want.
});
Your html file inside the body tag will have this and of course you need to include jquery and jquerymobile js and css files in between your head tags.
<div data-role="page" id="home" data-theme="a">
<div data-role="header">
<h1>Welcome</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li class="btn_a">Page1</li>
<li class="btn_s">Page2</li>
<li class="btn_l">Page3</li>
</ul>
</div>
<div data-role="footer">
<h4>Your Brand</h4>
</div>
</div>
<div data-role="page" id="page1" data-theme="a">
<div data-role="header">
<h1>Page1 Heading</h1>
</div>
<div data-role="content">
<h1>This is Page1</h1>
<div id="#result"></div>
</div>
<div data-role="footer">
<h4>Your Brand</h4>
</div>
</div>
My application is using JQTouch. The demos show how to GET an html file and display it in the user interface, but I'm loading JSON that I would like to use in a pre-existing DIV. I don't want to create a separate people.html and generate that on the server.
So I have a DIV like this that I would like to load my list of people into the UL.
<div id="people">
<div class="toolbar">
<h1>People</h1>
Back
</div>
<ul class="rounded">
<li class="sep">F</li>
<li>Flintstone, <em>Fred</em></li>
<li>Flintstone, <em>Pebble</em></li>
<li>Flintstone, <em>Wilma</em></li>
<li class="sep">J</li>
<li>Jetson, <em>Elroy</em></li>
<li>Jetson, <em>George</em></li>
<li>Jetson, <em>Jane</em></li>
<li>Jetson, <em>Judy</em></li>
</ul>
</div>
This page is loaded from the start of my application with code that looks like this (it's all in the same HTML page):
..snip..
<li class="arrow">View all</li>
..snip..
What do I need to do to call my people.aspx service which returns JSON? I think I need to use $.getJSON, create a UL from the JSON, and then call something in jqtouch to transition to my people application page (div).
I think you use the goTo function, e.g.
jQT.goTo("#people")
There's a jsfiddle demo here, but it doesn't test the jqTouch functionality.