Hi,
Here I am going to explain how to design a table which supports mobile also using jquery mobile.
Before we are going to work with jquery mobile we just need to include the following files
into our visualforce page.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
in the above
The meta viewport tag specifies how the browser should control the page zoom level and dimensions. By default, mobile devices assume that pages are about 900 pixels wide. This is to make it work well with existing desktop sites, but the screens may look zoomed out and too wide. By setting the viewport attributes, the browser is set to the screen width of the device - and the content remains at the correct scale.
We just need to use html table and use <apex:repeat> tag to display our records.
We need to use different attributes which are supported by jquery mobile to design our table
like dat-role,data-mode etc in table tag
Eg:
===
Controller:
============
public class Accountdislaycls {
public List<Account> lstaccount{get;set;}
public Accountdislaycls(){
lstaccount=new List<Account>();
lstaccount=[select id,name,industry,type from Account];
}
}
==================
Visualforce page:
======================
<apex:page controller="Accountdislaycls" standardstylesheets="false" showHeader="false">
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>dialog demo</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"/>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<style>
th
{
border-bottom: 1px solid #d6d6d6;
}
tr:nth-child(even)
{
background:#e9e9e9;
}
</style>
</head>
<div data-role="page">
<div data-role="header">
<h1>Account Table</h1>
</div>
<div data-role="main">
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" data-column-btn-text="Click me to hide or show columns!">
<thead>
<th data-priority="1">Account Id</th>
<th data-priority="2">Account Name</th>
<th data-priority="3">Type</th>
<th data-priority="4">Industry</th>
</thead>
<tbody>
<apex:repeat value="{!lstaccount}" var="act">
<tr>
<td>{!act.id}</td>
<td>{!act.name}</td>
<td>{!act.type}</td>
<td>{!act.industry}</td>
</tr>
</apex:repeat>
</tbody>
</table>
</div>
<div data-role="footer">
<h1>Account Details</h1>
</div>
</div>
</apex:page>
in the above example
data-role="page" is the page displayed in the browser
data-role="header" creates a toolbar at the top of the page (often used for title or search buttons)
data-role="main" defines the content of the page, like text, images, buttons, forms, etc.
"ui-content" class adds extra padding and margin inside the page content
data-role="footer" creates a toolbar at the bottom of the page
Inside these containers, you can add any HTML elements - paragraphs, images, headings, lists, etc.
data-role="table" defines the table which can use properties from jquery mobile
Use class 'ui-responsive" to support responsive design
data-mode="columntoggle" hide columns when there is not enough width to display the data.
jQuery Mobile will hide columns from the right side of the table.
However, you are allowed to specify which column that should be hidden or shown in a specific order.
Add the data-priority attribute to the table's header (<th>) and specify a number between 1 (highest priority) to 6 (lowest priority)
Note:
====
If we do not specify a priority for a column,
the column will be persistent and not available for hiding.
output:
Here I am going to explain how to design a table which supports mobile also using jquery mobile.
Before we are going to work with jquery mobile we just need to include the following files
into our visualforce page.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
in the above
The meta viewport tag specifies how the browser should control the page zoom level and dimensions. By default, mobile devices assume that pages are about 900 pixels wide. This is to make it work well with existing desktop sites, but the screens may look zoomed out and too wide. By setting the viewport attributes, the browser is set to the screen width of the device - and the content remains at the correct scale.
We just need to use html table and use <apex:repeat> tag to display our records.
We need to use different attributes which are supported by jquery mobile to design our table
like dat-role,data-mode etc in table tag
Eg:
===
Controller:
============
public class Accountdislaycls {
public List<Account> lstaccount{get;set;}
public Accountdislaycls(){
lstaccount=new List<Account>();
lstaccount=[select id,name,industry,type from Account];
}
}
==================
Visualforce page:
======================
<apex:page controller="Accountdislaycls" standardstylesheets="false" showHeader="false">
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>dialog demo</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"/>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<style>
th
{
border-bottom: 1px solid #d6d6d6;
}
tr:nth-child(even)
{
background:#e9e9e9;
}
</style>
</head>
<div data-role="page">
<div data-role="header">
<h1>Account Table</h1>
</div>
<div data-role="main">
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" data-column-btn-text="Click me to hide or show columns!">
<thead>
<th data-priority="1">Account Id</th>
<th data-priority="2">Account Name</th>
<th data-priority="3">Type</th>
<th data-priority="4">Industry</th>
</thead>
<tbody>
<apex:repeat value="{!lstaccount}" var="act">
<tr>
<td>{!act.id}</td>
<td>{!act.name}</td>
<td>{!act.type}</td>
<td>{!act.industry}</td>
</tr>
</apex:repeat>
</tbody>
</table>
</div>
<div data-role="footer">
<h1>Account Details</h1>
</div>
</div>
</apex:page>
in the above example
data-role="page" is the page displayed in the browser
data-role="header" creates a toolbar at the top of the page (often used for title or search buttons)
data-role="main" defines the content of the page, like text, images, buttons, forms, etc.
"ui-content" class adds extra padding and margin inside the page content
data-role="footer" creates a toolbar at the bottom of the page
Inside these containers, you can add any HTML elements - paragraphs, images, headings, lists, etc.
data-role="table" defines the table which can use properties from jquery mobile
Use class 'ui-responsive" to support responsive design
data-mode="columntoggle" hide columns when there is not enough width to display the data.
jQuery Mobile will hide columns from the right side of the table.
However, you are allowed to specify which column that should be hidden or shown in a specific order.
Add the data-priority attribute to the table's header (<th>) and specify a number between 1 (highest priority) to 6 (lowest priority)
Note:
====
If we do not specify a priority for a column,
the column will be persistent and not available for hiding.
output:
