enter image description here
My code:
<div style="margin-bottom:3px">
<input type="hidden" id="CollectorID" name="CollectorID" value="">
<input class="easyui-textbox" id="ManageUnit" name="ManageUnit" style="width:100%" labelPosition="left" data-options="label:'Đơn vị:', readonly:true, multiline: true"> #*Đơn vị quản lí*#
</div>
<div style="margin-bottom:3px">
<input type="hidden" id="CollectorID" name="CollectorID" value="">
<input class="easyui-textbox" id="CarPlate" name="CarPlate" style="width:100%" labelPosition="left" data-options="label:'Số hiệu:', readonly:true, multiline: true">
</div>
<div style="margin-bottom:3px">
<input class="easyui-textbox" id="Speed" name="Speed" style="width:100%" labelPosition="left" data-options="label:'Tốc độ:', readonly:true, multiline: true">
</div>
<div style="margin-bottom:3px">
<input class="easyui-textbox" id="Lat" name="Lat" style="width:100%" labelPosition="left" data-options="label:'Vĩ độ:', readonly:true, multiline: true">
</div>
<div style="margin-bottom:3px">
<input class="easyui-textbox" id="Lng" name="Lng" style="width:100%" labelPosition="left" data-options="label:'Kinh độ:', readonly:true, multiline: true">
</div>
<div style="margin-bottom:3px">
<input class="easyui-textbox" id="Address" name="Address" style="width:100%" labelPosition="left" data-options="label:'Địa chỉ:', readonly:true, multiline: true">
</div>
<hr />
<div class="clearfix" style="margin-bottom:20px">
Đóng
</div>
Can anyone show me how to modify (shorten) the distance between Easyui-textbox and its label?
Related
I'm not sure if some other CSS is messing with the way that I'm creating the site, but I cannot get the two angular-material cards to stay side by side. How can I do this?
<div class="container">
<div class="">
<mat-card>
<mat-card-header>
<mat-card-title>Leading Organization</mat-card-title>
<mat-card-subtitle></mat-card-subtitle>
</mat-card-header>
<mat-divider inset="true"></mat-divider>
<mat-card-content>
<div class="col s6">
<label>Strategic perspective </label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Strategic"></mat-slider>
</p>
</div>
<div class="col s6">
<label>Being a quick study </label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Quick"></mat-slider>
<!--<input type="text" id="quick" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Quick" required />-->
</p>
</div>
<div class="col s6">
<label>Decisiveness</label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Decisive"></mat-slider>
<!--<input type="text" id="decisiveness" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Decisive" required />-->
</p>
</div>
<div class="col s6">
<label>Change management</label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Change"></mat-slider>
<!--<input type="text" id="change" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Change" required />-->
</p>
</div>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-header>
<mat-card-title>Leading Self</mat-card-title>
<mat-card-subtitle></mat-card-subtitle>
</mat-card-header>
<mat-divider [inset]="true"></mat-divider>
<mat-card-content>
<div class="col s6">
<label>Taking initiative</label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Taking"></mat-slider>
<!--<input type="text" id="taking" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Taking" required />-->
</p>
</div>
<div class="col s6">
<label>Composure </label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Composure"></mat-slider>
<!--<input type="text" id="composure" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Composure" required />-->
</p>
</div>
<div class="col s6">
<label>Balance between personal and work life </label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Balance"></mat-slider>
<!--<input type="text" id="balance" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Balance" required />-->
</p>
</div>
<div class="col s6">
<label>Self-awareness </label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_SelfAware"></mat-slider>
<!--<input type="text" id="seflawareness" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_SelfAware" required />-->
</p>
</div>
<div class="col s6">
<label>Career management </label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Career"></mat-slider>
<!--<input type="text" id="career" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Career" required />-->
</p>
</div>
</mat-card-content>
</mat-card>
</div>
<mat-card>
<mat-card-header>
<mat-card-title>Leading Others</mat-card-title>
<mat-card-subtitle></mat-card-subtitle>
</mat-card-header>
<mat-divider [inset]="true"></mat-divider>
<mat-card-content>
<div class="col s6">
<label>Leading employees</label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Leading"></mat-slider>
<!--<input type="text" id="leading" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Leading" required />-->
</p>
</div>
<div class="col s6">
<label>Confronting problem employees</label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Confront"></mat-slider>
<!-- <input type="text" id="confront" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Confront" required />-->
</p>
</div>
<div class="col s6">
<label>Participative </label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Confront"></mat-slider>
<!--<input type="text" id="participative" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Participative" required />-->
</p>
</div>
<div class="col s6">
<label>Building collaborative relationships </label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Build"></mat-slider>
<!--<input type="text" id="buid" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Build" required />-->
</p>
</div>
<div class="col s6">
<label>Compassion</label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Compassion"></mat-slider>
<!--<input type="text" id="compassion" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Compassion" required />-->
</p>
</div>
<div class="col s6">
<label>Putting people at ease</label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Putting"></mat-slider>
<!--<input type="text" id="putting" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Putting" required />-->
</p>
</div>
<div class="col s6">
<label>Respect for differences</label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Respect"></mat-slider>
<!--<input type="text" id="respect" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Respect" required />-->
</p>
</div>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-actions>
<button type="submit" class="btn waves-effect waves-light blue darken-4"
[disabled]="!predictionForm.valid">
Predict
<i class="material-icons right">cloud</i>
</button>
<span class="right"></span>
<a class="btn waves-effect waves-light right"
(click)="resetForm()">
Reset
<i class="material-icons right">clear</i>
</a>
</mat-card-actions>
</mat-card>
mat-card is displayed as block, that means you need add some css properties to the parent or card itself.
This is a basic example using flex-box:
<div style="display: flex;">
<mat-card style="flex: 1 1 auto;">Card 1</mat-card>
<mat-card style="flex: 1 1 auto;">Card 2</mat-card>
</div>
I would like to align 2 control group with jQuery Mobile. I use the the version 1.4.2.
This is what I have : http://i.stack.imgur.com/qEAav.png
And this is what I would like to do : http://i.stack.imgur.com/NA9YR.png
My currently code is :
<h3 class="ui-bar ui-bar-a ui-corner-all">
<div id="btnPaie" align="center">
Fermer la liste
</br>
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid1">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif" value="" checked="checked" onclick="selectorFunctionPaie('age');">
<label for="loadEffectif">Age</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadAnciennete" value="" onclick="selectorFunctionPaie('anciennete');">
<label for="loadAnciennete">Ancienneté</label>
</fieldset>
</form>
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid2">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif2" value="" checked="checked" onclick="selectorFunctionPaie('effectif');">
<label for="loadEffectif2">Effectif</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEPT" value="" onclick="selectorFunctionPaie('etp');">
<label for="loadEPT">ETP</label>
</fieldset>
</form>
</div>
</h3>
If there are pro jQuery Mobile I'll glad to solve my problem.
Thanks in advance.
See if this works for you:
<h3 class="ui-bar ui-bar-a ui-corner-all">
<div id="btnPaie">
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid2">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif2" value="" checked="checked" onclick="selectorFunctionPaie('effectif');" />
<label for="loadEffectif2">Effectif</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEPT" value="" onclick="selectorFunctionPaie('etp');" />
<label for="loadEPT">ETP</label>
</fieldset>
</form>
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid1">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif" value="" checked="checked" onclick="selectorFunctionPaie('age');" />
<label for="loadEffectif">Age</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadAnciennete" value="" onclick="selectorFunctionPaie('anciennete');" />
<label for="loadAnciennete">Ancienneté</label>
</fieldset>
</form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid3">
Fermer la liste
</fieldset>
</div>
</h3>
CSS to line things up and add spacing:
#btnPaie {
text-align: center;
}
#btnPaie form, #btnPaie fieldset {
display: inline;
}
#btnPaie fieldset {
margin: 1em;
}
DEMO
I am trying to make a simple profile page for an app i'm trying to put together.
It has 4 questions, the last of which is Gender.
The other three questions worked well with "field container text inputs," but i wanted to use radio buttons for the gender question.
When I try to align the Male/Female buttons with the Gender title they always are too close and not inline with the title.
What I'm trying to achieve is getting the buttons inline with Gender and at the same distance as the other three sections.
Here is what I have so far:
<div data-role="content">
<div data-role="fieldcontain">
<label for="height" style="font-size:25px"><strong>Height</strong></label>
<input style="display: inline-block; width: 5%" type="text" name="name" id="height" value="" />
<p style="display: inline-block; margin-left:5px; margin-right:10px"> feet </p>
<input style="display: inline-block; width: 5%" type="text" name="name" id="height" value="" />
<p style="display: inline-block; margin-left:5px; margin-right:10px"> inches OR </p>
<input style="display: inline-block; width: 5%" type="text" name="name" id="height" value="" />
<p style="display: inline-block; margin-left:5px"> cm</p>
</div>
<div data-role="fieldcontain">
<label for="height" style="font-size:25px"><strong>Height</strong></label>
<input style="display: inline-block; width: 5%" type="text" name="name" id="height" value="" />
<p style="display: inline-block; margin-left:5px; margin-right:10px"> pounds OR </p>
<input style="display: inline-block; width: 5%" type="text" name="name" id="height" value="" />
<p style="display: inline-block; margin-left:5px"> kg</p>
</div>
<div data-role="fieldcontain">
<label for="age" style="font-size:25px"><strong>Age</strong></label>
<input style="width: 5%" type="text" name="name" id="age" value="" />
</div>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<div style="display:inline !important;">
<label style="font-size:25px"><strong>Gender</strong></label>
</div>
<div style="display:inline-block !important; float:right !important;">
<input type="radio" name="radio-choice" id="male" value="choice-1" />
<label for="male">Male</label>
<input type="radio" name="radio-choice" id="female" value="choice-2" />
<label for="female">Female</label>
</div>
</fieldset>
</div>
Change markup for Gender field group to following:
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend><strong style="font-size:25px">Gender</strong></legend>
<input type="radio" name="radio-choice" id="male" value="choice-1" checked="checked" />
<label for="male">Male</label>
<input type="radio" name="radio-choice" id="female" value="choice-2" />
<label for="female">Female</label>
</fieldset>
</div>
Below is the HTML code for a Telerik Tree View Control used in a ASP.NET MVC application. I need to get the value (input tags values are in GUID format) of the ChildNode when a child node checkbox is selected.
Illlustrated below:
*Main Region*
**North VAncouver
testlocation2
Testlocation123**
*Africa*
**Tanzania
Headquarters**
*India*
**Items Gobetter
Mash
YouThinkSo**
*Canada*
**WestVancouver**
AS given above I was wondering if you could give me the Jquery code to iterate through the HTML markup and select checked child node values given in GUID's.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<title></title>
</head>
<body>
<ul>
<li>
<span id="spnloc">Locations</span>
<div style=
"position: absolute; padding-top: 5px; background-color: rgb(234, 234, 234); color: rgb(63, 138, 196); z-index: 2000; display: none;"
id="TreeView1" class="t-widget t-treeview t-reset">
<ul class="t-group t-treeview-lines">
<li class="t-item t-first">
<div class="t-top">
<span class="t-checkbox"><input type="hidden" value="0" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="True" name="TreeView1_checkedNodes[0].Checked" class="t-input"
checked="checked" /><input type="hidden" value="Main Region" name=
"TreeView1_checkedNodes[0].Text" class="t-input" /><input type="hidden"
value="Main Region" name="TreeView1_checkedNodes[0].Value" class=
"t-input" /></span><span class="t-in">Main Region</span><input type=
"hidden" value="Main Region" name="itemValue" class="t-input" />
</div>
<ul class="t-group">
<li class="t-item">
<div class="t-top">
<span class="t-checkbox"><input type="hidden" value="0:0" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[0:0].Checked" class=
"t-input" /></span><span class="t-in">North
Vancouver</span><input type="hidden" value=
"5761a893-9ef0-48d3-847a-2638ec081f5f" name="itemValue" class=
"t-input" />
</div>
</li>
<li class="t-item">
<div class="t-mid">
<span class="t-checkbox"><input type="hidden" value="0:1" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[0:1].Checked" class=
"t-input" /></span><span class="t-in">testLocation2</span><input type=
"hidden" value="d63d6ff6-07dc-4021-a4bb-7b1b7c781119" name="itemValue"
class="t-input" />
</div>
</li>
<li class="t-item t-last">
<div class="t-bot">
<span class="t-checkbox"><input type="hidden" value="0:2" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[0:2].Checked" class=
"t-input" /></span><span class=
"t-in">TestLocations123</span><input type="hidden" value=
"eadfd0f5-9181-4094-b01a-9d7ee383b7f2" name="itemValue" class=
"t-input" />
</div>
</li>
</ul>
</li>
<li class="t-item">
<div class="t-mid">
<span class="t-checkbox"><input type="hidden" value="1" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="True" name="TreeView1_checkedNodes[1].Checked" class="t-input"
checked="checked" /><input type="hidden" value="Africa" name=
"TreeView1_checkedNodes[1].Text" class="t-input" /><input type="hidden"
value="Africa" name="TreeView1_checkedNodes[1].Value" class=
"t-input" /></span><span class="t-in">Africa</span><input type="hidden"
value="Africa" name="itemValue" class="t-input" />
</div>
<ul class="t-group">
<li class="t-item">
<div class="t-top">
<span class="t-checkbox"><input type="hidden" value="1:0" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[1:0].Checked" class=
"t-input" /></span><span class="t-in">Tanzania</span><input type="hidden"
value="5c2389eb-365e-42bb-9b1a-8db36f87b4af" name="itemValue" class=
"t-input" />
</div>
</li>
<li class="t-item t-last">
<div class="t-bot">
<span class="t-checkbox"><input type="hidden" value="1:1" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="True" name="TreeView1_checkedNodes[1:1].Checked" class="t-input"
checked="checked" /><input type="hidden" value="Headquarters" name=
"TreeView1_checkedNodes[1:1].Text" class="t-input" /><input type=
"hidden" value="ac171662-3eca-411f-a623-a3cb1a69238e" name=
"TreeView1_checkedNodes[1:1].Value" class=
"t-input" /></span><span class="t-in">Headquarters</span><input type=
"hidden" value="ac171662-3eca-411f-a623-a3cb1a69238e" name="itemValue"
class="t-input" />
</div>
</li>
</ul>
</li>
<li class="t-item">
<div class="t-mid">
<span class="t-checkbox"><input type="hidden" value="2" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="True" name="TreeView1_checkedNodes[2].Checked" class="t-input"
checked="checked" /><input type="hidden" value="India" name=
"TreeView1_checkedNodes[2].Text" class="t-input" /><input type="hidden"
value="India" name="TreeView1_checkedNodes[2].Value" class=
"t-input" /></span><span class="t-in">India</span><input type="hidden"
value="India" name="itemValue" class="t-input" />
</div>
<ul class="t-group">
<li class="t-item">
<div class="t-top">
<span class="t-checkbox"><input type="hidden" value="2:0" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[2:0].Checked" class=
"t-input" /></span><span class="t-in">Item's Go Here</span><input type=
"hidden" value="d8266db4-e846-4338-906f-e0b84fd9044a" name="itemValue"
class="t-input" />
</div>
</li>
<li class="t-item">
<div class="t-mid">
<span class="t-checkbox"><input type="hidden" value="2:1" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[2:1].Checked" class=
"t-input" /></span><span class="t-in">MASH</span><input type=
"hidden" value="869c083a-a17b-4a7a-a2a9-ef88f972de1b" name="itemValue"
class="t-input" />
</div>
</li>
<li class="t-item t-last">
<div class="t-bot">
<span class="t-checkbox"><input type="hidden" value="2:2" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[2:2].Checked" class=
"t-input" /></span><span class="t-in">YouThinkSo</span><input type=
"hidden" value="4e33e582-8a54-450a-ad73-70698a578162" name="itemValue"
class="t-input" />
</div>
</li>
</ul>
</li>
<li class="t-item t-last">
<div class="t-bot">
<span class="t-checkbox"><input type="hidden" value="3" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="True" name="TreeView1_checkedNodes[3].Checked" class="t-input"
checked="checked" /><input type="hidden" value="Canada" name=
"TreeView1_checkedNodes[3].Text" class="t-input" /><input type="hidden"
value="Canada" name="TreeView1_checkedNodes[3].Value" class=
"t-input" /></span><span class="t-in">Canada</span><input type="hidden"
value="Canada" name="itemValue" class="t-input" />
</div>
<ul class="t-group">
<li class="t-item t-last">
<div class="t-top t-bot">
<span class="t-checkbox"><input type="hidden" value="3:0" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[3:0].Checked" class=
"t-input" /></span><span class="t-in">West Vancouver</span><input type=
"hidden" value="b8fd4a6f-bfc7-4c8a-b2ff-cb3c278c7434" name="itemValue"
class="t-input" />
</div>
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</body>
</html>
In italics are the Regions (Parent nodes) and in Bold are the child nodes. Both Region and child nodes(which are locations) are Checkboxes.
The values of the Child Nodes are in GUID (Unique Indentiifer) value.
ON selecting the the parent and child nodes I need to be able to only get the value of the child nodes after I select the nodes and maybe click a button to run the JQuery code. Can you help me with the Jquery code that will be able to give me the selected values of the checkboxes(child nodes only) ignoring the parent checkboxes even if they are selected. The HML markup for the TreeView is given ABOVE.
Not sure if this is what you want
Demo: http://jsfiddle.net/qHJYJ/
by clicking the button will return GUID of all children nodes that have
Parent Node selected
Children Node itself selected
$('input[type="checkbox"]').on('change', function() {
var e = $(this);
if (e.parents('li:eq(2)').length) {
console.log('sub-checkbox found, value: ' + e.val());
} else {
console.log('parent checkbox has been changed, ignoring...');
}
console.log(e.attr('name'));
});
jsFiddle example code here
I have a problem with jQuery Mobile 1.1.0 accordion ( http://jquerymobile.com/test/docs/content/content-collapsible.html )
I have a page with more accordion, and when I press to open / close the section brings me back to the top of the page.
I have already set:
ajaxEnabled: false;
hashListeningEnabled: false;
linkBindingEnabled: false;
this is my code:
<!-- anagrafica -->
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="c">
<h3>Scheda cliente</h3>
<!-- Dati azienda -->
<div data-role="collapsible" data-collapsed="true" data-content-theme="c" class="grid-scheda">
<h3>Anagrafica</h3>
<form id="dati-azienda">
<div data-role="fieldcontain">
<label for="ragionesociale">Ragione Sociale:</label>
<input type="text" name="ragionesociale" id="ragionesociale" class="required fullsize" />
</div>
<div data-role="fieldcontain">
<label for="indirizzo">Indirizzo:</label>
<input type="text" name="indirizzo" id="indirizzo" class="fullsize" />
</div>
<div data-role="fieldcontain">
<label for="localita">Località:</label>
<input type="text" name="localita" id="localita" class="large" />
<input type="text" name="cap" id="cap" class="small" placeholder="CAP" />
</div>
<div data-role="fieldcontain">
<label for="pi">Partita IVA:</label>
<input type="number" name="pi" id="pi" class="fullsize" />
</div>
<div data-role="fieldcontain">
<label for="fisso">Fisso:</label>
<input type="number" name="fisso" id="fisso" class="medium" />
<input type="number" name="fax" id="fax" class="medium" placeholder="Fax" />
</div>
<div data-role="fieldcontain">
<label for="mobile">Mobile:</label>
<input type="number" name="mobile" id="mobile" class="fullsize" />
</div>
<div data-role="fieldcontain">
<label for="mail">Mail:</label>
<input type="text" name="mail" id="mail" class="fullsize" />
</div>
<!--
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Altre sedi:</legend>
<input type="checkbox" name="checkbox-0" style="margin-top:0px;" id="checkbox-mini-0" data-mini="true" />
<label for="checkbox-mini-0">Si</label>
</fieldset>
</div>
-->
<fieldset class="ui-grid-a">
<label> </label>
<div class="ui-block-b"><button rel="dati-azienda" type="submit" class="submit submitBTN" data-theme="b">Salva</button></div>
</fieldset>
</form>
</div><!-- /Dati Azienda -->
<!-- Dati Referente -->
<div data-role="collapsible" data-content-theme="c" class="grid-scheda">
<h3>Dati Referente</h3>
<form id="dati-referente">
<div data-role="fieldcontain">
<label for="cognome">Referente:</label>
<input type="text" name="cognome" id="cognome" class="small2" placeholder="Cognome" />
<input type="text" name="nome" id="nome" class="small2" placeholder="Nome"/>
<input type="text" name="dt_nascita" id="dt_nascita" class="small2" placeholder="Data nascita"/>
</div>
<div data-role="fieldcontain">
<label for="posizione">Posizione:</label>
<input type="text" name="posizione" id="posizione" class="medium" />
<input type="text" name="reperibilita" id="reperibilita" class="medium" placeholder="Reperibilità" />
</div>
<div data-role="fieldcontain">
<label for="mobile">Mobile:</label>
<input type="number" name="mobile" id="mobile" class="medium" />
<input type="number" name="fisso" id="fisso" class="medium" placeholder="Fisso" />
</div>
<div data-role="fieldcontain">
<label for="mail">Mail:</label>
<input type="text" name="mail" id="mail" class="fullsize" />
</div>
<div data-role="fieldcontain">
<label for="referente2">Referente alternativo:</label>
<input type="text" name="referente2" id="referente2" class="fullsize" />
</div>
<fieldset class="ui-grid-a">
<label> </label>
<div class="ui-block-b"><button rel="dati-referente" type="submit" class="submit submitBTN" data-theme="b">Salva</button></div>
</fieldset>
</form>
</div><!-- /Dati referente -->
<!-- caratteristiche -->
<div data-role="collapsible" data-content-theme="c" class="grid-scheda">
<h3>Caratteristiche</h3>
<div data-role="fieldcontain">
<label for="x">Consistenza attiva:</label>
<input type="text" name="x" id="x" class="small" />
</div>
</div><!-- /caratteristiche -->
<!-- registrazione -->
<div data-role="collapsible" data-content-theme="c" class="grid-scheda">
<h3>Registrazione 190</h3>
<form id="registrazione">
<div data-role="fieldcontain">
<label for="userid">User ID:</label>
<input type="text" name="userid" id="userid" class="small2" />
<input type="text" name="passw" id="passw" class="small2" placeholder="Password" />
<input type="date" name="dt_registrazione" id="dt_registrazione" class="small2" />
</div>
<?php for($i=1;$i<=2;$i++) { ?>
<div data-role="fieldcontain">
<label for="analisi_ft_num">Analisi Fattura:</label>
<input type="text" name="analisi_ft_num[]" id="analisi_ft_num" class="medium" placeholder="Nr. Fattura" />
<input type="date" name="dt_doc[]" class="medium" />
</div>
<?php } ?>
<div data-role="fieldcontain">
<label for="codice_cliente">Codice Cliente:</label>
<input type="text" name="codice_cliente" id="codice_cliente" class="medium" />
<input type="text" name="ciclo_fatturazione" id="ciclo_fatturazione" class="medium" placeholder="Ciclo Fatturazione" />
</div>
<fieldset class="ui-grid-a">
<label> </label>
<div class="ui-block-b"><button rel="registrazione" type="submit" class="submit submitBTN" data-theme="b">Salva</button></div>
</fieldset>
</form>
</div><!-- /registrazione -->
</div>
<!-- /anagrafica -->
Thanks in advice
It is not very clear as to what exactly the interface is supposed to look like. However, please look at the documentation: http://jquerymobile.com/demos/1.1.0/docs/content/content-collapsible-set.html
The link you pasted is for a test demo, but the syntax seem to have changed since then.