定番
新着
履歴

JavaScript

JavaScriptの中で下記で絞り込んで探す

JavaScriptに関するキーワードから探す

  • jQuery タブ(横)シンプル
  • 過去に作ったタブのサンプルから、コードをよりシンプルに改変しました。スタンダードなタブメニューですが、作るとなると意外と面倒です。 でもプラグインを使うほどでもないので、以下のソースをコピペでお使いください。 タブ シンプル スムーズ 拡張性 過去に作ったサンプルより ソースをシンプルに 滑らかな動きで 数が増えても大丈夫 アクティブなボタンの前後にclassを追加して、少
  • 2019-02-15 20:11:33
  • jQuery スライドスイッチ
  • スマホの設定などでよく見かけるスライドしてスイッチをON/OFFするUIのサンプルです。右にスライドするとON、左に戻すとOFFになるデザインをCSSだけで形と動きを実装しています。 以下のスワイプではなく、スイッチ全体をタップするだけで、切り替わる簡単実装です。 おまけでキーボードの←ボタン、→ボタンでも動くよう実装でしています。 切り替えをクラスの付け外しで実装しているので、連動して動く部分はhasClassメソッドで連動し
  • 2019-02-10 22:17:27
  • jQuery 透明度を変更する
  • 画像や要素の透明度を指定の値にフェードイン、フェードアウトするサンプルです。ボタンを押すと10段階で画像の透明度が上がり、画像が消えて行きます。 fadeOutメソッドを使うと一発で消えてしまうので、少しずつ透明度をコントロールするサンプルになっています。 画像を少し透明にする 元に戻す JSはこちら $(document).ready(function(){ op = 10; $('.fadeout_btn').
  • 2019-01-30 22:58:36
  • jQuery コンテンツの選択と変更
  • jQueryのcontentsメソッドの活用サンプルです。特定の要素の中の子要素に対して、一斉に変更などの処理を行いとき、contentsメソッドが便利です。 言葉で説明するのも難しいので以下のサンプルをご参照ください。 下記のボタンをクリックすると●●●の部分が一斉に変更されます。 ●●●はとてもおいしい とれたての●●●は新鮮でさらにおいしいです ●●●は赤い食べ物で冷やして保存します 私の母も●●●が好きです
  • 2019-01-27 21:25:48
  • jQuery 要素のクローンを作成
  • 表示されている要素と同じものを動的に作成するサンプルです。ユーザーがクリックしたら同じ要素が複製されるような機能を作るときには、cloneメソッドが便利です。 わざわざクローンを生成しなくても、同じタグをappendすればいいと思いがちですが、その複製元のコードが変わった場合、どちらも変更しないとなりません。 一元管理の方が後々楽になります。 以下はボタンがクリックされると、特定のデモのdivが下のエリアに押した分だけ複製されます。
  • 2019-01-25 18:11:50
  • jQuery 入力フォームの変更時に発動させる
  • セレクトボックスやラジオボタン、チェックボックスを選択したときや、テキストボックスに入力ときをきっかけにその情報を受け取るサンプルです。まずはセレクトボタンを変更すると、そのテキスト情報と相応する値を取得するサンプルです。 A型 B型 AB型 O型 選択された文字: 選択された値: $(".demo_select").change(function() { $("#demo_value1 .label").html($(".d
  • 2019-01-20 23:03:45
  • jQuery フォームをフォーカスする、はずすで発動
  • テキスト入力欄をクリックして、フォーカスがあたったとき、またはフォーカスが外れたとき、発動するサンプルです。テキストフォームを設置したら、ユーザーの入力を補助したり、促したりする機能を作るシーンがあります。 そんな時はjQueryの以下のメソッドを使うと便利です。 入力欄をクリックしてください JS $(document).ready(function(){ $("#demo_input").focus( function () {
  • 2019-01-19 20:37:43
  • jQuery 非同期通信の完了検知
  • jQueryのajaxメソッドの通信の完了を検知して、次の処理を実装するサンプルです。jQueryでは簡単に非同期の通信が実装できるよう用意されています。 その中で、今回は通信の完了にフォーカスしたいと思います。 完了をきっかけに使えば、別の処理を動かすことができます。 非同期通信は、ページの一部を更新するものなので、ユーザにとって最小限の待ち時間になり、ストレスを軽減が見込めます。 まず、最初に読み込ませたいファイルを用意します。今回はHTMLです。
  • 2019-01-14 08:11:35

© 2019 kipure
Top