jQuery Treeview with MODx Wayfinder
I’ve begun creating a site for a friend of mine who will sell diving, Asian Diving Vacation (please don’t bitch about the way it looks at this point, it’s a work in progress, the only reason I’m linking to it at this point is because there is also a lot of bitching about demos going on, so here you go demo freaks) . I’m using MODx because it simply rocks for the purpose, we don’t need any strange modules that would require something from the giant repositories of Drupal or Joomla.
There will be a lot of information on the site and I hate drop down menus because they don’t keep state when you browse, a tree view would though. The one I chose is made by Jörn Zaefferer.
Treeview requires jQuery cookie by Klaus Hartl to remember its state.
First of all you have to uninstall the QuickEdit module because it will inject MooTools into the HTML and that could cause problems with jQuery and/or some of its plugins. I don’t want to remap the jQuery function either.
Before we begin in earnest you might want to check out the prior MODx tutorial if you’re a beginner.
Yet again I’m using YAML as the layout template, by just dropping the whole framework in a subfolder of the templates folder: C:\wamp\www\asd\assets\templates\asd is the full path to it on my machine. The CSS below makes use of treeview images which I simply copied to the asd/examples/images folder.
Let’s start out with the modified layout_2col_left_13.html example which I’ve chosen for this project:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>[(site_name)] - [*pagetitle*]</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- (en) Add your meta data here -->
<!-- (de) Fuegen Sie hier ihre Meta-Daten ein -->
<link href="[(base_url)]assets/templates/asd/examples/02_layouts_2col/css/layout_2col_left_13.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 7]>
<link href="[(base_url)]assets/templates/asd/examples/02_layouts_2col/css/patches/patch_2col_left_13.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type="text/javascript" src="[(base_url)]assets/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="[(base_url)]assets/js/jquery.cookie.js"></script>
<script type="text/javascript" src="[(base_url)]assets/js/jquery-treeview/jquery.treeview.pack.js"></script>
<script type="text/javascript" src="[(base_url)]assets/js/asd.js"></script>
</head>
<body>
<div id="page_margins">
<div id="page">
<div id="header"></div></div>
<!-- begin: main content area #main -->
<div id="main">
<!-- begin: #col1 - first float column -->
<div id="col1">
<div id="col1_content" class="clearfix">
<div id="english-select"><a href="#">English</a></div>
<div id="treemenu-english">
[[Wayfinder? &startId=`18`]]
</div>
<div id="german-select"><a href="#">Deutsch</a></div>
<div id="treemenu-german">
[[Wayfinder? &startId=`19`]]
</div>
</div>
</div>
<!-- end: #col1 -->
<!-- begin: #col3 static column -->
<div id="col3">
<div id="col3_content" class="clearfix"> <a id="content" name="content"></a>
<!-- skiplink anchor: Content -->
<h2>[*longtitle*]</h2>
[*content*]
</div>
<div id="ie_clearing"> </div>
<!-- End: IE Column Clearing -->
</div>
<!-- end: #col3 -->
</div>
<!-- end: #main -->
<!-- begin: #footer -->
<div id="footer">Footer with copyright notice and status information<br />
Layout based on <a href="http://www.yaml.de/">YAML</a></div>
<!-- end: #footer -->
</div>
</div>
</body>
</html>As you can see we have two trees, one for the English content and one for the German content. To get a better picture of what’s really happening we need to check the contents of the asd.js file:
function hideShow(id, target_id){
treeView(target_id);
$("#"+id).click(function () {
if($.cookie(target_id) != 'shown'){
$("#"+target_id).show('slow');
$.cookie(target_id, 'shown');
}else{
$("#"+target_id).hide('slow');
$.cookie(target_id, 'hidden');
}
});
if($.cookie(target_id) != 'shown')
$('#'+target_id).hide();
}
function treeView(wrapper_id){
$("#"+wrapper_id+" ul:first").attr('css', 'treeview').treeview({
collapsed: true,
unique: true,
persist: "cookie",
cookieId: wrapper_id+"treeview"
});
}
$(document).ready(function(){
hideShow('english-select', 'treemenu-english');
hideShow('german-select', 'treemenu-german');
});We begin with setting each tree menu with its own cookie to remember the state, we also add the treeview class, more on that later in the CSS part. Next we implement our own custom toggle function to hide each menu and remember the state while we’re at it. Finally we hide everything that isn’t shown, hopefully that will initially hide all trees from a new visitor so that she can choose language by herself.
The above code is somewhat buggy when browsing two languages at the same time, at least initially. Fixing this is low priority as dual language browsing should be a rare event.
So far the only CSS work that has been done is through some additions to layout_2col_left_13.css, starting at about line 30:
body{
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#page{
background: #680805;
border: 0px;
margin: 0 0 0 0;
}
#page_margins{
background: #680805;
/*border: 10px #680805 solid;*/
border-top:0px;
}
#main{
background: #680805;
color: #fbbc4e;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#header{
background: #680805 url(../../images/top_bg_image.jpg) no-repeat;
height:130px;
padding: 0 0 0 0;
margin: 0 0 0 0;
width:960px;
}
#nav{
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#nav_main{
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#col1_content a{
color: #fbbc4e;
}
#col1_content{
border-right:dashed 1px;
border-color:#fbbc4e;
}
#col3_content{
color: #fbbc4e;
padding: 20px 10px 0 20px;
}
#col3_content h2{
color: #fff;
}
.normalText strong{
color:#fff;
font-weight:bolder;
font-size:14px;
}
.treeview, .treeview ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt;
padding:0pt;
}
.treeview ul {
background-color: #680805;
margin-top:4px;
}
.treeview .hitarea {
background:transparent url(../../images/treeview-famfamfam.gif) no-repeat scroll -64px -25px;
cursor:pointer;
float:left;
height:16px;
margin-left:-16px;
width:16px;
}
* html .hitarea {
display:inline;
float:none;
}
.treeview li {
margin:0pt;
padding:3px 0pt 3px 16px;
}
.treeview a.selected {
background-color:#EEEEEE;
}
#treecontrol {
display:none;
margin:1em 0pt;
}
.treeview .hover {
color:red;
cursor:pointer;
}
.treeview li {
background:transparent url(../../images/treeview-red-line.gif) no-repeat scroll 0pt;
}
.treeview li.collapsable, .treeview li.expandable {
background-position:0pt -176px;
}
.treeview .expandable-hitarea {
background-position:-80px -3px;
}
.treeview li.last {
background-position:0pt -1766px;
}
.treeview li.lastCollapsable, .treeview li.lastExpandable {
background-image:url(../../images/treeview-famfamfam.gif);
}
.treeview li.lastCollapsable {
background-position:0pt -111px;
}
.treeview li.lastExpandable {
background-position:-32px -67px;
}
.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea {
background-position:0pt 50%;
}There is a lot of treeview specific stuff, if you forget something here the plugin might not work properly. If you do “Show CSS” in WebDeveloper at the treeview demo page you will see all CSS that is required for any setup to work. Since I’m not using folders I’ve thrown that part out.
I’ve also been able to turn on nice urls in Tools -> Configuration, step two is opening ht.access and editing it according to the instructions in it. After that is setup don’t forget to link for instance images properly in your articles, this is the way it looks for me at the moment: [(base_url)]assets/images/image.jpg
Related Posts
Tags: css, html, Javascript, jquery, MODx, treeview, wayfinder, yaml