フォーム内で日付をカレンダーから選択できるようになる「jQuery UI Datepicker」ですが、表示されるカレンダーは祝日に対応していません。 日曜日と祝日の色を変えたいという要望があり、カレンダーに日本の祝日を反映させて対応したので、備忘録として残しておきたいと思います。 jQuery UI Datepickerのカレンダーに祝日を反映させる方法 祝日の情報は、Holidays JP APIを使って取得します。Holidays JP APIは祝日のデータを返してくれるAPIで、祝日のデータはGoogleカレンダーの情報から自動で生成されます。 Holidays JP APIで取得した祝日の情報をjQuery UI Datepickerのカレンダーに反映させます。 具体的には、以下のようにスクリプトを記述します。 ※jQuery UI Datepickerの導入手順については、こち
WEBサイト制作やWEBプログラミングの勉強をしている人の中で、jQueryという言葉を知っている人や使用した経験がある人も多いのではないでしょうか。 jQueryとはWEBサイトやWEBサービスを作成するうえで必要となるJavaScriptのライブラリです。しかし、実際にどのような機能を持つ存在なのか詳しく理解しているかと問われると、自信がない人も少なくないでしょう。 そこでこの記事では、jQueryの概要やメリット・デメリット、また使用する場合の記述方法について、詳しく解説していきます。 jQueryとは？ jQueryはJavaScriptのためのライブラリです。jQueryを使用することでシンプルにJavaScriptを記述できるようになり、それまで数十行にわたるコードが必要だった処理もわずか数行で実行できるようになりました。 jQueryの登場によってフロントエンド開発が効率化さ
脱jQuery .fadeIn() .fadeOut() .slideUp() .slideDown()2015-12-19
こんにちは、ライターのマサトです！ 今回は、HTML要素の順番（インデックス番号）を指定することで要素を取得できる「eq()」について学習をしていきます！ この記事では、 ・「eq()」とは？ ・「eq()」の使い方 という基本的な内容から、 ・セレクタの活用 ・複数要素の扱い方 などの応用的な使い方に関しても解説していきます。 この記事で、「eq()」をしっかり学習して自分のスキルアップを目指しましょう！ 「eq()」とは？ それでは、まず最初に「eq()」の基本的な知識から身に付けていきましょう！ 「eq()」は、複数のHTML要素の中からインデックス番号を指定することで特定の要素だけを取得できます。 例えば、次のようなHTMLがあるとします。 <ul> <li>リンゴ</li> <li>バナナ</li> <li>メロン</li> <li>イチゴ</li> </ul> リスト要素が複数
※仕様説明 灰色のタイトル部分をクリックするとソートされる 同じ項目をもう一度クリックすると逆順にソートされる 数字しか入っていない列は数字として扱われる（小数点付きも数字として扱われる） 1行でも文字列が含まれている列は文字列としてソートされる 何も考えずに文字列ソートで実装してしまうと、列名「No.」などは「1、10、2、3、4...」という並び順になりますが、そこは仕様説明のとおり、数値しか入っていない列は数値比較によってソートしています。 列名「数値項目」にあるとおり、1.234などの小数点付きの値もきちんと数値として扱っています。 ただし、列名「カンマ」にあるような3桁区切りされた数値は文字列として扱われるため、文字コード順になります。 HTMLソース <table id="sort_table"> <tr> <th>No</th> <th>全角項目</th> <th>数値項目<
jQueryでほぼ一行で、ページを開くとスクロールして一番下の文章を表示させるテキストエリアを作成 - なるの備忘録
ページを開くとスクロールして一番下の文章を表示させるテキストエリアを作ります。 履歴一覧など、ユーザには基本的には最新の情報を見せたいけど、過去の内容も見せたいってときに使えそうですね。 jQueryでほぼ一行で実装可能です。 動作イメージ ページを開いた瞬間からテキストボックスの中が自動的にスクロールされます。 あっという間に一番下の文章が表示されます。 テキストボックスの中でスクロールすると一番最初の文章まで見られます。 論よりコード HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charaset = "utf-8"> <title>勇者とモンスター</title> <link rel="stylesheet" type="text/css" href="style.css?<?php echo date("YmdHis"); ?
こんにちは、けいすけです。 今回は、”position: fixed”を使って要素を固定させるのですが、その際、jQueryを使って固定させる範囲を指定してみたので共有したいと思います。 $(function() { let box = $('#fixed-box'), boxHeight = box.innerHeight(), boxWrapper = $('#fixed-box-wrapper'), boxWrapperHeight = boxWrapper.innerHeight(), boxWrapperTop = boxWrapper.offset().top, boxWrapperBottom = boxWrapperTop + boxWrapperHeight, marginTop = 20; $(window).on('scroll', function() { let
中央に1枚表示されていて、左右に少し見えているスライダーは比較的良くあるタイプかと思います。 今回はslickでオプションの『centerMode』を使って実装する方法を解説していきます。 slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。
指定要素の最初を対象とするの書式 $("要素名").first() 指定要素の最初を対象とする場合は、要素名.first()を記述します。 具体例(指定要素の最初を対象とするのサンプルコード) サンプルでは指定要素にfirstメソッド使用し以下の事をしてます。 １．cssメソッドを使って、colorプロパティの値を変更。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> <!-- body {background-color: #ffffff;} --> </style> <script src="../../js/jquery-1.12.2.min.js"></script> <script> $(function(){ $("li"
jQuery 3.7.0 Released: Staying in Order | Official jQuery Blog
jQuery 3.7.0 is now available! This release has it all: bug fixes, a new method, and a performance improvement! We even dropped our longtime selector engine: Sizzle. Or, I should say, we moved it into jQuery. jQuery no longer depends on Sizzle as a separate project, but has instead dropped its code directly into jQuery core. This helps us prepare for the major changes coming to selection in future
【 jQuery】プラグイン無しで［Contact Form 7］にjQuery Datepicker（カレンダー機能）を追加する方法 ワードプレスプラグインの［Contact Form 7］使用時に、日付選択でカレンダー機能を追加する場合、4〜5年前までは［Contact Form 7 Datepicker］を利用するケースがほとんどでした。 しかしながら［Contact Form 7 Datepicker］はクロスサイトスクリプティング（XSS）の脆弱性が発覚し、すでに開発が終了しています。 公式ディレクトリからも削除されていますね。 同じ機能の代替プラグインとしては［Date Time Picker for Contact Form 7］が存在します。 Date Time Picker for Contact Form 7 もし［Contact Form 7 Datepicker］を
slick フェードスライド 実装サンプル
メインのFV画像でよく使用されている、画像が少しずつ拡大（ズーム）アニメーションしてフェードで画像が切り替わるスライドのslickを使用しての実装サンプルとコードを紹介します。 特徴 レスポンシブ フェード遷移 目次 フェードスライド ズームフェードスライド 前提 デモでは下記のCSSとJavascriptファイルを読み込んでいます。 <!-- CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"> <!
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery UI Datepickerのカレンダーを祝日対応する方法 | TechMemo
【初心者向け】jQueryとは｜メリット・デメリットから記述方法まで解説
jQuery | q-Az
【jQuery入門】eq()の使い方とインデックス番号の活用法！ | 侍エンジニアブログ
JavaScriptでTABLEにソート機能を実装する（jQuery不要）
jQueryを使って指定の範囲内でのみ要素の位置を固定する方法 - Web制作日記
【slick】centerMode(センターモード)で左右が少し見切れているスライダーを作る方法
first()：指定要素の最初を対象とする - jQuery無双
【 jQuery】プラグイン無しで［Contact Form 7］にjQuery Datepicker（カレンダー機能）を追加する方法