Dialog Widget | jQuery UI API Documentation
A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default. If the content length exceeds the maximum height, a scrollbar will automatically appear. A bottom button bar and semi-transparent modal overlay layer are common options that can be added. Focus Upon opening a dialog, focus is automatically mov
スクロールテーブルを実装する際の注意点
前回ヘッダー・フッター・列固定可能なテーブルを実現するためのjQueryプラグインを作ってみたので，その際に気がついた点についてまとめてみた．すこしづつ増えてる・・・ 2011/02/14更新． 2011/03/01更新． 2011/05/30更新． 2013/12/24更新． 2018/01/24更新. (position:sticky法を追加…素晴らしい) 2018/04/27更新. display:grid+position:stickyによる実装例を追加 スクロール可能なテーブルを実現する手段としてはだいたい次の6つの方法が挙げらる．まあここらへんはアイディアの問題なので細かく考えていけばもっとあるかもしれない． テーブル分割法 テーブル要素を複数のテーブルに分割して対処する方法 いろいろな場所で公開されている． pushpin header法 cssのposition設定を利用す
Bootstrap 5のリリースはもうすぐみたい！注目の新機能、jQueryは削除、IE10のサポートは終了へ
Bootstrap 5のリリースがいよいよ近づいてきたようです。 Bootstrap 5では、jQueryは削除され、IE10のサポート終了が予定されており、注目すべき新機能を紹介します。 Bootstrap 5 release date and what's new about it by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Bootstrap 5がリリースされる日 Bootstrap 5で注目の新機能 jQueryの削除 😱 IE10のサポート終了 📺 SVGのカスタムアイコン 🚀 JekyllからHugoへ切り替え 🔝 JavaScriptとCSSのアップデート はじめに Bootstrapがリリースされてから8年が経ち、現在では世界で最も人気のあるCSSフレームワークとなり
サイ本こと『JavaScript 第6版』全800ページを読破し、1万行のesaにまとめてわかった5つのこと - #がみぶろ
しがないラジオのgamiです。 JavaScript界隈では有名な、オライリーのサイ本こと『JavaScript 第6版』という鈍器、もとい書籍を読みました。 JavaScript 第6版 作者: David Flanagan,村上列出版社/メーカー: オライリージャパン発売日: 2012/08/10メディア: 大型本購入: 12人 クリック: 252回この商品を含むブログ (18件) を見る 2012年に発行された、約800ページもある、かなり内容の多い本です。 僕は本を読むときにesaに要約しながら読み進めるのですが、サイ本のまとめesaは全体で「約1万行」という修行みたいな分量になっていました。 サイ本、3年越しくらいでやっと読み終わったあああああ！！！esaにまとめながら読んでたけど、コードも含めて約23万字、1万行の分量になっててesaが悲鳴あげてたw今度感想ブログ書く。多くの人
親ページからiframe内の要素にCSSを適用させる方法
親ページからiframe内にCSSを適用させる方法を紹介します。 １．問題点 次のようなHTMLがあるとします。 index.html（親ページ） <iframe id="test" src="test.html"></iframe> test.html（iframeで呼び出すページ） <html> <head> <title>test</title> </head> <body> <p>test</p> </body> </html> で、iframe内に表示させるページのp要素にindex.htmlからcssを設定したいのですが、方法が分かりません。 ということで、親ページからiframe内の要素にCSSを適用させる方法を紹介します。 ネットで調べてみるとサンプルが色々出回っているのですが、情報が古かったり動作しないものが多かったので、このエントリーですぐに使えそうなものを作ってみまし
jQuery + Flux という選択肢 - peroli Developer's Blog
2016 - 05 - 27 jQuery + Flux という選択肢 JavaScript Front-End こんにちは、 SKAhack です。普段はMERYのWebフロントエンドを主に書いています。 今回はMERYのフロントエンドで採用している jQuery + Flux という構成を紹介してみたいと思います。 なぜReactではなく jQuery か 普通はReact + Fluxで語られることが多いですが、MERYでは JavaScript の ソースコード の大半が jQuery に依存しており、簡単には jQuery を捨てられない状態です。 また、Viewの変更をする２つのライブラリを 共存 させるのも良くないですし、MERYのサービス特性上、現時点で1画面を頻繁に書き換えるような処理は少ないこと、ReactがサポートしていないIE8など古いブラウザもサポートしているとい
2015年総まとめ、jQueryのプラグインとスクリプト100選
毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 ソーシャル関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェクト関連 テキスト関連 タブ・アコーディオン関連 テーブル・リスト・チャート関連 フォーム関連 パネル・ボックス関連 モーダル
ものっすごい簡単にGoogleマップAPIを操作出来るjQueryGoogleMAPプラグイン
タイトルで全部言っちゃってる気がしないではないですが、WebサイトにGoogleMAPを設置して、色々と簡単にAPIを叩けるプラグインです。 ちなみにこの記事の為にこのjQueryプラグインを読み込むなんてことはしておりませんので、説明で使用しているMAPは全てキャプチャー画像です。本来なら、ぐりぐりと拡大縮小出来るあのMAPを貼り付ける事が出来ます。気になる方は、最後に紹介するチュートリアルページをご覧になっていただければ、わかると思います。 まずは呼び出し 基本の呼び出し。 まずはページのどっかに書いて読み込みましょう。 <script src="javascripts/jquery.js"></script> <script type="text/javascript" src="//www.google.fr/jsapi"></script> <script type="text/
jQuery基礎文法最速マスター[to-R]
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
![jQuery基礎文法最速マスター[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
イベント一覧
Events/API/jQuery Page Load ready(fn) DOMがロードされて操作・解析が可能になったタイミングで関数を実行します。 Event Handling bind(type, [data], fn) 各要素を、例えば"click"のようなイベントのハンドラに対してバインドします。カスタムイベントに対しても同様に操作できます。 one(type, [data], fn) 各要素に一度だけ実行されるイベントのハンドラを渡します。 trigger(type, [data]) 各要素の引数で渡したイベントを実行します。 triggerHandler(type, [data]) 要素のイベントを実行しますが、あくまでハンドラに入っている関数のみを実行します。ブラウザがデフォルトで持っている動作は行われません。 unbind([type], [data]) bindの逆です
Droppable Widget | jQuery UI API Documentation
The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which draggables each will accept. Theming The droppable widget uses the jQuery UI CSS framework to style its look and feel. If droppable specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes option: ui-dropp
Using HTML5 Drag and Drop in ASP.NET | Developer.com
Introduction Drag and drop operations are common in desktop applications. Modern web applications also try to harness the ease and power of drag and drop operations to provide enhanced user experience. Web developers often resorted to JavaScript based libraries or custom techniques for enabling drag and drop behavior in their applications. Luckily, HTML5 comes with an inbuilt support for drag and
超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編
超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編 jQuery2013年7月31日 前の記事でご紹介したJSONについて、以下の3パターンの実装例を元に解説していきます。 js中に記述されたJSONデータからHTMLに表示 外部ファイルのJSONデータからHTMLに表示 JSONPで外部ファイルのJSONデータからHTMLに表示 1.js中に記述されたJSONデータからHTMLに表示 まずJSON+jsの全体図をつかめるよう、活用する場面はあまりありませんが、jsの中にJSONデータを記述した例を紹介します。 実際のサンプル HTML <table cellpadding="0" cellspacing="0" border="0" class="tbl"> <col width="15%" /> <col width="15%" /> <col width="70%
Droppable 概要 ～ jQuery UI の使い方～
draggble要素をドロップできる状態にします。 基本的な使い方は、jQueryオブジェクトに対して、.droppable()メソッドを呼ぶことにより要素をドロップできるようにします。 $(".selector").droppable(); 引数に（オブジェクト形式の）オプションを指定して、挙動を指定することができます。 $(".selector").droppable({ activeClass: 'drop-active', }); また、引数に文字列を渡すことにより、ドラッグを無効・有効にしたり等、ドラッグ機能を変化させることができます。draggable同様、droppableDisable()などの個別のメソッドが存在せず、.droppable()の引数にメソッド代わりの文字列を指定します。 $(".selector").droppable('disable');
jQuery UIのDraggableで快適なドラッグアンドドロップライフを！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。づやです。 さて、要素をドラッグアンドドロップさせてなんかしたいっていう要望は割とあると思うのですが、個人的には5年くらいその処理が必要とならず、あまり考えることがありませんでした。 そこで最近はどんな感じでできるのかなあ、と思っておりまして、ちょっと調べてみたことをまとめます。 5年前はprototype.jsとプラグインを利用していたのですが、今回はjQueryとプラグインで実装してみたいと思います。 便利なjQuery UIのDraggableを利用します と言っても、jQuery UIを利用すれば超簡単にできる模様なので、まずは作ってみました。 ※コードは大事な所だけ抜粋しています <html> <head> <!-- まずjQueryとjQuery UIを読み込みます。今回はCDNから読み込んでます --> <script src="//ajax.googleapis
はじめてajaxを使うときに知りたかったこと - Qiita
はじめに 今更ですが最近ajaxを少し触るようになりました。 jQueryを使えば簡単にajax通信ができるため、単純なものであればそれほど実装は難しくないかと思います。 ですが少し複雑なことをやろうとしてみると、急にハードルが上がる気がします。 そこで自戒を込めて、ajax初心者の方に対してはじめにこれを知りたかったと思えるんじゃないかというものをまとめてみたいと思います。 ※jQueryを利用したajax通信を想定しています 目次 処理の順番を意識する $.ajax()の省略メソッドを知る イベントを知る デバッグ方法を知る 通信状況を想定する（タイムアウトを設定する） 連続クリックを防止する ← [New!] 連続通信を防止する ← [New!] 処理の順番を意識する ajaxを使用する場合は、非同期通信で処理したいケースがほとんどかと思います しかし単純にそのまま書いただけでは処理
HTML5+Canvasでパーティクルっぽいのを作ってみる
HTML5+Canvasでパーティクルっぽいのを作ってみる HTML5+Canvasを使用して簡単な横に流れるパーティクルを作成してみます。 投稿日2015年07月16日 更新日2019年04月13日 パーティクルオブジェクトを作成して動かす 基本的な作りは下記記事をベースに作成します。 HTML5で作るCanvasアニメーションの基礎 上記の記事では一つの円を動かすだけだったので描画関数だけ作成しました。 function drawCircle(x, y, scale, color) { ctx.beginPath(); ctx.arc(x, y, scale, 0, 2*Math.PI, false); ctx.fillStyle = color; ctx.fill(); } パーティクルの場合、粒子一つ一つに位置情報や速度の設定をしたいので、少し拡張してオブジェクトとして作成します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How can I change an element's class with JavaScript?
helpfulness.jp
漢は黙ってjQuery
