毎日jQueryプラグイン - 検索履歴を作成するためのものです。参考までに、具体的な内容は次のとおりです。 効果は以下のとおりです コードセクション <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <title>検索履歴を実行する</title> <script src="js/jquery-3.4.1.min.js"></script> <スタイル> *{ マージン: 0px; パディング: 0px; } #検索ボックス{ /* 境界線: 1px 実線ライトグレー; */ 高さ: 40px; 幅: 720ピクセル; 位置: 相対的; } #検索入力{ 境界線: 1px 実線のライトグレー; 境界線の半径: 5px 0px 0px 5px; 高さ: 28px; 位置: 絶対; 右: 45px; 上: 5px; 左: 5px; 幅: 670ピクセル; アウトライン: なし; テキストインデント: 12px; フォントサイズ: 12px; 色: グレー; } #検索入力:フォーカス{ 境界線の色: rgb(252,25,68); } #検索入力:フォーカス~#その他のボックス{ ディスプレイ:フレックス; } #検索ボタン{ 高さ: 30px; 幅: 40px; 境界線: なし; 境界線の半径: 0px 5px 5px 0px; 背景色: rgb(252,25,68); 位置: 絶対; 右: 5px; 上: 5px; ディスプレイ: フレックス; コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 カーソル: ポインタ; } #検索ボタン画像{ 幅: 25px; 高さ: 25px; } #モアボックス{ 境界線: 1px 実線のライトグレー; 位置: 絶対; 上: 40px; 左: 5px; 右: 5px; 高さ: 370ピクセル; zインデックス: 7; 境界線の半径: 2px; ディスプレイ: フレックス; 表示: なし; } #押す{ フレックス: 1; /* 境界線: 1px 実線ライトグレー; */ 位置: 相対的; } #歴史{ /* 表示: なし; */ フレックス: 1; /* 境界線: 1px 実線ライトグレー; */ 位置: 相対的; } 。頭{ 位置: 絶対; 上: 0px; 幅: 100%; 高さ: 30px; border-bottom: 1px 実線ライトグレー; フォントサイズ: 12px; ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 テキストインデント: 12px; 色: rgb(252,85,49); } 。主要{ 位置: 絶対; 上: 30px; 幅: 100%; 下: 0px; オーバーフロー-x:非表示; オーバーフロー-y: 自動; } 。アイテム{ フォントサイズ: 12px; 高さ: 30px; ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 テキストインデント: 12px; カーソル: ポインタ; } .item:ホバー{ 背景色: ライトグレー; } </スタイル> </head> <本文> <div id="検索ボックス"> <input id="searchinput" placeholder="c下" /> <button id="searchbtn"><img src="img/sc.png"></button> <div id="morebox"> <div id="履歴"> <div class="head">検索履歴</div> <div class="main"></div> </div> <div id="push"> <div class="head">ホットなおすすめ</div> <div class="main"> <div class="item">マイクロソフトがついに JDK に対して措置を講じた</div> <div class="item">Xiaomi のワイヤレス充電テクノロジー</div> <div class="item">一般的な Linux コマンド</div> <div class="item">A Fei は一生懸命働いており、文章を書くのが得意です</div> <div class="item">毎日 jQuery プラグインを学習すれば、プラグインは不要になります。それは道徳の低下か、それとも人間性の歪みか? </div> </div> </div> </div> </本文> </html> <スクリプト> $(ドキュメント).ready(関数(){ //検索をクリックするたびにキャッシュに保存されます// $(".item").click(function(){ var str = $(this).text(); $("#検索入力").val(str) }) // localStorage["history"] = '[]'//キャッシュをクリアします。 履歴を描画します。 $("#searchbtn").click(function(){ var str = $("#searchinput").val(); if(str&&str!=""){ var arr = getSession(); arr.push(str); localStorage["history"] = JSON.stringify(arr); 履歴を描画します。 } }) セッションを取得します。 //キャッシュに基づいて履歴を検索し、検索履歴関数drawhistory(){を生成します var arr = getSession(); $("#history .main .item").remove(); arr.forEach(item=>{ var $item = $("<div class='item'>"+item+"</div>"); $item.appendTo($("#history .main")); }) } //キャッシュを取得する関数 getSession(){ var ses = localStorage["履歴"]; var arr = ses==undefined?[]:JSON.parse(ses); arr を返します。 } }) </スクリプト> アイデアの説明1. レイアウトに欠陥があります。私のレイアウトが最も適切かどうかはわかりませんが、見た目は問題ありません。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linuxでポートが開いているかどうかを確認する方法のまとめ
>>: MySQL 5.6 のインストール手順(画像とテキスト付き)
目次序文1. ファントムリーディングとは何ですか? 2. ファントムリーディングの問題点は何ですか?...
目次これ方法オブジェクト内これを隠した厳密モードこれを変更してこれいつものように、まずはコードを見て...
目次1. はじめに2. vue-simple-uploaderについて3. vue-simple-u...
textarea の形式は保存時にデータベースに保存できますが、表示時には /n と相互に変換できな...
目次1. はじめに2. 選択2.1 単一列のクエリ2.2 複数の列のクエリ2.3 すべての列をクエリ...
序文apt-get コマンドは、Ubuntu システムのパッケージ管理ツールです。パッケージのインス...
何人かの学生は、マスターとスレーブの間の不一致の問題に遭遇したと述べました。一般的な状況としては、m...
この記事では、タブバーの切り替え効果を簡単に実現するためのJavaScriptの具体的なコードを参考...
最初のパラメータ渡し方法は、動的ルーティングパラメータ渡しです。リンクのパス属性を設定することで、ル...
質問質問 1: トランザクションをコミットするときに REDO ログをフラッシュすることによって発生...
ウィンドウの中央にブロック要素の位置を設定する方法ブロック要素をウィンドウの中央に配置する上記の方法...
テストでは、ページ定義がutf-8でエンコードされている場合、 js ファイルに中国語などのマルチバ...
mysql が正常に実行されている場合、テーブル構造を表示することは難しくありません。しかし、場合...
この記事では、虫眼鏡効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。...
1. MySQL マスター/スレーブ同期とは何ですか?マスター データベースのデータが変更されると、...