anypicker
Version:
AnyPicker is a customizable jQuery Picker Library for Mobile OS. Create custom mobile pickers (Date, Time, Rating etc) for iOS, Android & Windows. Use pre-built pickers like Date Picker, Time Picker, Date Time Picker, etc
244 lines (168 loc) • 4.39 kB
HTML
<html>
<head>
<title>Multiple Components - AnyPicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="msapplication-tap-highlight" content="no" />
<style type="text/css">
body
{
margin: 0px;
}
.input-cont
{
width: 300px;
padding: 20px;
}
input
{
width: 200px;
height: 30px;
padding: 3px 10px;
margin-bottom: 16px;
}
</style>
<link rel="stylesheet" type="text/css" href="../src/anypicker-font.css" />
<link rel="stylesheet" type="text/css" href="../src/anypicker.css" />
<link rel="stylesheet" type="text/css" href="../src/anypicker-ios.css" />
<link rel="stylesheet" type="text/css" href="../src/anypicker-android.css" />
<link rel="stylesheet" type="text/css" href="../src/anypicker-windows.css" />
<script type="text/javascript" src="vendors/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../src/anypicker.js"></script>
<script type="text/javascript">
var oArrData = [];
function createDataSource()
{
var oArrDataNum = [200, 23, 59],
iTempIndex1, iTempIndex2;
for(iTempIndex1 = 0; iTempIndex1 < oArrDataNum.length; iTempIndex1++)
{
var iNum = oArrDataNum[iTempIndex1],
iStart = (iTempIndex1 === 0) ? 1 : 0;
iEnd = iNum + 1,
oArrDataComp = [];
for(iTempIndex2 = iStart; iTempIndex2 < iEnd; iTempIndex2++)
{
oArrDataComp.push({
val: iTempIndex2.toString(),
label: iTempIndex2.toString()
});
}
oArrData.push(oArrDataComp);
}
}
createDataSource();
var oArrComponents = [
{
component: 0,
name: "day",
label: "Days",
width: "50%",
textAlign: "center"
},
{
component: 1,
name: "hours",
label: "Hours",
width: "20%",
textAlign: "center"
},
{
component: 2,
name: "minutes",
label: "Minutes",
width: "30%",
textAlign: "center"
}
],
oArrDataSource = [
{
component: 0,
data: oArrData[0]
},
{
component: 1,
data: oArrData[1]
},
{
component: 2,
data: oArrData[2]
}
];
$(document).ready(function()
{
$("#ip-de").AnyPicker(
{
mode: "select",
actionMode: "both",
showComponentLabel: true,
components: oArrComponents,
dataSource: oArrDataSource
});
$("#ip-ios").AnyPicker(
{
mode: "select",
actionMode: "both",
showComponentLabel: true,
components: oArrComponents,
dataSource: oArrDataSource,
theme: "iOS" // "Default", "iOS", "Android", "Windows"
});
$("#ip-android").AnyPicker(
{
mode: "select",
actionMode: "both",
showComponentLabel: true,
components: oArrComponents,
dataSource: oArrDataSource,
theme: "Android" // "Default", "iOS", "Android", "Windows"
});
$("#ip-wp").AnyPicker(
{
mode: "select",
actionMode: "both",
showComponentLabel: true,
components: oArrComponents,
dataSource: oArrDataSource,
theme: "Windows" // "Default", "iOS", "Android", "Windows"
});
});
</script>
</head>
<body>
<table class="input-cont">
<tr>
<td>Duration : (Default)</td>
</tr>
<tr>
<td>
<input type="text" id="ip-de" value="4" readonly />
</td>
</tr>
<tr>
<td>Duration : (iOS)</td>
</tr>
<tr>
<td>
<input type="text" id="ip-ios" value="4" readonly />
</td>
</tr>
<tr>
<td>Duration : (Android)</td>
</tr>
<tr>
<td>
<input type="text" id="ip-android" value="4" readonly />
</td>
</tr>
<tr>
<td>Duration : (Windows)</td>
</tr>
<tr>
<td>
<input type="text" id="ip-wp" value="4" readonly />
</td>
</tr>
</table>
</body>
</html>