Apple の時刻/日付選択効果を模倣した jQuery の共有例

小云云
リリース: 2018-01-23 09:31:59
オリジナル
2556 人が閲覧しました

この記事では、参考値の良いAppleを模倣したjqueryの日時選択効果の例を中心に紹介します。以下のエディターで見てみましょう。皆さんのお役に立てれば幸いです。

1.html ファイル、index.html


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="./jquery-1.12.4.min.js"></script>
 <script src="./pickDater.js"></script>
 <style>
 body{position: absolute;width: 100%;height: 100%}
 ul{list-style: none;margin: 0}
 </style>
</head>
<body>
<input id="pickDater" style="font-size: 50px;">
</body>
</html>
ログイン後にコピー

エフェクトを表示するときはブラウザをモバイル モードに切り替えてください

2. プラグインのリンク アドレス: http://files.cnblogs. com/ files/jiebba/pickDater.js ,

プラグインの呼び出し

1. 呼び出し日

var opt={
 startY:1990, //开始时间
 endY:2050, //结束事件
 mPickerType:1, 
 separator:&#39;/&#39; //日期分割符
 }
 $(&#39;#pickDater&#39;).mPickDater(opt);
ログイン後にコピー


2. 通話時間

var opt={
 startY:1990, //开始时间
 endY:2050, //结束事件
 mPickerType:2,
 separator:&#39;/&#39; //日期分割符
 }
 $(&#39;#pickDater&#39;).mPickDater(opt);
ログイン後にコピー


3. 通話日時

var opt={
 startY:1990, //开始时间
 endY:2050, //结束事件
 mPickerType:3,
 separator:&#39;/&#39; //日期分割符
 }
 $(&#39;#pickDater&#39;).mPickDater(opt);
ログイン後にコピー


コードは参考用であり、特定の機能は自分で拡張できます。

関連する推奨事項:


JQuery の日付ピッカーの作成例チュートリアル

jQuery UI Datepicker Datepicker の詳細な説明

WeChat アプレット用の日付ピッカーの開発方法

以上がApple の時刻/日付選択効果を模倣した jQuery の共有例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート