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でよく使う動きをVue.jsでやってみる - Qiita
最近、Vue.jsが流行っており、「デザイナーがとっつきやすいのがVue.js」だとか、 「脱・jQueryできる」だとか、そんなような言葉をちらほら見かけます。 Vue.jsはできることが多く素晴らしいものですが、デザイン側としては アニメーションなどのフロント面の実装することが多いので、その視点で果たして「脱・jQuery」が どこまでできるものなのかどうか・・・というのが気になりました。 よって、今回は実際にjQueryでよく使っているやつをVue.jsでやってみることにしました。 ※HTMLとCSSは省略します。すみません。 クリックしたらClassを付与（トグル） jQueryの場合
jQueryで動的に追加した要素はクリックイベントが発火しない？いやそんなことはないぞ - Qiita
知ってるよって？ 知ってる人には当たり前、でも知らない人はかなり躓くんだよ！ 事象 こんなボタンを作るじゃろ <div class="btn-area"> <button type="button" class="add-btn">ボタン1</button> </div> $(".add-btn").on("click", function () { var num = Number($(this).text().replace("ボタン", "")); var html = '<button type="button" class="add-btn">ボタン' + (num + 1) + '</button>'; $(".btn-area").append(html); }); 「ボタン1」をクリックするたび「ボタン2」が増えるね だがしかし！ 「ボタン2」をクリックしても何も起きない！
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
jQuery Validate Pluginの解説とValidate 日本語環境用PluginとjQuery Form Pluginとの連携 - くらげだらけ
前回、フォームをAJAXでうんちゃかするjQueryFormPluginのエントリーを書きましたけど、フォームと言えばValidateですよね。 ってことでjQueryValidatePluginについてもサラサラ見ていたので、こっちも日本語Document化したのを書いておく。 で、日本語化して書いていたら思ったよりも量が多くて少し適当な感が否めないような感じになっているかもしれません。 必要なさそうなところは一部飛ばしているしー、たまにおかしいところがあるかもしれませんが悪しからず。そんときはコメントくださーい。 あ、あとエラーメッセージ等のローカライズ版と日本語環境用のValidateメソッドを新たに追加するスクリプトも書きました。 デフォルトだと半角英数のみとかー、ひらがなのみとかーできないんでー それから、もともとの目的のjQuery Form Pluginとの連携でAJAXなん
JSが苦手なWebデザイナーこそ活用したい、Bootstrapのモーダルをマスター
Bootstrapのさまざまなコンポーネント／プラグインの中でも便利なのが、JavaScriptを書かなくても手軽にコンテンツを表示できる「モーダル」です。アラートだけではもったいない、その使い方をマスターしましょう。 以前チュートリアルでBootstrap3のCSSフレームワークがかけ出しのデザイナーにとってどれほど強い味方になってくれるかを説明しました。Bootstrapには、すぐに使える優れたJavaScriptとjQueryのコンポーネントやプラグインが搭載されています。フレームワークのバージョンが3.3.7となり、バージョン4のベータ版リリースの準備段階に入って 、重要で不可欠な変更がいくつか加えられました。 このチュートリアルではBootstrapのjQueryプラグインの中でも特に役立つモーダル（Modal）について紹介します。 BootstrapのモーダルはJavaScri
JQuery Cycle Plugin - Effects Browser
blindX blindY blindZ cover curtainX curtainY fade fadeZoom growX growY none scrollUp scrollDown scrollLeft scrollRight scrollHorz scrollVert shuffle slideX slideY toss turnUp turnDown turnLeft turnRight uncover wipe zoom Toggle the sync option to see how some effects behave differently (such as blind, curtain, and zoom). sync: true
Documentation | jQuery Validation Plugin
link Validate forms like you've never validated before! "But doesn't jQuery make it easy to write your own validation plugin?" Sure, but there are still a lot of subtleties to take care of: You need a standard library of validation methods (such as emails, URLs, credit card numbers). You need to place error messages in the DOM and show and hide them when appropriate. You want to react to more than
jQueryのdata-*属性キャッシュ仕様と対策
Updated 2014.02.16 / Published 2014.02.16 jQueryでdata-*属性を扱う際にjQuery.data()メソッドもしくはjQuery.attr()メソッドを使うことになるでしょうが、jQueryで扱えるdata-*属性のオブジェクトは前提としてキャッシュ仕様であることを理解しておかないと嵌ることが多々あります。 取得だけなら問題は起こらない <div id="user1" data-id="1" data-user="Jack" data-date-of-birth="2000-10-01">Jack</div> これらのdata-*属性を取得したい場合、jQueryであれば次のように記述します。 //data()の場合 jQuery("#user1").data("id"); // => 1 (数字扱い) jQuery("#user1").d
Image gallery with fancy transitions effects
I was looking all over the Internet for some jQuery gallery plugin with some interesting transition effects. I found a lot of great plugins but they all have pretty same transition effects. Mostly that was fading and sliding effects. I wanted something different so I decide to made my own slideshow gallery plugin for jQuery. That’s how was born jqFancyTransitions. My main idea was to build some ‘s
高機能ファイルアップロードjQueryプラグイン｜ドラッグ＆ドロップ、プログレスバー、オーディオ、ビデオ、各種ファイルサポート対応
高機能で美しい インターフェイスはやはり2015年度版という感じはしますが、UIはある程度設定で変更出来ます。インターフェイスデザインは5年たったらがらりと流行りが変わるので便利かもしれませんね。 ドラッグ&ドロップサポート もちろん普通にアップロードする事も可能ですが、それ以外にドロップアンドドロップにも対応しているという事です。 同時に複数のファイルをアップロード可能 幾つかのファイルを同時にアップすることが出来ます。先にアップロードするファイルを選び、一斉アップロードも出来ますし、一つ一つアップロードすることも可能です。 対応デスクトップブラウザ まさかのIE6から対応。 Google ChromeApple Safari 4.0+Mozilla Firefox 3.0+Opera 11.0+Microsoft Internet Explorer 6.0+ 対応モバイルブラウザ Ap
スクリプト0行で驚くほど描けるWebGL - Qiita
WebGL Advent Calendar 2014の12日目が空きっぱなしだったので書いてみました。 JavaScriptを1行も書かずに出来るWebGLの新しい面白さを紹介します。 「JavaScriptそのものが苦手」な人のためのWebGL入門記事です 恐ろしいほどに長い初期化、意味不明なGLSL、名前も聞きたくない行列&ベクトル・・・ WebGLはブラウザで3DCGが出来るという魅力で多くの人を惹きつけましたが同時に多くの挫折を生み出してきました。 難しすぎるのです。 「three.js使えば簡単じゃん。」 確かにWebGLを自力で書くよりは50倍くらい楽です。 しかしそれは重要な事実が考慮されていません。 それは「そもそもJavaScript自体が難しい」ということ。 遅い・重いと批判されるjQueryがそれでも圧倒的な人気を誇っているのはJavaScript自体の難しさを解決し
jsshell - Chrome Web Store
Interactive Javascript with jQuery and jLinq
MdN Design｜総合情報サイト
第8回「最近注目を集めているJavaScript/jQueryのツール・テクニック45」 2010年04月09日 今回は、JavaScriptやjQueryを使ったテクニックやツールなどを紹介しよう。これまで同様の記事を何度か掲載してきたが、今回は海外で多くの注目を浴びたものを厳選している。フォームやボタン、カレンダー、ナビゲーション、デバッグ関連などさまざまな記事を紹介するので、ぜひチェックしてほしい。また、後半ではJavaScriptに関するリファレンスサイトなども紹介している。 余談だが、Smashing Magazineのページ上部にネットワークタブがあることをご存知だろうか。こちらでも記事を紹介しているので、ぜひご覧いただきたい。 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：45 Fresh Usefu
jQuery.jsを使ってhtmlを外部読み込み
htmlの作成時に各ファイルで共通している部分がありますね。 ・ヘッダとか ・フッタとか ・グローバルナビとか そんな時、どうしてますか？ 1.各ファイルに同じ記述をしてますか？（変更掛かったらめんどくさいですね） 2.SSI（サーバーサイドインクルード）してますか？（できればいいけどちょっぴり敷居が高い？） 3.avascriptでdocument.writeつかってますか？（ソースが長いとめんどくさいですね） ざっくりリストアップすると以上のような方法が考えられます。 僕も上記のどれかをケースバイケースで使ってました。 そこにもうひとつ選択肢を追加します。 jQuery.jsを使って外部のhtmlファイルをまるごとインクルードしちゃいましょう。 方法 1.何はともあれjQuery.jsをダウンロード http://jquery.com/ 2.htmlのheader要素内で読み込む <s
これは便利だ！Excel→Table化するjQueryプラグイン
Webページに掲載する面倒な表（テーブル）の作成を楽にしたい――。以前、本サイトではExcelファイルを簡単にHTML（Tableタグ）に変換するExcelアドイン「XLS2HTMLTable」を紹介した（関連記事）。XLS2HTMLTableはとても便利なツールだが、それでも表が大量に必要な時にはやはり手間がかかる。 今回はさらに楽をできて便利なアイテムを紹介しよう。それが、CSVファイル（カンマ区切りテキスト）を読み込み、Tableに整形して表示するJavaScriptライブラリ「jquery.csv2table.js」だ。 JavaScript関連の著書も多い高橋登史朗氏が作った「jquery.csv2table.js」は、名前のとおりjQueryのプラグインとして動作するもので、HTMLにわずか数行のスクリプトを書き加えるだけで使える手軽なライブラリだ。さっそく実際にjquery.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【jQuery】モーダル系プラグイン Magnific Popupの使用方法 - Qiita
memorandum
ThemePunch
ゆーすけべー日記