Hi all
What is the best jquery treeview that can be used to represent some transactions(leaves,vacations...) items.
i found a great treeview on the internet,but the problem is this tree is for folders and directory and not for text items.
when the user click on sub leave for example it will print some text beside that subleave
note: i work on PHP codeigniter framework.
Thank You
jsTree is a good jQuery plugin. It has a ton of options and API calls for working with the tree. I would say that the learning curve at first might be a little steep but it was worth it for me. If you're familiar with jQuery, you'll be able to manipulate the tree in many different ways.
Here is the home page...... http://www.jstree.com/.
A tree is probably not the best design idiom to use for this information. Consider, perhaps, an accordion.
Trees tend to have small nodes, so hard to click and break Fitt's Law. And they really only make sense to programmers and computer geeks. Accordions are a little better, as they have become more common and are at least easier to manipulate.
They are also way easier to code for. And there are tons of jquery plugins that can do it. Even nested, which it sounds like you need.
The goal isn't always to have the fastest UI, either. Consider how common this task is and if it will be better suited to something easier to learn in the first place. Maybe links and sub-pages are the best way to present the information. Don't disregard the useful but old for the flashy and new.
I've used this JQuery plug-in in the past and it works great :
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
It works in an non-intrusive way over nested ul and li HTML elements.
It can work through AJAX to lazy-load nodes by configuring a URL from which you want to load the children of a node. This works great if your tree is big.
$(document).ready(function() {
$('#concept-tree ul').treeview({
url: 'concepts/node'
});
});
To dynamically load content related to a node in another page element you could use some JQuery. You could set an event handler for a node being clicked and fetch extra content through AJAX and append it to the DOM.
Related
I have been trying to delve into web development. Part of this process has been incrementally tweaking things on my website, trying to learn something new with each incremental change.
The problem I'm running into with this is that as the website evolves, I end up doing away with and adding new classes to my HTML elements. Obviously, when I create these selectors in my HTML, I target them in my JavaScript or my CSS, but I often end up going back and doing away with elements. This leaves orphaned references to these selectors in my JavaScript and my CSS, as well as unnecessary/unreferenced classes and ids in the HTML.
My question is is there some utility that I can use to identify these orphaned selectors both in my CSS, HTML, and JavaScript* so that I can safely clean up these files? The solutions suggested so far are great for finding unnecessary selectors in my CSS, but don't seem to help with identifying unnecessary classes or IDs in my HTML, which is also something I'd like to do. Is there something that works both ways as described?
*It sounds like for JavaScript/JQuery there are methods, but for my purposes, my JavaScript is clean enough that I can clean it without help, so its fine if the focus is on CSS and HTML.
For CSS there is a Firefox extension that finds unused CSS selectors on a page. It has an option to spider the whole site. Version 3.01 should work with newer versions of Firefox.
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
And here's another option.
https://addons.mozilla.org/en-US/firefox/addon/css-usage/
for Javascript you are pretty much on your own.
If you are using jquery you can override the $() function calling jQuery() inside that function and checking / loging the value returned from jQuery to ensure all selectors are returning some results. But its not a deterministic way of doing things.
I use Dust-Me Selectors (official site) to find orphaned selectors in my code. Works for Firefox and Opera, unfortunately I do no think it can search JS or PHP code, but will search HTML output.
So essentially I have blocks of text on a page, essentially just about 10 same sizes boxes of text using CSS. I want to be able to order these though - and so drag and drop one. I can code the backend ordering myself - can anyone recommend where to go for the fronnt-end drag and drop? I'm aware that jquery would probably be my best bet, yet I've never used javascript so if there's any sort of code already created for this then that'd be incredibly helpful.
Thanks!
You mean this? http://jqueryui.com/draggable/
Here's jQueryUI's draggable and droppable:
http://jqueryui.com/draggable/
http://jqueryui.com/droppable/
They're kind kind of cute but might well not do what you want.
Here's a pretty straightforward explanation of how to implement drag and drop the HTML5 way:
http://www.w3schools.com/html/html5_draganddrop.asp
(It mostly convinced me to implement my own rather than wait for better HTML5 drag and drop support.)
Here's an example for older browsers:
http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx
There's also draggable.js (and its jQuery port) neither of which I recommend.
Stuff these examples don't really do includes pretty much anything useful. E.g. what if you want to target PARTS of an object or the spaces BETWEEN objects? How can you make targets dynamics based on what's going on in the page. It all gets very ugly very fast.
Sorry not to have a simpler answer.
I'm trying to develop a invoice printing module for the application we're creating (in PHP & Javascript). The thing is... I want our clients to be able to customise their invoice output as in being able to choose where to put their logo and header, how to organize their data output, etc.
I know how I want to do it, but what I don't know is how to put it into practice, so my question is: is there any Javascript or PHP class/module providing an editable canvas/layout? (so I can allow my customers to custom design their documents or reports).
Something being able to handle <div></div> blocks in a graphical way, similar to what tag editors do, returning a serialized array or something like that... well, anything would actually do, as long as I'm able to integrate it in our codebase, but that's the question...
I couldn't find anything like what you are looking for but it shouldn't be too hard to create one.
I wouldn't go for a canvas based solution but rather on an absolutely positioned DIVs with drag and drop functionality and inline content editing.
You can easily serialize the content and position of the DIVs using Ajax.
The tutorial here is not what you are lookign for but it's the first step in the way: http://devheart.org/articles/jquery-customizable-layout-using-drag-and-drop/
update
Obviously this: http://jqueryui.com/demos/draggable/ is also an important reference
I have been searching for a javascript treeview control which supports 'on the fly' searching, filtering (similar to auto complete box).
I found ExtJS which has that feature but it's too big (~800 KB js). I also like jquery TreeTable control but I'm not sure it supports that feature.
Please advise. Any suggestion is welcome, thanks a lot.
I suggest jstree, it does come along with some nice plugins, such as a json plugin to fetch nodes from a server, as well as a search plugin.
It's not a perfect solution for your desired search behavior but you may use this to your advantage:
"The search plugin enables searching for nodes whose title contains a given string, works on async trees too. All found nodes get the jstree-search class applied to their contained a nodes - you can use that class to style search results."
So if you know that all nodes get this class, you could easily hide all nodes beforehand and then let the search plugin add this class which overrides(!important) the display attribute of the css class.
You can take a look at this article 8 Useful JQuery TreeView Examples
Check out the TreeView component from obout.com. It's ASP.NET, though.
Try http://www.addobject.com/nlstree this is a commercial solution, but the best I have come across. Well documented, quite flexible and has a good overall performance. Its behavior can be easily extended using various events it exposes.
If this one doesn't work for your requirement, better start coding one.
Go for jstree. Its light and good.
800 KB in a web site or web application is not too much nowadays.
Enter Google, type "jquery treeview plugin" (instant search turned on) and you'll download about 250 KB and you didn't even blinked.
I'm not the big fan of Ext JS and I'm amazed of jQuery + jQuery UI + plugins + jQuery tools, etc. But Ext JS TreeView is incredibly useful and ready to be used.
There are lots of possibilities with TreeView (even TreeGrid, which I think is the TreeTable your are looking for).
You can also try to create your own Ext JS treeview bundle (they used to have an Ext JS builder, but it's not available any more) with just required dependencies.
I think the main problem when using Ext JS is when you draw complex interfaces, like:
http://dev.sencha.com/deploy/dev/examples/feed-viewer/view.html
http://dev.sencha.com/deploy/dev/examples/desktop/desktop.html
http://dev.sencha.com/deploy/dev/examples/calendar/index.html
But you can try a complex example of TreeView (a TreeGrid) and you'll see it's not too much:
http://dev.sencha.com/deploy/dev/examples/treegrid/treegrid.html
Hope this helps
We have an ancient application that basically duplicates a file explorer, outlook style application in html (menu and toolbar on top, tree on the left, gridview on the right, and yes I know it is a bad idea to bring desktop UI to the web, but it was 2000 and seemed like a good idea at the time). The main problem (other than the HTML is from ~2000) is that it is an Internet Explorer only application, and due to the horrible html is a nightmare to update.
What is the best set of HTML/CSS/Javascript/PHP libraries to achieve this? I have looked a YUI, MooTools, JQuery, and a bunch of others but none seem to have exactly what I need. I would prefer if I could just use PHP libraries, but good HTML/CSS/Javascript libraries would be fine too. The requirements are:
Menus (Top Menu and Context Menu).
Tree (preferably ajax, lazy loading, we have 5000 nodes in the tree and it takes a while to load now).
Windows and Modal Dialog boxes.
Splitter for the Grid and the TreeView.
Nice to haves
Heirachacal grid.
Tool tips.
Thanks in advance for the suggestions...
Have you checked Qooxdoo or Capuccino? It looks like they might cover the UI necessities that you have for this particular project, given that they are oriented to provide the GUI Desktop goodness to the web; make sure to check their demos.
As for the Server side PHP part, I would certainly try to taylor it to my needs but If I had to choose a framework I would go for Yii, Code Igniter or CakePHP, depending of your scalability needs.
Cheers!
I would suggest looking at ExtJS for this sort of thing. You can then quite easily send data between it and PHP using JSON. The grids and trees are very easy to populate from a URL that will provide JSON.