views:

2336

answers:

3

I'm looking for some sort of jquery plugin (or even plain javascript) that can be used to create report layouts, business card layouts, etc. Not finding anything after lots of googling.

Basically, I'm envisioning a canvas (possibly html5 canvas?) that shows a background grid. At a minimum, text and images can be added to the canvas. Preferably, they can be dragged and dropped.

I'd be happy with anything with any features that are anywhere remotely like this. I expect to have to write it myself. But if there is already something out there, I'd like to see it first.

Just to help clarifiy what I'm looking for, imagine jquery code that would let you layout a business card in a web browser, without using flash. This would include adding text, changing fonts, adding images, adding lines, changing background colors, applying gradients, etc.

I hope someone knows of something that will help!

A: 

280 Slides does some stuff not unlike that, using the Cappuccino framework. Not sure how much work there is to go from the basic framework to what you want, however.

Tobias Cohen
Thanks! Cappuccino looks very interesting and powerful, and the floorplan designer is right along the lines of what I need. I'm glad you pointed it out, as I wasn't aware of it. But I'm already heavily into my project and am using jquery heavily. It will probably be easier to just start from scratch with jquery-ui draggables than learning a new language and framework.
Tauren
A: 

I'm not sure for ready plug-in to your requirements, but with Raphaël—JavaScript Library you can do all above-listed,

Coyod
Wow! Raphael can do some cool stuff, I'm impressed. It's too bad it's using SVG instead of HTML5 Canvas, as it seems that the trend is to move to canvas. But maybe that's not such a bad thing. I'll certainly consider this option.
Tauren
Anyway, it's supports IE6.
Coyod
Out of all the suggestions, I'm most impressed with Raphael, so I'm selecting this as the answer. Although I probably won't use Raphael for my report builder and will just use jquery-ui drag, drop, resize, etc. However, I'll certainly consider using Raphael to enhance it later or for other requirements.
Tauren
A: 

The 'layout' plugin for jquery (http://layout.jquery-dev.net) lets you create layouts, and combining that with jquery's droppable functionality (as their demo indicates) might get you close to what you want, but it uses HTML, not canvas.

On a side note, I don't know of any jquery plugins that use canvas, especially since jquery focuses mainly on html, and canvas is almost entirely javascript driven (from what I understand).

btelles
Thanks. I've played with the Layout demos before and plan to use this component for other purposes. I suppose Layout could work for segmenting a report into 9 regions and then stacking content into them. But when I say "grid", I'm not thinking of just a 3x3 grid, but more like a very simple version of Illustrator. Anyway, I appreciate the suggestion.
Tauren
I see. Hmmm...this might be a tiny bit more helpful: http://editor.pixastic.com/
btelles
Yes, pixastic is quite interesting. I'll take a closer look. Thanks.
Tauren