ホームページ > 記事 > ウェブフロントエンド > HTML、CSS、jQuery を使用して応答時間ピッカーを作成する方法
HTML、CSS、jQuery を使用して応答時間ピッカーを作成する方法
- 王林オリジナル
- 2023-10-26 11:27:131043ブラウズ
HTML、CSS、jQuery を使用してレスポンシブ タイム ピッカーを作成する方法
現代の Web デザインでは、レスポンシブ デザインが非常に重要な要素になっています。タイムピッカーは、多くの Web サイトやアプリケーションにおいて不可欠なコンポーネントでもあります。この記事では、HTML、CSS、jQuery を使用して応答時間ピッカーを作成する方法を紹介し、参考として具体的なコード例を示します。
ステップ 1: 基本的な HTML 構造を作成する
まず、時間セレクターに対応する基本的な HTML 構造を作成する必要があります。
タグ内にクラス属性が「timepicker」（タイムピッカー）の<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="timepicker">
<input type="text" class="time-input" readonly>
<i class="fas fa-clock"></i>
</div>
</body>
</html>ステップ 2: CSS スタイルを作成する
次に、このタイム ピッカーにいくつかの基本的な CSS スタイルを追加して、見た目をより美しく、使いやすくする必要があります。次のコード例を参照してください。
.timepicker {
position: relative;
display: inline-block;
}
.time-input {
padding: 6px 12px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
}
.fa-clock {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: #666;
}ステップ 3: jQuery イベントの追加
次に、jQuery を使用してタイムピッカーの対話型関数を処理する必要があります。まず、次のコードを JavaScript ファイル (script.js) に追加します。
$(function() {
$('.timepicker').on('click', function() {
$('.time-input').focus();
});
$('.time-input').on('focus', function() {
$(this).attr('type', 'time');
});
$('.time-input').on('blur', function() {
$(this).attr('type', 'text');
});
});上記のコードでは、jQuery を使用して時間セレクターのクリック イベントをリッスンし、テキスト入力ボックスにフォーカスを設定します。テキスト入力ボックスがフォーカスされると、ユーザーが時間ピッカーを使用して時間を選択できるように、そのタイプを「時間」に変更します。テキスト入力ボックスがフォーカスを失うと、そのタイプを「テキスト」に戻します。
ステップ 4: FontAwesome アイコン ライブラリを追加する
タイムピッカーの外観をより美しくするために、FontAwesome アイコン ライブラリを使用できます。次のコードを HTML ファイルの
タグに追加するだけです:<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
この時点で、単純な応答時間ピッカーの作成が完了しました。ユーザーは時間入力ボックスをクリックして時間セレクターをポップアップ表示し、希望の時間を選択できます。選択した時間が時間入力ボックスに表示されます。
さらに、タイムピッカーの機能とスタイルをさらに強化したい場合は、CSS スタイルと jQuery イベントを自分で変更できます。
概要:
この記事では、HTML、CSS、jQuery を使用して単純な応答時間ピッカーを作成する方法を紹介します。基本的な HTML 構造、CSS スタイル、jQuery イベントを追加することで、使いやすいタイムピッカーを実装できます。この記事が、レスポンシブ タイム ピッカーの理解と作成に役立つことを願っています。
以上がHTML、CSS、jQuery を使用して応答時間ピッカーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。