この記事では、参考値の良い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:'/' //日期分割符 } $('#pickDater').mPickDater(opt);
var opt={ startY:1990, //开始时间 endY:2050, //结束事件 mPickerType:2, separator:'/' //日期分割符 } $('#pickDater').mPickDater(opt);
var opt={ startY:1990, //开始时间 endY:2050, //结束事件 mPickerType:3, separator:'/' //日期分割符 } $('#pickDater').mPickDater(opt);
コードは参考用であり、特定の機能は自分で拡張できます。
関連する推奨事項:
JQuery の日付ピッカーの作成例チュートリアル
jQuery UI Datepicker Datepicker の詳細な説明
以上がApple の時刻/日付選択効果を模倣した jQuery の共有例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。