ホームページ > 記事 > ウェブフロントエンド > Apple の時刻/日付選択効果を模倣した jQuery の共有例
Apple の時刻/日付選択効果を模倣した jQuery の共有例
- 小云云オリジナル
- 2018-01-23 09:31:592502ブラウズ
この記事では、参考値の良い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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。