Ajaxでセレクトメニューの内容を非同期で変更する【最短コピペ用jQueryコード】

2019-08-19

フォームを扱うページでは非同期通信を使うことで、 使い勝手が向上することがありますので、jqueryのAjaxは重宝します。 いまさらですが、あまりによく使うので、個人的なメモ代わりに HTML・jQuery・PHPの3点セットを残しておきます\(^o^)/ デモサンプルとして、都道府県のエリア選択を例にしました。 デモはこちら HTML htmlStart 地域区分 --選択-- 北海道 東北 南関東 北関東・甲信 北陸 東海 近畿 中国 ...

目に優しくて電力エコなダークモード(ナイトモード)をサイトやブログに導入する方法。ボタンで非同期切り替え

2019-07-23

今後は導入がスタンダードになりそうなダークモード 2018年頃から有名どころのアプリやサイトで ダークモード(ダークテーマ)への切り替えができるようになってきました。 ダークモードがもたらす効果は以下の2点。 「目の疲れを軽減」 「消費電力の低減」(有機ELディスプレイの場合のみ) TwitterやYoutubeを一日中見ている人にとっては、このダークモードは嬉しい。 背景が真っ白だと、目がチカチカしてきます。 クリエイティブツールのAdobe製品ではダークモードがデフォルトになっていますし、 プログラマーが使うエディタ系のツールもダークモードが人気の様子です...

問い合わせフォームからのスパムをGoogle reCAPTCHAを導入で一網打尽!スパム来なくなりました!

2019-07-06


▽お問い合わせフォームのBot攻撃が年々増加している ▽reCAPTCHA(リキャプチャ)v3の設置方法 ▽[v3]設置手順1「まずはフォームのHTMLにreCAPTCHA設置コードを追加」 ▽[v3]設置手順2「次にフォームタグ内にhiddenのinputタグを追加」 ▽[v3]設置手順3「PHP側の先頭にコードを追加」 ▽[v2]設置手順1「まずはフォームのHTMLにreCAPTCHAのAPIを読み込む」 ▽[v2]設置手順2「フォームのボタンの辺りに認証チェックフォームを設置」 ▽[v2]設置手順3「PHP側の先頭にコードを追加」 ▽reCAPTCHA(リキャプチャ)設置...

ボタンを押したらローディング(くるくる回るスピナー)を表示する(ローディング画像不要CSSのみ)

2018-11-26

管理画面でユーザーに画像をアップさせる際、実行ボタンの2度押しを防ぐために必要なローディングの表示。 特に苦労せず設置ができたので、コードを紹介します。ローディング自体はCSSで完結します。画像不要なのが今回のミソです。ボタンを押したらローディング発動の部分だけjqueryです。 [デモサンプル] まずはbodyの下辺りにローディングのHTMLコードをコピペして、フォームのボタンに何らかのクラス名を付けてください。 htmlStart ・ ・ ・ htmlEnd 次はCSSに以下のコードをコピペしてください。...

jqueryでtable・liなどをドラッグ&ドロップで並び替え(ソート)する【sorttableスマホ対応】

2013-04-27

ドラッグ&ドロップで並び替える機能はほんの数行で実現できます。まずはjqueryとjquery-uiを下記にアクセスしてダウンロード。jqueryはなるべく自サーバに置いたほうが読み速度が早し、いつリンク先が消えてなくなるか分からないので、直リンクはオススメしません。直リンクの方がラクですけどね^^; <2019-10-12追記> スマホ版サイトでドラッグ&ドロップの並び替え(ソート)で実現するには、「jquery.ui.touch-punch」をさらに読み込む必要があります。「jquery-ui.js」の後に読み込んでください。 jquery.ui.touch-punchの公式サイ...

QRコードを手っ取り早く作る方法

2012-11-02


Google Chart APIを利用すればたった一行でQRコードが作れます。 htmlStart https://chart.apis.google.com/chart?chs=《サイズ》&cht=qr&chl=《URLやメールアドレスなど》 htmlEnd 画像タグに上記のコードを記載するだけ。 htmlStart htmlEnd パラメータの「chl」には日本語を使うこともできます。mailtoタグと同様で日本語を使う場合は文字化けの対処をしないといけないので、文字コードをパラメータの「choe」で指定しないといけない。 QRコードは携帯やスマホで読み取られる...

この記事がお役に立てましたら是非シェアのご協力お願いします。