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
739 lines (459 loc) • 20.7 kB
HTML
<html>
<head>
<title>Documentation - AnyPicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="author" content="Neha Kadam">
<meta name="description" content="CalenStyle - Modern Event Calendar. Responsive Multipurpose jQuery Event Calendar.">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../demo/vendors/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../demo/vendors/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="../demo/vendors/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/details.css" />
<link rel="stylesheet" type="text/css" href="css/doc.css" />
<link rel="stylesheet" type="text/css" href="css/AP-Portal-Font.css" />
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/handlebars.js"></script>
<script type="text/javascript" src="js/doc.js"></script>
<script type="text/javascript" src="js/AnyPickerData.js"></script>
</head>
<body class="doc-scroll">
<nav class="navbar navbar-custom navbar-fixed-top top-nav-collapse navbar-static">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-ap" href="#home">
AnyPicker
</a>
</div>
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<li class="hidden">
<a href="https://nehakadam.github.io/AnyPicker/index.html#home"></a>
</li>
<li class="page-scroll">
<a href="https://nehakadam.github.io/AnyPicker/index.html#features">Features</a>
</li>
<li class="page-scroll">
<a href="https://nehakadam.github.io/AnyPicker/index.html#demo">Demo</a>
</li>
<li class="collapse-footerlink">
<a href="https://github.com/nehakadam/AnyPicker/wiki/Roadmap">Roadmap</a>
</li>
<li class="collapse-footerlink">
<a href="https://github.com/nehakadam/AnyPicker/releases">Changelog</a>
</li>
<li class="collapse-footerlink">
<a href="https://github.com/nehakadam/AnyPicker/issues">Report Bug</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="page-container container">
<section class ="page-content">
<section id="Doc" class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div id="BasicUsage" class="section-content">
<a class="page-content-subheader" href="#BasicUsage">Basic Usage</a>
<p>This is a quick quide which will help you to start using AnyPicker.</p>
<article id="link-Dependency" class="parameter-cont">
<a class="parameter-name parameter-link" href="#link-Dependency">Dependency</a>
<ul>
<li>jQuery</li>
</ul>
</article>
<article id="link-FilesToInclude" class="parameter-cont">
<a class="parameter-name parameter-link" href="#link-FilesToInclude">Plugin Files To Include</a>
<div class="option-header">Javascript</div>
<ul>
<li>anypicker.min.js (required)</li>
</ul>
<div class="option-header">CSS</div>
<ul>
<li>anypicker-all.min.css (required, combines all files listed below)</li>
</ul>
<p>OR</p>
<ul>
<li>anypicker.min.css (required)</li>
<li>anypicker-ios.css (optional, for iOS <a class="parameter-link icon-link" href="#link-theme"><code>theme</code></a>)</li>
<li>anypicker-android.css (optional, for Android <a class="parameter-link icon-link" href="#link-theme"><code>theme</code></a>)</li>
<li>anypicker-windows.css (optional, for Windows <a class="parameter-link icon-link" href="#link-theme"><code>theme</code></a>)</li>
<li>anypicker-font.css (optional, Windows <a class="parameter-link icon-link" href="#link-theme"><code>theme</code></a> and Button <a class="parameter-link icon-link" href="#link-rowsNavigation"><code>rowsNavigation</code></a> icon font)</li>
</ul>
<div class="option-header">Font</div>
<p>You have to include fonts folder in distribution file. Fonts folder contains - </p>
<ul>
<li>anypicker-font (Font Icon - Up & Down Buttons and Set, Cancel, Now & Clear Buttons in Windows theme)</li>
</ul>
</article>
<article id="link-Default" class="parameter-cont">
<a class="parameter-name parameter-link" href="#link-Default">Initialization Code for AnyPicker (with Default settings)</a>
<div>
<span class="option-header">HTML</span>
<pre><input type="text" id="input-1" readonly></pre>
</div>
<div>
<span class="option-header">Javascript</span>
<pre>$("#input-1").AnyPicker({});</pre>
</div>
</article>
<article id="link-ModeDateTime" class="parameter-cont">
<a class="parameter-name parameter-link" href="#link-ModeDateTime">Initialization Code for AnyPicker DateTime Mode</a>
<div>
<span class="option-header">HTML</span>
<pre><input type="text" id="input-1" readonly></pre>
</div>
<div>
<span class="option-header">Javascript</span>
<pre>$("#input-1").AnyPicker(
{
mode: "datetime",
dateTimeFormat: "MMM dd, yyyy"
});</pre>
</div>
</article>
<article id="link-ModeSelect" class="parameter-cont">
<a class="parameter-name parameter-link" href="#link-ModeSelect">Initialization Code for AnyPicker Select Mode</a>
<div>
<span class="option-header">HTML</span>
<pre><input type="text" id="input-1" readonly></pre>
</div>
<div>
<span class="option-header">Javascript</span>
<pre>$("#input-1").AnyPicker(
{
mode: "select",
components: [
{
component: 0,
name: "currency",
label: "Currency"
}],
dataSource: [
{
component: 0,
data: [
{
val: "USD",
label: "$ - USD"
},
{
val: "EUR",
label: "€ - EUR"
},
{
val: "INR",
label: "₹ - INR"
},
{
val: "ILS",
label: "₪ - ILS"
},
{
val: "JPY",
label: "￥ - JPY"
}]
}]
});</pre>
</div>
</article>
</div>
<div id="ParameterOptionsList" class="section-content">
<a class="page-content-subheader" href="#ParameterOptionsList">Parameter Options List</a>
<p>This is a list of the plugin settings parameters. This list includes parameters, their default values, all possible values that you can set and describes how to use parameters.</p>
<div class="ParameterOptionsList-Content">
<script id="tmpl-ParameterOptionsList" type="text/x-handlebars-template">
{{#each this}}
<article id={{getIdForLink name}} class="parameter-cont">
<a class="parameter-name parameter-link" href={{getHrefForLink name}}>{{name}}</a>
<span>
{{#if tags}}
{{#each tags}}
<a class="parameter-tag" id={{getIdForTagLink this}}>{{this}}</a>
{{/each}}
{{/if}}
</span>
{{#if default}}
<div class="parameter-default">
<span class="option-header">Default</span>
<div>{{{default}}}</div>
</div>
{{/if}}
{{#if options}}
<div class="parameter-options">
<span class="option-header">Options</span>
<div>{{{options}}}</div>
</div>
{{/if}}
{{#if datatype}}
<div class="parameter-options">
<span class="option-header">Datatype</span>
<div>{{{datatype}}}</div>
</div>
{{/if}}
<div class="parameter-description">
<span class="option-header">Description</span>
<div>{{{description}}}</div>
</div>
{{#if examples}}
<div class="parameter-examples">
<span class="option-header">Examples</span>
{{#each examples}}
<a class="parameter-examples" target="_blank" href={{this}}>{{getExampleName this}}</a>
{{/each}}
</div>
{{/if}}
</article>
{{/each}}
</script>
</div>
</div>
<div id="CallbackFunctionsList" class="section-content">
<a class="page-content-subheader" href="#CallbackFunctionsList">Callback Functions List</a>
<p>This is a list of callback functions that are triggered on reaching the specified condition.</p>
<div class="CallbackFunctionsList-Content">
<script id="tmpl-CallbackFunctionsList" type="text/x-handlebars-template">
{{#each this}}
<article id={{getIdForLink name}} class="parameter-cont">
<a class="parameter-name parameter-link" href={{getHrefForLink name}}>{{#if title}}{{title}}{{else}}{{name}}{{/if}}</a>
<span>
{{#if tags}}
{{#each tags}}
<a class="parameter-tag" id={{getIdForTagLink this}}>{{this}}</a>
{{/each}}
{{/if}}
</span>
{{#if parameters}}
<div class="parameter-parameters">
<span class="option-header">Parameters</span>
<div>{{{parameters}}}</div>
</div>
{{/if}}
{{#if returnvalue}}
<div class="parameter-returnvalue">
<span class="option-header">Return Value</span>
<div>{{{returnvalue}}}</div>
</div>
{{/if}}
<div class="parameter-description">
<span class="option-header">Description</span>
<div>{{{description}}}</div>
</div>
{{#if examples}}
<div class="parameter-examples">
<span class="option-header">Examples</span>
{{#each examples}}
<a class="parameter-examples" target="_blank" href={{this}}>{{getExampleName this}}</a>
{{/each}}
</div>
{{/if}}
</article>
{{/each}}
</script>
</div>
</div>
<div id="FunctionsList" class="section-content">
<a class="page-content-subheader" href="#FunctionsList">Functions List</a>
<div class="FunctionsList-Content">
<script id="tmpl-FunctionsList" type="text/x-handlebars-template">
{{#each this}}
<article id={{getIdForLink name}} class="parameter-cont">
<a class="parameter-name parameter-link" href={{getHrefForLink name}}>{{name}}</a>
<span>
{{#if tags}}
{{#each tags}}
<a class="parameter-tag" id={{getIdForTagLink this}}>{{this}}</a>
{{/each}}
{{/if}}
</span>
{{#if parameters}}
<div class="parameter-parameters">
<span class="option-header">Parameters</span>
<div>{{{parameters}}}</div>
</div>
{{/if}}
{{#if returnvalue}}
<div class="parameter-returnvalue">
<span class="option-header">Return Value</span>
<div>{{{returnvalue}}}</div>
</div>
{{/if}}
<div class="parameter-description">
<span class="option-header">Description</span>
<div>{{{description}}}</div>
</div>
{{#if examples}}
<div class="parameter-examples">
<span class="option-header">Examples</span>
{{#each examples}}
<a class="parameter-examples" target="_blank" href={{this}}>{{getExampleName this}}</a>
{{/each}}
</div>
{{/if}}
</article>
{{/each}}
</script>
</div>
</div>
<div id="Build" class="section-content">
<a class="page-content-subheader" href="#Build">Build with Grunt</a>
<article id="link-QuickStart" class="parameter-cont">
<a class="parameter-name parameter-link" href="#link-QuickStart">QuickStart</a>
<div class="Build-Content">
<ul>
<li>Install node from <a href="http://nodejs.org">http://nodejs.org</a>.</li>
<li>Run <code>npm install</code> in the AnyPicker's root directory to install grunt's dependencies.</li>
<li>Run <code>grunt</code>, which will run the default task, which runs <code>concat</code>, <code>copy</code>, <code>uglify</code> and <code>cssmin</code>.</li>
</ul>
</div>
</article>
<article id="link-PreconfiguredTasks" class="parameter-cont">
<a class="parameter-name parameter-link" href="#link-PreconfiguredTasks">Preconfigured Tasks</a>
<div class="PreconfiguredTasks-Content">
<ul>
<li>
<code>grunt</code> -
This is a Default Task.
<p>It is configured as an array of tasks.</p>
<ul>
<li>
<code>concat</code> - Default concat task, which concatenates all <span class="codepath">.js</span> files to create <span class="codepath">anypicker.js</span>
</li>
<li>
<code>copy</code> - copies all <span class="codepath">.js</span> and <span class="codepath">.css</span> files from <span class="codepath">/src</span> folder to <span class="codepath">/dist</span> folder.
</li>
<li>
<code>uglify</code> - minifies javascript code
</li>
<li>
<code>cssmin</code> - concatenates <span class="codepath">/src/anypicker.css</span> to <span class="codepath">/dist/CalenStyle.min.css</span> and minifies css.
</li>
</ul>
</li>
<li>
<code>grunt AnyPickerJSConcat</code> -
This command helps to build a <span class="codepath">/src/anypicker-custom.js</span> by combining <span class="codepath">.js</span> files for specified views. After concatenation, <code>copy</code>, <code>uglify</code> and <code>cssmin</code> tasks will be performed.
<div>
For example -
<div>
<pre>grunt AnyPickerJSConcat:Select:DateTime</pre>
</div>
This command will build a custom script by combining code for Select and DateTime.
</div>
<div>
A list of valid arguments for this command
<ul>
<li><code>Select</code></li>
<li><code>DateTime</code></li>
</ul>
</div>
</li>
</ul>
</div>
</article>
</div>
</section>
</section>
<section class="nav-sidebar hidden-xs hidden-sm col-md-4 col-lg-4 small-scroll">
<ul class="nav nav-sidebar-list">
<li>
<a href="#Doc">Documentation</a>
<ul class="nav nav-sidebar-list">
<li>
<a href="#BasicUsage">Basic Usage</a>
</li>
<li>
<a href="#ParameterOptionsList">Parameter Options List</a>
<ul id="sidebar-ParameterOptionsList" class="nav nav-sidebar-list">
<script id="tmpl-sidebar-ParameterOptionsList" type="text/x-handlebars-template">
{{#each this}}
<li><a class="parameter-link" href={{getHrefForLink name}}>{{name}}</a></li>
{{/each}}
</script>
</ul>
</li>
<li>
<a href="#CallbackFunctionsList">Callback Functions List</a>
<ul id="sidebar-CallbackFunctionsList" class="nav nav-sidebar-list">
<script id="tmpl-sidebar-CallbackFunctionsList" type="text/x-handlebars-template">
{{#each this}}
<li><a class="parameter-link" href={{getHrefForLink name}}>{{#if title}}{{title}}{{else}}{{name}}{{/if}}</a></li>
{{/each}}
</script>
</ul>
</li>
<li>
<a href="#FunctionsList">Functions List</a>
<ul id="sidebar-FunctionsList" class="nav nav-sidebar-list">
<script id="tmpl-sidebar-FunctionsList" type="text/x-handlebars-template">
{{#each this}}
<li><a class="parameter-link" href={{getHrefForLink name}}>{{name}}</a></li>
{{/each}}
</script>
</ul>
</li>
<li>
<a href="#Build">Build with Grunt</a>
</li>
</ul>
</li>
</ul>
</section>
<section class="tag-filter small-scroll">
<div class="tag-filter-cont">
<span class="tag-filter-title">Filter with Tags</span>
<span class="tag-filter-close">✖</span>
<ul class="tag-filter-content">
<script id="tmpl-Tags" type="text/x-handlebars-template">
{{#each this}}
<li><a class="filter-link" id={{getIdForTagLink this}}>{{this}}</a></li>
{{/each}}
</script>
</ul>
</div>
</section>
</section>
<a class="BackToTop ap-po-icon-circle-up" href="#Doc"></a>
<div id="footerlinks">
<div class="container">
<a href="https://github.com/nehakadam/AnyPicker/wiki/Roadmap">Roadmap</a>
<a href="https://github.com/nehakadam/AnyPicker/releases">Changelog</a>
<a href="https://github.com/nehakadam/AnyPicker/issues">Report Bug</a>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="footer-copyright col-xs-12 col-sm-12 col-md-6 col-lg-6">
<span> © <span id="footer-year"></span> <a href="http://lajpatshah.in/">Lajpat Shah</a>. All rights reserved.
</span>
</div>
<div class="footer-content-links col-xs-12 col-sm-12 col-md-6 col-lg-6">
<span class="social-list">
<a class="facebook" href="http://www.facebook.com/curiouslala">
<i class="ap-po-icon-facebook"></i>
</a>
<a class="twitter" href="https://twitter.com/lajpat">
<i class="ap-po-icon-twitter"></i>
</a>
<a class="google" href="https://plus.google.com/100425525215161548641/posts">
<i class="ap-po-icon-google-plus"></i>
</a>
<a class="linkedin" href="http://in.linkedin.com/in/lajpat"><i class="ap-po-icon-linkedin"></i></a>
<a class="youtube" href="http://www.youtube.com/user/curiouslajpat">
<i class="ap-po-icon-youtube"></i>
</a>
<a class="github" href="https://github.com/lajpatshah">
<i class="ap-po-icon-github"></i>
</a>
</span>
</div>
</div>
</footer>
</body>
</html>