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
367 lines (272 loc) • 7.6 kB
HTML
<html>
<head>
<title>Custom RowView - 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;
}
.ap-theme-default .ap-ex-row
{
text-align: left;
padding: 4px 0px 10px 0px;
display: inline-block;
width: 40%;
}
.ap-theme-default .ap-ex-row_icon
{
width: 30px;
height: 30px;
margin-right: 10px;
}
.ap-theme-default .ap-ex-row_label
{
height: 40px;
line-height: 30px;
}
.ap-theme-ios .ap-ex-row
{
text-align: left;
padding: 2px 0px 8px 0px;
display: inline-block;
width: 35%;
font-size: 0.8em;
}
.ap-theme-ios .ap-ex-row_icon
{
width: 20px;
height: 20px;
margin-right: 10px;
}
.ap-theme-ios .ap-ex-row_label
{
height: 30px;
line-height: 20px;
}
.ap-theme-android .ap-ex-row
{
text-align: left;
padding: 5px 0px 10px 0px;
display: inline-block;
width: 50%;
}
.ap-theme-android .ap-ex-row_icon
{
width: 20px;
height: 20px;
margin-right: 10px;
}
.ap-theme-android .ap-ex-row_label
{
height: 40px;
line-height: 30px;
}
.ap-theme-windows .ap-ex-row
{
text-align: left;
display: inline-block;
width: 85%;
background: transparent ;
}
.ap-theme-windows .ap-ex-row_icon
{
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
margin-right: 10px;
color: #FFFFFF;
font-size: 30px;
background: transparent ;
}
.ap-theme-windows .ap-ex-row_label
{
height: 30px;
line-height: 30px;
font-size: 1.5em;
color: #FFFFFF;
background: transparent ;
}
</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>
<link rel="stylesheet" type="text/css" href="vendors/AnyPickerIconFont.css" />
<script type="text/javascript">
var oArrComponents = [
{
component: 0,
name: "game",
label: "Game",
width: "70%"
}
],
oArrDataSource = [
{
component: 0,
data: [
{
val: "basketball",
label: "Basketball"
},
{
val: "bowling",
label: "Bowling"
},
{
val: "racing",
label: "Racing"
},
{
val: "golf",
label: "Golf"
},
{
val: "pingpong",
label: "Pingpong"
},
{
val: "snooker",
label: "Snooker"
},
{
val: "cycling",
label: "Cycling"
},
{
val: "rugby",
label: "Rugby"
},
{
val: "soccer",
label: "Soccer"
},
{
val: "swimming",
label: "Swimming"
},
{
val: "tennis",
label: "Tennis"
},
{
val: "volleyball",
label: "Volleyball"
}
]
}
];
function cfRowView(iComp, iRowIndex, oSData)
{
console.log(iComp + " " + iRowIndex + " " + oSData);
var sTempStr = "<div class='ap-ex-row'>";
sTempStr += "<img class='ap-ex-row_icon' src='vendors/images/" + oSData.val + ".png'></img>";
sTempStr += "<span class='ap-ex-row_label'>" + oSData.label + "</span>";
sTempStr += "</div>";
return sTempStr;
}
function cfRowViewWindows(iComp, iRowIndex, oSData)
{
console.log(iComp + " " + iRowIndex + " " + oSData);
var sTempStr = "<div class='ap-ex-row'>";
sTempStr += "<span class='ap-ex-row_icon ap-ex-icon-" + oSData.val + "'></span>";
sTempStr += "<span class='ap-ex-row_label'>" + oSData.label + "</span>";
sTempStr += "</div>";
return sTempStr;
}
$(document).ready(function()
{
$("#ip-de").AnyPicker(
{
mode: "select",
components: oArrComponents,
dataSource: oArrDataSource,
rowView: cfRowView
});
$("#ip-ios").AnyPicker(
{
mode: "select",
components: oArrComponents,
dataSource: oArrDataSource,
rowView: cfRowView,
theme: "iOS" // "Default", "iOS", "Android", "Windows"
});
$("#ip-android").AnyPicker(
{
mode: "select",
components: oArrComponents,
dataSource: oArrDataSource,
rowView: cfRowView,
theme: "Android" // "Default", "iOS", "Android", "Windows"
});
$("#ip-wp").AnyPicker(
{
mode: "select",
components: oArrComponents,
dataSource: oArrDataSource,
rowView: cfRowViewWindows,
theme: "Windows", // "Default", "iOS", "Android", "Windows"
componentsCoverFullWidth: true
});
});
</script>
</head>
<body>
<table class="input-cont">
<tr>
<td>Favourite Sport : (Default)</td>
</tr>
<tr>
<td>
<input type="text" id="ip-de" value="Pingpong" readonly />
</td>
</tr>
<tr>
<td>Favourite Sport : (iOS)</td>
</tr>
<tr>
<td>
<input type="text" id="ip-ios" value="Pingpong" readonly />
</td>
</tr>
<tr>
<td>Favourite Sport : (Android)</td>
</tr>
<tr>
<td>
<input type="text" id="ip-android" value="Pingpong" readonly />
</td>
</tr>
<tr>
<td>Favourite Sport : (Windows)</td>
</tr>
<tr>
<td>
<input type="text" id="ip-wp" value="Pingpong" readonly>
</td>
</tr>
</table>
<!--
<div>Icons made by <a href="http://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC BY 3.0</a></div>
-->
</body>
</html>