I am new to jquery mobile. Now I want to implement table with multiple columns for tablet UI. How can I implement this multiple columns table concept by using jquery mobile framework. Please guide me if any one did this concept.
Thanks in advance.
Try adding something like this:
<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
<div class="ui-block-c">Block C</div>
This is a grid layout. There is not something like table in JQM, but it may imitate it.
Try this link: jQM Grids
Try out the popular plugin - 960 Grid http://jeromeetienne.github.com/jquery-mobile-960/
It allows for a lot more flexibility in the way you arrange your grids with flexible widths, etc.
By the way, I am not advertising :)
Related
Iv'e using Zurb Foundation like a pretty platform for fast develop light projects. And today i've stucked on one thing.
I don't know how to better call it, easer to show...
http://oi61.tinypic.com/2dkhfuq.jpg
So, it happens when above column have too much content.
Also... columns must have non-fixed height and don't use block-grid! TY!
There are 2 ways to interpret what you're asking for. The first is that you're having a floating issue and the columns are stacking to the right. If you want the white space gone, you'll need a JS plugin like Masonry or Isotope.
The other way to interpret this is that you want these to be at the same height. There are 2 ways to go about this with Foundation: Either wrap each row with:
<div class="row">
<div class="small-12 medium-4 columns"></div>
<div class="small-12 medium-4 columns"></div>
<div class="small-12 medium-4 columns"></div>
</div>
The row class basically runs a clear once it starts so it will give them space. You don't need to use my syntax but it would be a working example. If you want to have all the articles be the same height based on the biggest one, Foundation has a great plugin built in called Equalizer.
Equalizer and my column syntax rely on using Foundation 5.
I want to present dynamically generated (PHP, XML) questionnaires to the user in the browser like this:
requirements:
1. The left column will will always be a number, the middle and the right column may swap position in some questionnaires.
2. There will be questionnaires with 200 items or so over multiple pages.
3. The width of the container (rounded corners) is fixed at 800px at this time, BUT
4. it has to be flexible / fluid in the near future for being displayed on mobile devices like iPad and iPhone
what I've tried
I experimented both with a <table> based and a <div> based layout:
The <table> was clean and simple, but with lots of overhead and not very flexible, e.g. if I swapped middle and right column for item #2 only...
The <div> based layout was sleeker, I let the containers float, but have to set the divs to a fixed width in order to get them align in columns. In a fluid design, I do not know the widths in advance, which will be a mess then...
questions to the pros:
1. <table> or <div>, regarding my requirements above, what would you prefer?
2. is there some magic tool to make this nice and easy?
3. would you rather serve the raw data and let a client-side script (jQuery) do the positioning instead?
Here's a code example: http://codepen.io/anon/pen/inmwD
Either use a wrapping div or a list element
<div class="parent">
<div class="row">
<div class="col1">1</div>
<div class="col2">Content</div>
<div class="col3"><input type="radio"/></div>
</div>
</div>
In my opinion <table> is for tables <div> is for layout.
Yes there are some style templates usually named grid system or css grid take a look at this stack : https://stackoverflow.com/questions/76996/what-is-the-best-css-grid-framework
I wont arrange elements around with JavaScript unless it can't be done with css or is a special requirement from the marketing guys. The con about this is that you increase the page render time.
Take a look at this fiddle made with a custom 960 grid system that have 6 columns with the width 150px
Fixed width: http://jsfiddle.net/UjXPR/
Fluid width: http://jsfiddle.net/UjXPR/1/
960 gs customizer: http://grids.heroku.com/
Checkout bootstrap grid system
1. <table> or <div>, regarding my requirements above, what would you prefer?
div is specially used for layout of the page and table is specially used for placing tabular data. so in your condition I would choose the table layout for the questionnaire.
2. is there some magic tool to make this nice and easy?
First dream to design how should this row data look then only accomplish for the site.
3. would you rather serve the raw data and let a client-side script (jQuery) do the positioning instead?
This is not good idea but if the clients need so you could do that.
And one more thing, you are not asking for your problem with SO but asking what we like, this is not good practice for SO users.
I've been working with jQuery and HTML for a long while but don't have a ton of CSS experience. I have been searching around and have found that with CSS you can make a lot better layouts than with the old school Table layout methods.
However, everything i've been finding appears to be a lot more work and sometimes doesn't seem to be as compatible.
I want to make a layout with a
header/sidebar/ and main detail area.
I have to agree with you, creating a layout using CSS is very difficult. However, there is a library similar to jQuery is to JavaScript call Twitter Bootstrap that makes your goal extremely easy. I highly recommend looking into it.
Twitter Bootstrap - Scaffolding
<div class="row-fluid">
Header
</div>
<div class="row-fluid">
<div class="span2">Side Bar</div>
<div class="span10">Detail Area</div>
</div>
I'm an engineer. All my designer friends keep telling me to use a grid whatever that means.
I want to create a layout similar to facebook (3 column, with a fat center column. How do I do that while using a grid? Where to even start? Thanks
960.gs is a good system to use.
And, SmashingMagazine has a good round-up of examples, articles, tutorials, tools, etc., about grids.
You can use a CSS framework (I use http://960.gs ) to create a grid. If you were using 960, you would do something like the following:
<div class="container_12">
<div class="grid_3>
Leftmost
</div>
<div class="grid_6>
Middle
</div>
<div class="grid_3>
Rightmost
</div>
</div>
There are other grid systems, this is just one I like the best due to it's lack of learning curve.
I'm thinking of using Nathan Smith's 960 Grid System for layout in the ASP.NET MVC site that I'm writing.
I've noticed that all examples of 960.gs usage show HTML that looks like this:
<div class="container_12">
<div class="grid_12">
</div>
<!-- end .grid_12 -->
<div class="clear"></div>
<div class="grid_1">
</div>
<!-- ... -->
</div>
I don't particularly like putting all those grid values inside the HTML itself - it creates clutter and with a lot of content, that can become hard to manage.
Is it possible to somehow put those container and grid values inside an external file that applies grid values based on the id or class attributes of certain tags?
You can't externalize those values. While it would be possible to merge the names into the file such that the names that you designate to the divs are multiple CSS selectors with the grid (i.e.: .sidebar, .grid_3 {...}), this is impractical and makes it nearly impossible to manage and maintain the code. The readability and maintainability that you'd be sacrificing is much more valuable than the semantic goodness that you'd be gaining.
The 960 grid system is pretty ugly on the back end. What you give up in niceness, you gain in simplicity and efficiency of development. Perhaps a different column-based gird system would be better. Consider something like Frame: http://frame.serverboy.net/ (</shameless_plug>) or Blueprint CSS.
Hope this helps.