• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 213
  • Last Modified:

Javascript Menu

Hi there,

Can you please have me out here, I've have done folder tree using JavaScript & JQuery.Now I want to use that tree structure in one page three times (three cols) for different sales units.Please have a look the attachement.  Any idea please?

Regards
folder-tree-dummy.png
0
adnankh
Asked:
adnankh
  • 4
  • 2
1 Solution
 
adnankhAuthor Commented:
Please give any idea,, I've attached the scripts as well.
Demo.js Code:
$(document).ready(function(){
		
	// first example
	$("#navigation").treeview({
		collapsed: true,
		unique: true,
		persist: "location"
	});

	
	// second example
	$("#browser").treeview({
		animated:"normal",
		persist: "cookie"
	});

	$("#samplebutton").click(function(){
		var branches = $("<li><span class='folder'>New Sublist</span><ul>" + 
			"<li><span class='file'>Item1</span></li>" + 
			"<li><span class='file'>Item2</span></li></ul></li>").appendTo("#browser");
		$("#browser").treeview({
			add: branches
			});
	});


	// third example
	$("#red").treeview({
		animated: "fast",
		collapsed: true,
		control: "#treecontrol"
	});


});

Open in new window


<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
	<title>Greater China</title>
	<link rel="stylesheet" href="../jquery.treeview.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
	<script src="../lib/jquery.cookie.js" type="text/javascript"></script>
	<script src="../jquery.treeview.js" type="text/javascript"></script>
	<script type="text/javascript" src="demo.js"></script>
</head>

<body>
<h3>Financial Analysis</h3>
 <ul id="browser" class="filetree">
		<li><span class="folder">Finance Reports</span>
    <ul>
				<li><span class="folder">General Accounting </span>
						<ul id="folder21">
						<li><span class="file">Balance Sheet</span></li>
						<li><span class="file">P & L</span></li>
		</ul>
		</li>
    
		<li><span class="folder">Accounts Payable </span>
					<ul id="folder21">
						<li><span class="file">Balance Sheet</span></li>
						<li><span class="file">Cash Flow</span></li>
						<li><span class="file">Profit & Loss</span></li>
					</ul>
				</li>
     
		 <li><span class="folder">Fixed Assets </span>
					<ul id="folder21">
						<li><span class="file">Asset Register Report</span></li>
						<li><span class="file">Asset Register Report Two</span></li>
					</ul>
				</li> 
				</ul>
			 
		</li>
		<li><span class="folder">Finance Analysis</span>
			<ul>
				<li><span class="folder">Regional Reports</span>
					<ul id="folder21">
						<li><span class="file">CF - Current Year Actual Trading</span></li>
						<li><span class="file">CF - Current Year Period</span></li>
						<li><span class="file">MCB - Current Year Actual Trading</span></li>
						<li><span class="file">MCB - Current Year Period</span></li>
						<li><span class="file">OCOS - Current Year Actual Trading</span></li>
						<li><span class="file">OCOS - Current Year Period</span></li>
					</ul>
				</li>
        
				<li><span class="folder">MOR</span>
					<ul id="folder21">
						<li><span class="file">MOR CF By Current Period</span></li>
						<li><span class="file">MOR MCB By Current Period</span></li>
					</ul>
				</li>
        <li><span class="folder">Other Region</span>
					<ul id="folder21">
						<li><span class="file">Other Region Report-1</span></li>
						<li><span class="file">Other Region Report-2</span></li>
					</ul>
				</li>
				</ul>
		</li>
		<li class="closed"><span class="folder">Misc Finance Reports</span>
			<ul>
				<li><span class="file">More Reports-1</span></li>
				<li><span class="file">More Reports-2</span></li>
			</ul>
		</li>
		<li><span class="file">More Reporting Coming</span></li>
	</ul>

<h3>Financial Analysis</h3>
<ul id="browser1" class="filetree">
		<li><span class="folder">Finance Reports</span>
    <ul>
				<li><span class="folder">General Accounting </span>
						<ul id="folder21">
						<li><span class="file">Balance Sheet</span></li>
						<li><span class="file">P & L</span></li>
		</ul>
		</li>
    
		<li><span class="folder">Accounts Payable </span>
					<ul id="folder21">
						<li><span class="file">Balance Sheet</span></li>
						<li><span class="file">Cash Flow</span></li>
						<li><span class="file">Profit & Loss</span></li>
					</ul>
				</li>
     
		 <li><span class="folder">Fixed Assets </span>
					<ul id="folder21">
						<li><span class="file">Asset Register Report</span></li>
						<li><span class="file">Asset Register Report Two</span></li>
					</ul>
				</li> 
				
			</ul>
			
      
		</li>
		<li><span class="folder">Finance Analysis</span>
			<ul>
				<li><span class="folder">Regional Reports</span>
					<ul id="folder21">
						<li><span class="file">CF - Current Year Actual Trading</span></li>
						<li><span class="file">CF - Current Year Period</span></li>
						<li><span class="file">MCB - Current Year Actual Trading</span></li>
						<li><span class="file">MCB - Current Year Period</span></li>
						<li><span class="file">OCOS - Current Year Actual Trading</span></li>
						<li><span class="file">OCOS - Current Year Period</span></li>
					</ul>
				</li>
        
				<li><span class="folder">MOR</span>
					<ul id="folder21">
						<li><span class="file">MOR CF By Current Period</span></li>
						<li><span class="file">MOR MCB By Current Period</span></li>
					</ul>
				</li>
        <li><span class="folder">Other Region</span>
					<ul id="folder21">
						<li><span class="file">Other Region Report-1</span></li>
						<li><span class="file">Other Region Report-2</span></li>
					</ul>
				</li>
				</ul>
		</li>
		<li class="closed"><span class="folder">Misc Finance Reports</span>
			<ul>
				<li><span class="file">More Reports-1</span></li>
				<li><span class="file">More Reports-2</span></li>
			</ul>
		</li>
		<li><span class="file">More Reporting Coming</span></li>
	</ul>



<h3>Financial Analysis</h3>
<ul id="browser2" class="filetree">
		<li><span class="folder">Finance Reports</span>
    <ul>
				<li><span class="folder">General Accounting </span>
						<ul id="folder21">
						<li><span class="file">Balance Sheet</span></li>
						<li><span class="file">P & L</span></li>
		</ul>
		</li>
    
		<li><span class="folder">Accounts Payable </span>
					<ul id="folder21">
						<li><span class="file">Balance Sheet</span></li>
						<li><span class="file">Cash Flow</span></li>
						<li><span class="file">Profit & Loss</span></li>
					</ul>
				</li>
     
		 <li><span class="folder">Fixed Assets </span>
					<ul id="folder21">
						<li><span class="file">Asset Register Report</span></li>
						<li><span class="file">Asset Register Report Two</span></li>
					</ul>
				</li> 
				
			</ul>
			
      
		</li>
		<li><span class="folder">Finance Analysis</span>
			<ul>
				<li><span class="folder">Regional Reports</span>
					<ul id="folder21">
						<li><span class="file">CF - Current Year Actual Trading</span></li>
						<li><span class="file">CF - Current Year Period</span></li>
						<li><span class="file">MCB - Current Year Actual Trading</span></li>
						<li><span class="file">MCB - Current Year Period</span></li>
						<li><span class="file">OCOS - Current Year Actual Trading</span></li>
						<li><span class="file">OCOS - Current Year Period</span></li>
					</ul>
				</li>
        
				<li><span class="folder">MOR</span>
					<ul id="folder21">
						<li><span class="file">MOR CF By Current Period</span></li>
						<li><span class="file">MOR MCB By Current Period</span></li>
					</ul>
				</li>
        <li><span class="folder">Other Region</span>
					<ul id="folder21">
						<li><span class="file">Other Region Report-1</span></li>
						<li><span class="file">Other Region Report-2</span></li>
					</ul>
				</li>
				</ul>
		</li>
		<li class="closed"><span class="folder">Misc Finance Reports</span>
			<ul>
				<li><span class="file">More Reports-1</span></li>
				<li><span class="file">More Reports-2</span></li>
			</ul>
		</li>
		<li><span class="file">More Reporting Coming</span></li>
	</ul>
</body>

Open in new window


Thank you,
0
 
jayakrishnabhCommented:
create a plugin for the tree structure you created and use it any number of times in a page.
0
 
adnankhAuthor Commented:
Hi Jaya,

I can't get it.. how I can get this done? Please advise more, as I'm not a Developer..

Kind Regards,
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
adnankhAuthor Commented:
Jaya I have done this..only what I want now to all these three tree place next to each other...i.e. say tabular form.. so please advise... Thanks
0
 
adnankhAuthor Commented:
Jaya I've attached my output ..all three folder structure I want next to each other, like parallel..please advise..
folder-tree-vertical.png
0
 
jayakrishnabhCommented:
Add the Treeview plugin(js file) to your project. Reference it in your web page.
To create 3 treeviews , create three divs and name them (say div1, div2, div3)
Now, on document load , please call the addtree method of plugin for the divs to which treeview has to be added.

Sample code is given below.

<script src="TreeViewPlugin.js"></script>

<div id='div1'></div>
        <div id='div2'></div>
        <div id='div3'></div>
    <script>
        $(document).ready(function () {
            $("#div1").addtree();
            $("#div2").addtree();
            $("#div3").addtree();
        });
    </script>
TreeViewPlugin.js
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now