Intended layout:
------------------------
| (back) (title) |
------------------------
| (tab1) (tab2) (tab3) |
------------------------
| |
| |
| |
| |
| |
| |
| |
| |
| |
------------------------
The intent here is to have a dojox.mobile.Heading right at the top, a dojox.mobile.TabBar beneath it, and the rest of the screen taken up by the content, as depicted above.
When the user navigates between the various screens within the app, the Heading must change (title and back button), but the TabBar does NOT change. On some screens however, the TabBar is hidden.
Now I am trying to figure out how to do this w.r.t. to dojox.mobile.Views. I see two potential ways of achieving this:
Have both the Heading and the TabBar in a root View, which contains several sub Views which the TabBar navigates between. Rewrite the contents of the Heading, triggered by navigation events on the TabBar.
Have several Views which contain a Heading, and an empty div. Rewrite the empty div's contents with the contents of a div somewhere else in the page, not contained within any View, which contains a Heading.
Which of the above methods is the preferred/ standard way of accomplishing this in DOJO mobile?
Are there yet more ways in which this can be accomplished?
Thanks!
You can also just put the heading and the tab bar at the toplevel (i.e. as direct children of your body), both with a fixed="top" attribute. They will be stacked one below the other. Then just put your different views after that (still as children of the body).
Below is a sample that shows this solution (no Back button in the heading, but you get the idea...). Save this in an HTML file in the dojox/mobile/tests directory of your Dojo install to run it. This is for Dojo 1.7.2.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Heading + TabBar</title>
<link href="../themes/iphone/base.css" rel="stylesheet">
<link href="../themes/iphone/TabBar.css" rel="stylesheet">
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true"></script>
<script type="text/javascript">
require([
"dojo/ready",
"dojo/_base/array",
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/compat",
"dojox/mobile/ScrollableView",
"dojox/mobile/TabBar"
], function(ready, array){
ready(function(){
var f = function(view, moveTo, dir, transition, context, method){
var child = array.filter(this.getChildren(), function(w){
return w.moveTo === view.id; })[0];
if(child){
child.select();
heading.set("label", child.get("label"));
}
};
tabBar.subscribe("/dojox/mobile/afterTransitionIn", f);
tabBar.subscribe("/dojox/mobile/startView", f);
})
});
</script>
<style>
html, body{
height: 100%;
overflow: hidden;
}
</style>
</head>
<body style="visibility:hidden;">
<h1 jsId="heading" data-dojo-type="dojox.mobile.Heading" data-dojo-props='fixed:"top"'>Heading</h1>
<ul jsId="tabBar" data-dojo-type="dojox.mobile.TabBar" data-dojo-props='fixed:"top"' style="border-bottom:none;">
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-16.png", icon2:"images/tab-icon-16h.png", moveTo:"featured"'>Featured</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-15.png", icon2:"images/tab-icon-15h.png", moveTo:"categ"'>Categories</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-10.png", icon2:"images/tab-icon-10h.png", moveTo:"top25"'>Top 25</li>
</ul>
<div id="featured" data-dojo-type="dojox.mobile.ScrollableView">
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"categ"'>
Categories
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"top25", transitionDir:-1'>
Top 25
</li>
</ul>
</div>
<div id="categ" data-dojo-type="dojox.mobile.ScrollableView">
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"top25"'>
Top 25
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"featured", transitionDir:-1'>
Featured
</li>
</ul>
</div>
<div id="top25" data-dojo-type="dojox.mobile.ScrollableView">
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"featured"'>
Featured
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"categ", transitionDir:-1'>
Categories
</li>
</ul>
</div>
</body>
</html>
Related
Im new to React.js and im using jQuery in my react project to identify mouse and click event, based on that cloning the navigation <li> list of <a> tags and displaying in targeted div id, everything working fine, but clicking on the newly generated link loading the whole page rather than small part of the screen, i know newly cloned jquery code has href and but react wanted <Link> and here is my minified version of code to understand the problem
// minified code
class Sidebar extends Component {
componentDidMount() {
$(".navigation").on("mouseenter click", ".navigation-menu > li", function() {
generateLinks($(this))
});
function generateLinks(e) {
var links = e.find("li");
var generatedMenuLinks = links.clone().appendTo("#targetDiv");
// rest of the code
}
}
render() {
return(
<div className="navigation">
<ul className="navigation-menu">
<li class="menu1">
<Link to="/menu1/data1">Menu1Data1</Link>
<Link to="/menu1/data2">Menu1Data2</Link>
<Link to="/menu1/data3">Menu1Data3</Link>
</li>
<li class="menu2">
<Link to="/menu2/data1">Menu2Data1</Link>
<Link to="/menu2/data2">Menu2Data2</Link>
<Link to="/menu2/data3">Menu2Data3</Link>
</li>
<li class="menu3">
<Link to="/menu3/data1">Menu3Data1</Link>
<Link to="/menu3/data2">Menu3Data2</Link>
<Link to="/menu3/data3">Menu3Data3</Link>
</li>
</ul>
</div>
);
}
}
Thank you in advance
class Sidebar extends Component {
render() {
return(
<div className="navigation" onClick={() => {
/*
DO WHAT EVER YOU WANT HERE YOU CAN
USE .map() ON AN ARRAY THAT HAS YOUR
DATA AND RETURN <li> WITH WHAT EVER YOU
WANT. MAKE SURE TO USE CURLY BRACES
ANY WHERE YOU WANT TO INCLUDE JAVASCRIPT!
*/
}}>
<ul className="navigation-menu">
<li class="menu1">
<Link to="/menu1/data1">Menu1Data1</Link>
<Link to="/menu1/data2">Menu1Data2</Link>
<Link to="/menu1/data3">Menu1Data3</Link>
</li>
<li class="menu2">
<Link to="/menu2/data1">Menu2Data1</Link>
<Link to="/menu2/data2">Menu2Data2</Link>
<Link to="/menu2/data3">Menu2Data3</Link>
</li>
<li class="menu3">
<Link to="/menu3/data1">Menu3Data1</Link>
<Link to="/menu3/data2">Menu3Data2</Link>
<Link to="/menu3/data3">Menu3Data3</Link>
</li>
</ul>
</div>
);
}
}
Try something like what I dropped in there. Read the comment in the arrow function. I hope that helps. Like Boy With Silver Wings said React doesn't play well with jQuery. It uses JSX.
Suerte
I am trying to get the sidenav to work for the Materializecss framework.
MATERIALIZECSS http://next.materializecss.com/getting-started.html
SIDENAV DEMO http://next.materializecss.com/sidenav.html
MY CODEPEN https://codepen.io/gregoryksanders/pen/RxoyqB
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/
</head>
<body>
<ul id="slide-out" class="sidenav">
<li><i class="material-icons">cloud</i>First Link With Icon</li>
<li>Second Link</li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
<i class="material-icons">menu</i>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/js/materialize.min.js"></script>
</body>
3 Days trying to figure this out :/ so any help is welcomed.
The problem is that you should initialize the side-nav in Javascript code like this
var elem = document.querySelector('.sidenav');
var instance = new M.Sidenav(elem);
// with jquery
$(document).ready(function(){
$('.sidenav').sidenav();
});
now your code will work perfect
var elem = document.querySelector('.sidenav');
var instance = new M.Sidenav(elem);
// Initialize collapsible (uncomment the lines below if you use the dropdown variation)
// var collapsibleElem = document.querySelector('.collapsible');
// var collapsibleInstance = new M.Collapsible(collapsibleElem, options);
// Or with jQuery
$(document).ready(function(){
$('.sidenav').sidenav();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/js/materialize.min.js"></script>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/
</head>
<body>
<ul id="slide-out" class="sidenav">
<li><div class="user-view">
<div class="background">
<img src="images/office.jpg">
</div>
<img class="circle" src="images/yuna.jpg">
<span class="white-text name">John Doe</span>
<span class="white-text email">jdandturk#gmail.com</span>
</div></li>
<li><i class="material-icons">cloud</i>First Link With Icon</li>
<li>Second Link</li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
<i class="material-icons">menu</i>
<!-- Compiled and minified JavaScript -->
</body>
On the materialize website, this code is given to initialize Sidenav bar
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, options);
});
but You modify This code and remove option in var instance and now code look like and you should paste this code in your script tag or your javascript file
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});
Now I explain what is the problem in upper code that given on the materialize website
in code, variable instances give 2 arguments 1st argument is elems and 2nd argument is the option that is not defined in your code so you remove the option argument in this code to solve this problem
Initialization is the most important thing when using materialize.js, for example i want to initialize a carousel.
// Javascript
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('.carousel').carousel();
});
I'm making a list of collapsible items that can make calls to itself to scroll to and expand other items on the fly. Shooting for this...
Before selecting the hyperlink.
After selecting.
How can I get the First collapsed item to expand when the link to it in the Third item's paragraph is selected?
What I got: If the example above had more collapsed items, then the code below would scroll the webpage to the desired collapsible item (half the solution).
<!DOCTYPE html>
<html>
<head>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
<div>
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i><a name="987"/>First</a></div>
<div class="collapsible-body"><p>Hello StackOverflow! SO's da' bomb diggidy!</p></div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Second</div>
<div class="collapsible-body"><p>Why is the person who invests your money called a broker?</p></div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Third</div>
<div class="collapsible-body"><p>I'd like to open the First collapsible element in this list.</p></div>
</li>
</ul>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
I would just trigger click event on first .collapsible-header item, with slightly changed html code for the anchor:
$('[data-click]').on('click', function (e) {
$( $(this).data('click') ).trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet"/>
<div>
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>First</div>
<div class="collapsible-body">
<p>Hello StackOverflow! SO's da' bomb diggidy!</p>
</div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Second</div>
<div class="collapsible-body">
<p>Why is the person who invests your money called a broker?</p>
</div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Third</div>
<div class="collapsible-body">
<p>I'd like to open the First collapsible element in this list.</p>
</div>
</li>
</ul>
</div>
Same code is also on Fiddle.
If you wish to target n-th element, than you can use jQuery :eq() selector (zero based). For example, to target 3rd item you would use '.collapsible-header:eq(2)' selector.
If you care about the SEO (and you should), than your links should have correct href. In this case add unique IDs to .collapsible_header elements and use slightly different script to exploit it:
$('[data-click]').on('click', function (e) {
$( $(this).attr('href') ).trigger('click');
});
where the target item is:
<div id="about_stackoverflow" class="collapsible-header">
and the valid local link is:
open the First collapsible element
You can see it working on this Fiddle. (The last anchor may be anywhere on the same page)
I've just copied the demo code from the site http://www.jstree.com/ of jstree and tried to add the option of new node. There is no error but it don't add new node.
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsTree test</title>
<!-- 2 load the theme CSS file -->
<link rel="stylesheet" href="dist/themes/default/style.min.css" />
</head>
<body>
<!-- 3 setup a container element -->
<div id="jstree">
<!-- in this example the tree is populated from inline HTML -->
<ul>
<li>Root node 1
<ul>
<li id="child_node_1">Child node 1</li>
<li>Child node 2</li>
</ul>
</li>
<li>Root node 2</li>
</ul>
</div>
<button>demo button</button>
<!-- 4 include the jQuery library -->
<script src="dist/libs/jquery.js"></script>
<!-- 5 include the minified jstree source -->
<script src="dist/jstree.min.js"></script>
<script>
$(function () {
// 6 create an instance when the DOM is ready
$('#jstree').jstree();
// 7 bind to events triggered on the tree
$('#jstree').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
// 8 interact with the tree - either way is OK
$('button').on('click', function () {
$('#jstree').jstree(true).select_node('child_node_1');
//$('#jstree').jstree().create_node(null,'AAA','last'); first option
//$("#jstree").jstree("create_node", $("j1_3"), "after", { "data": "Hello");
$('#jstree').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree').select_node('child_node_1');
});
});
</script>
</body>
</html>
Look at remarked lines. No error but don't add rhe new node. Does somebody have any idea?
try this..
$('#jstree').jstree("create_node", "parent_id", function(e,data){
console.log('hi', data);
});
Trying to understand how Javascript and HTML5 work. I have a nav and when you press Part One I'm trying to show Content 1, when you press Part Two..etc. I have tried a couple things, and I am clearly not understand the .next properly, but I can only get it to show the first element, but when I press Part Two, Content Two doesn't show. I guess I am visualizing it wrong, instead of .first(), .next made sense to me since I feel like that would just get the next element. Anyways, here's some code, thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Assignment 6 | jQuery Usability </title>
<link rel="stylesheet" href="stylesheet.css">
<!-- This matches the CSS width to the device width, and prevents forced overview without disabling zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Helpful for older Blackberries -->
<meta name="HandheldFriendly" content="True">
<!-- Helpful for older IE mobile -->
<meta name="MobileOptimized" content="320">
<!-- Apple iOS-specific -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- enforce CSS3 media queries in IE 8 and older -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- Note: this won't work when testing locally; you'll need to upload your files to a server to test it in IE -->
<!-- HTML5shiv, for IE 6, 7 and 8 -->
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('ul').hide();
$('a.btnDown').click(function() {
$('nav>ul').fadeIn(200);
}); //closes a.btnDown
$('a.contentDown').click(function() {
$('body>aside>ul').first().fadeIn(200);
}); //closes contentDown
}); //closes .ready()
</script>
</head>
<body>
<nav>
<h1><a class="btnDown" href="#"> Main Menu </a></h1>
<ul>
<li><a class="contentDown" href="#"> Part One </a></li>
<li><a class="contentDown" href="#"> Part Two </a></li>
<li><a class="contentDown" href="#"> Part Three </a></li>
<li><a class="contentDown" href="#"> Student Notes 1 </a></li>
<li><a class="contentDown" href="#"> Student Notes 2 </a></li>
<li><a class="contentDown" href="#"> Student Notes 3</a></li>
</ul>
</nav>
<aside>
<ul>
<li> Content 1 </li>
</ul>
<ul>
<li> Content 2 </li>
</ul>
<ul>
<li> Content 3 </li>
</ul>
<ul>
<li> Content 4 </li>
</ul>
<ul>
<li> Content 5 </li>
</ul>
<ul>
<li> Content 6 </li>
</ul>
</aside>
<figure>
<!-- PUT TV IMAGE HERE -->
</figure>
</body>
</html>
With the given markup, the easiest solution is to work with the index of the elements as shown below
$(document).ready(function () {
$('ul').hide();
$('a.btnDown').click(function () {
$('nav>ul').fadeIn(200);
return false;
}); //closes a.btnDown
//all the content elements
var $suls = $('body>aside>ul');
var $as = $('a.contentDown').click(function () {
//hide visible content item
$suls.filter(':visible').hide();
//display the content item in the same position as the clicked contentDown
$suls.eq($as.index(this)).fadeIn(200);
}); //closes contentDown
}); //closes .ready()
Demo: Fiddle
You can use:
$('ul').hide();
$('a.btnDown').click(function () {
$('nav>ul').fadeIn(200);
});
$('a.contentDown').click(function () {
var idx = $(this).index('.contentDown');
$('body>aside>ul:eq(' + idx + ')').fadeIn(200).siblings('ul').hide();
});
Fiddle Demo