【コピペ可】３行のjQueryでハンバーガーメニューを作る
スマホ版サイトではおなじみのハンバーガーメニューの作り方を３行のjQueryを元に解説します。javascriptでの作り方を知りたい方は「【コピペ可】jQuery不要！javascriptだけでハンバーガーメニューを実現」をご覧ください。 ハンバーガーメニューの完成デモ まずはハンバーガーメニューのデモになります。HTMLとCSSとjQueryで実装しています。デモのボタンをクリックするとメニューが開き、もう一度押すとメニューが閉じます。スマホサイトでは頻出する定番のUIになります。 See the Pen 最もシンプルなハンバーガーメニュー実装方法０1 by YutoSeta / ホームページ制作のエクレア (@yutoseta) on CodePen. jQueryの実装内容を解説 bodyタグの末尾にCDNのjQueryを読み込みましょう jQueryを使う際には、scriptタグ
canvasで日本地図を表示してくれるjQueryプラグインのJapanMap | スターフィールド株式会社
時々日本地図をサイトに載せ、そこから地域のページにリンクさせるということをすることがありますが、47都道府県のリンクを日本地図上に配置する作業は、とても骨が折れます。 jQueryのプラグインで、Japan Mapという、日本地図をcanvasで表示し、 マウスをホバーしたときや、地域をクリックしたときのアクションをつけることが出入るものが公開されていましたので、ご紹介いたします。 Japan Mapのサイト↓ Japan Map ( jQuery plugin ) DEMO 使い方 まず、Japan Mapのサイトから「jquery-japan-map.js」をダウンロードし、 htmlのheadでjQueryとともに読み込みます。 <head> ・・・ <script type="text/javascript" src="js/jquery-1.9.1.min.js"></scrip
UIのイケているdatepickerライブラリpickadate.jsが最高だった（demo有） - Qiita
datepickerって何がいい？？ 昨年末からWebアプリケーションを作成していて、dateapickerの機能が必要になり、どのライブラリを使おうかと、色々と調べていたところ、pickadate.jsのdatepickerが最高だったので、概要と簡単な使い方を共有したいと思います。 datepickerライブラリのまとめ 結局、どのdatepickerが一番使い勝手がよいのか - @knt45 さん ※参考にさせてもらいました pickadate.jsの概要 【実装できるdatepicker】 インストール pickadate.js インストールを実行すると以下のファイル群がインストールされ、その中から以下のjsファイルと、cssファイルを読み込ませます。 pickadate.jsデモ デフォルトdatepickerデモ <!DOCTYPE html> <html> <head> <m
pickadate.jsを使ってカッコいい予約フォームを作ってみた(demo有) - Qiita
pickadate.jsを使って予約フォームを作る 前回datepickerのライブラリpickadate.jsを紹介しました。 UIのイケているdatepickerライブラリpickadate.jsが最高だった（demo有） pickadate.jsのライブラリを使えば格好いいカレンダー(datepicker)と合わせて、時間選択(timepicker)のライブラリもあるので、日付と時間を指定する予約フォームなどの実装に使えたりします。 僕は勤怠管理のアプリケーションを作り、カレンダーで選択した日付の出勤時間と退勤時間を編集する機能でpickadate.jsのライブラリを使わせてもらっています... pickadate.jsの概要 オフィシャルページ pickadate.js pickadate.jsリファレンス datepickerリファレンス timepickerリファレンス 使い方
jQueryでかんたん作成！診断テストの作り方 | それからデザイン スタッフブログ
「○○さんはAタイプです。あなたも診断してみよう！」FacebookやTwitterでこんな投稿を目にしたことがありませんか？今回は、SNSでよく見かける診断テストをjQueryでかんたんに作る方法を紹介します。 デモはこちら。実際のコードは以下です。 html <ul> <li> Q1. 問題が入ります <label><input type="radio" name="q01" class="typeA"> YES</label> <label><input type="radio" name="q01" class="typeB"> NO</label> </li> //以下省略 </ul> <button>診断する</button> <div class="result resultA"> あなたはAタイプ </div> <div class="result resultB"> あな
jQueryでの足し算引き算-カウントアップダウン付き
今回は足し算引き算にプラスα要素でカタカタとカウントダウンしながら計算する方法をご紹介します。 もともとはライフネット生命がやっている保険代金の計算方式です。 あんな感じで計算した時動きがある感じを出してみたいと思ってやってみました。 これも探しましたがこれといったものもなくヒント的な要素だけで作ってみました。 スポンサーリンク jQueryでの計算記述 .serializeArray()なんて便利な関数があったものです。これですべての要素を取り出して配列にしてくれるのでかなり記述が短縮できました。 デモサイトにてご確認くださいませ デモサイト
Webサイト構築におけるスマホ対策で欠かせない！フリック用jQueryプラグイン
スマートフォンを操作する際、指やペンで画面に触れて画面上を素早く払うようにタッチする操作のことを「フリック」と言います。 スマートフォン上で、このフリック操作を可能とするには、jQueryプラグインを実装する必要があり、実際にいくつものプラグインが存在しています。 今回は、スマートフォン向けのフリック用jQueryプラグインをご紹介していきます。iOSユーザーも、Androidユーザーも、ぜひご覧ください。 オススメのフリック用JSプラグイン 以下より、オススメのスマートフォン向けのフリック用jQueryプラグインについて、一つひとつ紐解いていきます。 ただ、ひと口にフリック操作といっても各プラグインで使い勝手は異なってきます。 対応OSやブラウザが限定されているものもありますし、開発環境や使用する環境などによっても使用できないものもありますので、慎重に選び、使いやすいものを導入しましょう
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
【jQuery】超万能スライダー FlexSlider の使い方をマスターする。 - ONZE
今日紹介するのは jQuery プラグインの［FlexSlider］です。 これ、かなり便利です。 レスポンシヴ対応、タッチコントロールのフリックスライドにも反応、カルーセルもＯＫ、画像にリンクを貼ることはもちろん、キャプションも表示可能、動画もスライドできる、コントロールボタンやナヴィゲーションも細かく設定できる…。まさに“超万能”のスライダー。 とにかく「なんでもできる」印象で、スマートフォン対応サイトなどでは特に真価を発揮するのではないでしょうか。 まずはサンプルをご覧ください。 【FlexSlider】→サンプルデモ 高機能ですが、その導入方法は比較的簡単です。 ［FlexSlider］の導入方法 まずは以下のサイトから［FlexSlider］のプラグイン本体をダウンロードします。 http://flexslider.woothemes.com 続いて <head>〜</head>
jQueryでページ分割ができる「SimplePaginationプラグイン」
jQueryでページ分割ができる「SimplePaginationプラグイン」の紹介です。 １．はじめに ページ分割の手法は色々ありますが、このエントリーで紹介するプラグインを利用することで簡単にページ分割を行うことができます。 が、配布サイトの説明だけで実現するのはかなり困難で、このエントリーでとりあえず動作するレベルのものを紹介したいと思います。 ２．プラグインのダウンロード SimplePaginationプラグインのページにアクセスし、Downloadにある「here」をクリックしてアーカイブをダウンロードします。 ダウンロードしたアーカイブを展開し、中にある、 jquery.simplePagination.js simplePagination.css を利用します。 ３．基本 ページ分割用のテキストを用意します。ここではサンプルとして8ページ分用意します。 <div clas
Google Libraries API
Stay organized with collections Save and categorize content based on your preferences. The Google Hosted Libraries is a stable, reliable, high-speed, globally available content distribution network for the most popular, open-source JavaScript libraries. Google works directly with the key stakeholders for each library effort and accepts the latest versions as they are released. Libraries To load a
simplePagination.js - A simple jQuery pagination plugin and 3 CSS themes.
Download Get the zip containing the plugin and the CSS themes here. How To Use Step 1: together with JQuery, include jquery.simplePagination.js in your page: <script type="text/javascript" src="path_to/jquery.js"></script> <script type="text/javascript" src="path_to/jquery.simplePagination.js"></script> JQuery 1.7.2 or later is recommended. Older versions might work as well, but they are not teste
面倒なページネーション実装よさらば！jQueryでサクッとページネーション実装を実現するプラグインはこれだ！ #jQuery #javaScript #CSS｜CodeIQ MAGAZINE
大量のコンテンツを複数ページに分けてすっきり見やすくしたい。そんな時にお役立ちなページネーションはスマートにコンテンツが表示されて便利な上見栄えも良い！でも、実装はちょっと面倒そう…そんな風に思っていませんか？ 今回はJavaScript&CSSと一緒に組み込むだけでサクッとページネーションが実装可能な、お役立ちjQueryプラグインをご紹介します！ by hibikiYzk ページネーションとは 長いコンテンツの表示に良く利用されるページネーション。ページャーやページ送りとも言われます。ページネーションは、長い文章を複数のページに分割して各ページへのリンクを並べアクセスしやすくする、もしくは一枚のページの内部で長い文章を分割し切り替えて表示する機能のことです。デザインや機能も様々で、バリエーションに富んだページネーションがたくさんのサイトで利用されているのを目にすることも多いのではないで
Zabuto Calendar Demo
The Zabuto Calendar jQuery Plugin lets you add a simple month calendar to your web page. It's lightweight, efficient and easy to use. Version: v2.1.0 Basic Usage Initialize The calendar needs jQuery to function properly. After including jQuery, the plugin can be used by requiring the stylesheet and javascript file. Then view the calendar by defining a DOM-element and initializing the plugin. <!--
FullCalendar - JavaScript Event Calendar
npm install @fullcalendar/angular import { Component } from '@angular/core' import { CalendarOptions } from '@fullcalendar/angular' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { calendarOptions: CalendarOptions = { initialView: 'dayGridMonth', events: [ { title: 'event 1', date: '2019-04-01' }, { title: 'e
jQueryプラグイン - Bootstrapを使ったカレンダーを実装 - Zabuto Calendar
Bootstrapを使ったカレンダーを実装するプラグイン「Zabuto Calendar」を紹介します。 jQueryプラグイン「Zabuto Calendar」このプラグインでは、大人気のCSSフレームワーク「Twitter Bootstrap」を使ったカレンダーを実装することができます。 JSON形式のデータを使って、カレンダー上にスケジュールを追加することができます。追加したスケジュールはカレンダー上で色が変わり、クリックすると内容をポップアップすることもできます。便利！ デモでカレンダーの外観を確認してみてください。青色は本日、オレンジはJSONデータによるスケジュールです。スケジュールをクリックしてみてください。なかなかカッコイイですよー。 「Zabuto Calendar」のデモ デモのソース（HTML + jQuery）<!DOCTYPE html> <html> <head
jQueryを使った診断チェックシート
jQueryにはラジオボタンのセレクターが用意されているので それを使うと簡単にラジオボタンだけ処理することができます。 $('input:radio') すべてのラジオボタンの中からチェックされたものだけ得る場合は:checkedです。 $(':radio:checked') または $('input:radio').filter(':checked') これをmapで処理してvalueを足せば合計点が計算できます。 var total = 0; $(':radio:checked').map(function(){ total += Number(this.value); }); 診断ボタンを押した後に結果を表示するのなら、 上記の計算と結果の分岐・表示をボタンのクリックイベントで行います。 $('診断ボタン').click(function() { //合計点の計算 //結果分岐・表
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
始めましょう！ · Chart.js 日本語ドキュメント
「PC盗難」最新質問一覧 - 質問！ITmedia
http://migo-media.com/yes-no/
