jQuery UIを使った要素のドラッグアンドドロップ（複数選択も）
公開日 2018.5.26カテゴリ：jQueryタグ：JavaScript,Frontend,jQuery,jQuery-UI,Draggable,Droppable,Selectable jQuery には数えきれないくらいのライブラリが開発されており、便利なものがたくさんありますが、jQuery プロジェクト、いわゆる公式の jQuery チームが開発した jQuery UI というライブラリがあります。 今回は jQuery UI を使って、要素のドラッグアンドドロップを実装します。 Contents 開発環境 jQuery UI インタラクション 要素をドラッグする 目的の場所へドロップする 複数の要素をドラッグする 開発環境 今回の開発環境は以下の通りです。 HTML5 CSS3 JavaScript jQuery v3.3.1 jQuery UI v1.12.1 jQuery
jQuery Modal
The simplest modal you ever did see. Star Automatic binding using HTML semantics No images & light-weight (about 1k minified) Simple markup makes it easy to style Attach custom behaviour using jQuery events Close with click or ESC key Built by @kylefox 🍸 # Install The simplest method is to use the hosted version from cdnjs: <!-- Remember to include jQuery :) --> <script src="https://cdnjs.cloudfl
flexselect: a jQuery plugin
What? Flexselect is a jQuery plugin that turns select boxes into flex-matching incremental-finding controls. Think of it as Quicksilver squished into a select box. Download, view the examples, and enjoy. It uses the LiquidMetal scoring algorithm to narrow the selection. Examples On the left is a traditional select box. On the right is a flexselect control. Just start typing to narrow the selection
jQuery Ui button font-size
I've recently added Primefaces to my WEb app in order to use it's dataTable UI. So I decided to go and up the font size of the dataTable to 12px instead of the default 10px it comes with. so I added this to my Css: .ui-widget, .ui-widget .ui-widget { font-size: 12px !important; } Anyway, I was also using a button with the styleclass="button" which comes from the jquery.ui and now it's affected tha
jQuery-Validation-Engineで簡単にフォーム内容をチェック！ - 北海道苫小牧市のホームページ制作 STUDIO KEY
フォームを伴うHTMLコードを書いていると、どうしてもバリデーション(入力値の妥当性確認)が必要になります。 HTML5になると、フォーム属性である程度はカバー出来ますが、全てのブラウザがHTML5に対応し、かつ利用者の多くがこれの恩恵を受け、かつ対応出来ないブラウザを利用している方を切り捨てる時代になるにはまだまだ数年掛かります。 バリデーションの方法は大きく分けてPOST後とPOST前の二種に分かれます。 POST後のバリデーションは送信された際に、PHPやCGI側で入力内容をチェックし、エラーならメッセージを表示させるなどです。 厳密にチェックするならばこれが一番ですし、エラーメッセージなどデザイン部分も色々と工夫する事が出来ます。 ただ、簡単なメールフォームでいちいちメールアドレス形式かどうかを確認する為だけにPOSTし、エラーメッセージを表示するプログラムを書くのは面倒です。 ※
[JS]最近リリースしたjQueryのプラグインのまとめ -2013年1・2月
紹介済みから未紹介のものまで、最近リリースしたjQueryのプラグインをまとめました。 去年までは33+1選としてましたが、今年から新たなフォーマットで。
jQueryで「Now Loading-30%」みたいなプリローダーを作る方法
フラッシュサイトの専売特許だったNowローディング（プリローダとも）ですが、jQueryやHTML5の登場で、最近では、非フラッシュサイトでも見かけるようになりました。この記事では、jQueryを使ってプレローダーを表示する方法を考えて見ます。 デモ 今回作るプリローダーのデモです。一度読み込むとキャッシュされてしまうので、もう一度みたい方は、ブラウザをキャッシュを消して見てください。 デモ 考え方とコード イメージファイルが重いサイトの場合であれば、イメージをプレローディングしながら、読み込んだイメージ数に応じた％を表示することでプリロード します。すべて読み込んだらメインコンテンツを表示します。 このサンプルコードでは、画像のロードイベントを拾って読み込んだイメージをカウントし、%とプログレスバーの表示を変えています。 <!DOCTYPE html> <html> <head> <sc
jquery.balloon.js Demo page
jquery.balloon.js Demos A jQuery plugin to add balloon tips to elements User-friendly, fine-tunable and without css and images Getting started (1) Download and load this plugin javascript file after jQuery. <script type="text/javascript" src="js/jquery.balloon.js"></script> (2) Call $().balloon(options) in document ready event of jQuery. $(function() { $('selectors').balloon(options); }); Distinct
設置が超簡単でカスタマイズ性の高い吹き出しホバー用jQueryプラグインjquery.balloon.jsを公開 | URIN HACK
設置が超簡単でカスタマイズ性の高い吹き出しホバー用jQueryプラグインjquery.balloon.jsを公開します。 使用するためにはjQueryと本プラグインのjavascriptファイルのみで、CSS、画像などは不要です。どこにでも簡単に設置することができると思います。 設置方法 (1) プラグインをダウンロードして、jQueryの後にスクリプトファイルを読み込む。 <script type="text/javascript" src="js/jquery.balloon.js"></script> (2) ドキュメントのreadyイベントで$().balloon(options)を実行する。 $(function() { $('selectors').balloon(options); }); デモページ 以下のデモページをご覧ください。
jQueryを使ったタブメニューの実装サンプルまとめ
**追記** この記事とは直接関係ありませんが、自作のタブプラグインを貼っておきます。 rin316/jquery.tab: jQuery tab plugin. **追記終わり** 仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。 それぞれの挙動も比較しやすいように並べてみました。 今日が勉強初投稿の日！ 写真:新川通りで撮った桜。 まずはファイルの用意 下記リンクからダウンロード。 ・jQuery本体…Past Releases内→最新バージョンのMinified ・Download Builder | jQuery UI (このサイトで使っているui.tabs.zip) head内にリンクを張る ダウンロードしたファイルに対して、head内にリンクを張ります。 <head> <!-- jQuery --> <script type="text/javascrip
jQuery1.6の更新内容をまとめたよ。 | Ginpen.com
昨日jQuery1.6が公開されたので、その内容をまとめてみました。 jQuery: » jQuery 1.6 Released だいたい原文にそってますが、翻訳ではありません。 追記 : data()の扱いが誤っていたので修正しました。キーをキャメルケースにする必要があるとしていましたが、引数を与えずにマップを得た場合の話で、引数にキーを与えて個別に取得する場合は過去のコードと互換性があります。thanks @GeckoTang !（23:11） 変更点 既存コードに影響がある変更がいくつかあります。 data属性の自動マッピング ハイフン “-” を含む名前のとき、$element.data()に引数を与えずに得たマップのキーはキャメルケースに変換されるようになりました。 var $div = $('<div data-abc-xyz="123" />'); var data = $d
チュートリアル - jQuery JavaScript ライブラリ
", items.join("") + "") //*/ var iframe = document.createElement("iframe"); iframe.src = "index-blank.html"; iframe.width = "100%"; iframe.height = $(this).prev().attr("rel") || "125"; iframe.style.border = "none"; $(this).prev().append(iframe); $(window).load(function(){ var doc = iframe.contentDocument || iframe.contentWindow.document; source = source .replace(/
jQuery UI API 1.8.4 日本語リファレンス - StackTrace
jQuery UI API 1.8.6 の日本語リファレンスです。 ソースコードを読み、jQuery UI(公式サイト)のドキュメントを参考に解説しました。 また、全ての解説に、実際に実行できるサンプルを付けました。 jQuery UIとは jQuery UIとは、jQueryライブラリ上に構築された強力なユーザインターフェースライブラリです。 jQuery UIの構成 jQuery UI 1.8.6 は、大きく分けて「インタラクション」「ウィジェット」「ユーティリティ」「ビジュアル効果」3つのカテゴリに分けることができます。 それぞれ、次の機能が提供されています。 インタラクション 対話型ユーザインターフェースを構築するためのライブラリ ライブラリ説明対応ファイル
【jQuery】画像・テキストが切り替わるアニメーション
Lösungen für Marken, die digital performen. Wir sind die Medienfreunde, eine Design- und Digitalagentur in Leipzig. Seit 2004 entwickeln wir individuelle Websites, Plattformen und Tools, die mehr leisten als gut auszusehen: sie funktionieren, wachsen und liefern messbare Ergebnisse. Design, Technik und Strategie aus einer Hand – für Marken, die digital performen. Eine ganzheitliche Marketingberatu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - riklomas/quicksearch: A jQuery plugin for searching through tables, lists, etc quickly
http://www.designwalker.com/2009/02/jquery-dropdown.html