すぐできる！VueとjQueryパッケージを連携させる方法
さてさて、最近JavaScript業界では特にReact, Angular, Vueの３大フレームワークの登場でコーディングの基本構造が根本から変わってしまった感があります。 やはりこれらのフレームワークが人気となったのは、それまでJavaScriptでメインとされてきたｊQueryなかった、「実行ルールを決める」というコーディング形式が開発者に受け入れられたのだと考えています。 ただ、そうはいっても元々jQeuryも素晴らしいフレームワークであることは間違いなく、その結果ウェブ上には数え切れないほどのｊQueryプラグインが存在していることも事実です。そのため、無理に新しいフレームワークを使うよりｊQueryプラグインを利用するほうが開発効率が上がるケースもあったりします。 そこで！ 今回は、私がメインで開発に使っているVueとｊQuery（プラグイン）を連携させる方法を紹介することにし
jQuery UI Sortable は並び順を保存しなければ意味がない | hijiriworld Web
jQuery UI はとても便利なライブラリなので使わない手はありません。 ドラッグアンドドロップで要素の並び替えができる Sortable →サンプル1 使い方 必要なJavaScriptファイル ・jQuery ・jQuery UI 実装 > コーディング <ul class="sortable"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> > JavaScript $(function() { $( ".sortable" ).sortable(); }); たったこれだけで、ドラッグアンドドロップによる要素の並び替えができるようになります。 オプションやメソッドを設定することでいろいろできます。 リッチなUIって感じですね！ 「で？」 ていうか、 「並び
jQuery UI の Sortable を使いドラッグ＆ドロップで並べ替え
jQuery UI の Sortable プラグインを使い、ドラッグ＆ドロップで並べ替えを行えるようにする方法。 実装例（サンプル） 項目 1 項目 2 項目 3 項目 4 項目 5 項目 6 項目 7 実装例の動作について 「項目 1」をドラッグして、下へ動かし、「項目 2」の上に持ってくると、「項目 2」が上へ移動し、「項目 2」と「項目 3」の間にスペースができる。そのスペースへドロップすると、「項目 1」と「項目 2」が入れ替わり、「項目 2」「項目 1」「項目 3」…の順番になる。 同様に、「項目 1」から「項目 7」の項目全て、ドラッグ＆ドロップによる並べ替えが行える。 実装例のソースコード 読み込み 読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="stylesheet" href="themes/bas
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
Download jQuery UI Bootstrap
Welcome! This is a live preview of jQuery UI Bootstrap - a project we started to bring the beauty of Twitter Bootstrap to jQuery UI widgets. With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter Bootstrap side-by-wide with it without components breaking visually. Download stable (v0.5) Download Latest (dev) This theme's support
jQuery Mobileを使ったサイトでフラットUIを実現·jQuery Mobile Flat UI Theme MOONGIFT
jQuery Mobile Flat UI ThemeはjQuery Mobile用のフラットUIテーマです。 スマートフォン向けのWebサイトをjQuery Mobileで構築しているなら試したいのがjQuery Mobile Flat UI Themeです。最近流行のフラットなUIをサポートしたテーマです。 ボタン類。アイコンも使えていい感じです。 リストと見出し付きコンテンツ。見出しをクリックすると内容が表示されます。 アイコンやツールバー。スライダーもあります。 主なカラーは黄色、緑系2色、赤、青そして白黒となっています。色を使いすぎないシンプルさ、影などがないフラットな見た目が好感です。 jQuery Mobile Flat UI ThemeはjQuery Mobile用、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る 有名なフレームワーク
読んで覚える、触って体験！JavaScript＆CSS3～gihyo.jp×jsdo.it presents 記事一覧 | gihyo.jp
読んで覚える、触って体験！JavaScript＆CSS3～gihyo.jp×jsdo.it presents 記事一覧
渋谷でサボるエンジニアの日記» ブログアーカイブ » JQuery Sortableを使って順番入れ替え機能の作成
WEBで表示順の入れ替え機能って作るのも、使うのも面倒なんだよね。上下に移動するボタン作ったり、表示順を数値で入力したり。 で、最近そんな機能を作成する必要が出てきまして。いろいろ考えて、そういえばWordPressのウィジェット（右側の最近の投稿やコメントがドラッグアンドドロップで入れ替え可能）って便利だよね、そんな風にできないかな、と思って調べてみたら出来たのでメモ。 とりあえず、何かしらライブラリを使えばできるだろう、と思って調べてみた。やっぱりこういうときはJQuery と YUI に当たることが多いね。 YUI Library Examples: Drag & Drop: Reordering a List Sortable Demos (jQuery UI - Functional demos) ちなみに、WordPressもJQueryっぽい。Sortableを使ってるかど
jQuery UIのデザインテーマをオンラインで作成出来るWebサービス・jQUIT Builder
jQuery UIで利用出来るテーマを オンラインで作成出来る、という Webサービス・jQUIT Builderの ご紹介です。公式でもかなりテーマ を用意してくれていますが、やはり 自作したいところですね。 考えただけでも面倒臭いjQuery UIのデザインをオンラインで作成出来る、というWebサービス。凝ったものは作成できませんが、シンプルなデザインでサクッと作りたいという時にはお世話になりそうです。 いわゆるジェネレーター的なものです。Metro UIベースだそうですよ。見やすくて個人的には結構好きです。 こんな感じ。使い方の説明は不要だと思います。 操作も簡単でいいですね。探せば他にもありそうなツールでは有りますけど個人的には初見でした。 jQUIT Builder
jQuery UIをタッチデバイスに対応させるためのライブラリ・jQuery UI Touch Punch - かちびと.net
jQuery UIをタッチデバイスに対応させる ライブラリ・jQuery UI Touch Punchの ご紹介です。いつか使うかも、と思った ので備忘録。これを見て、そういやスマ フォでjQuery UIを試したことが無いこと に気が付いた次第です・・ jQuery UIのドラッグとかリサイズとかソートとかをiPhoneなどに対応させるためのライブラリです。そういやjQuery UIはタッチデバイスで動くのか試したことありませんでしたが、ドラッグやリサイズはそのままでは使えませんでした。 これは需要あるんじゃないですかね。このライブラリでタッチデバイスに対応させられるのは以下の通り。 Draggable Droppable Resizable Selectable Sortable Accordion Autocomplete Dialog Progressbar Slider 実機でテ
jQueryUIのDialogをカスタマイズする6つの物凄く細かい小技 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） jQueryUIのdialogは結構お世話になっているのですが、たまに欲しい機能がなかったり、あっても説明されてなかったりするのでここにDialogカスタマイズTipsをしたためておきます。 この記事の内容は既に古くなっています。現在最新バージョンのjQueryUIでは挙動が改善されていたり、渡せるオプションが変わっていたりします。 Modalしたダイアログをオーバーレイクリックで閉じる 任意の要素をクリックして閉じる アニメーションで閉じる・開く エフェクト中にオーバーレイの後ろに回りこんでしまうのを回避する 閉じる・開くアニメーションにパラメータを渡す 閉じるついでにデストロイする 1. Modalしたダイアログをオーバーレイクリックで閉じる escキー押下で閉じるオプションはあるのですが、このオプションはない様子。 そこで
jQuery UIのデザインをオリジナルに変更したサンプル
分かりやすいタイトルが思い浮かばない ので適当な感じになりましたが。jQuery UIのデザインをちょっと今風に変更した サンプルが配布されていたので備忘録。 jQuery UI、凄く機能的で良いんですが、 用意されているデザインが若干使いにく いんですよね。 jQuery UIのデザインを変更するやつです。正直、公式で用意してくれているデザインは沢山あるんですが、どれも少々使いにくい感じなので自分で作るしか無いわけですが、結構面倒です。 で、今日紹介するサンプルはBootstrapっぽい感じで割りと使いやすいのではないかと思ってメモがてら記事にします。 Selene こんな感じ。以下動作サンプルです。 Sample 使い方は変わらないです。CSSだけSeleneっていうのを使えばいいだけ。 <link type="text/css" href="ui-selene/jquery-ui-1
jQuery UI Bootstrap
A preview of the jQuery UI Bootstrap themejQuery UI Bootstrap A Bootstrap-themed kickstart for jQuery UI widgets (v0.1) Welcome! This is a live preview of new the jQuery UI Bootstrap theme - a project I started to bring the beauty of Twitter's Bootstrap to jQuery UI widgets. With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsを2系にしたらdatepickerが動かなくなってしまったので困った話 - Qiita
JavaTechnology Slot Online | Cara Daftar bermain Slot Online
jquery-datepicker-skins :: CSS3 skins for jQuery UI datepicker
GitHub - kiandra/Delta-jQuery-UI-Theme: Delta jQuery UI Theme
jQuery UIの各エレメントをレトロ風のかわいいデザインに変更するテーマファイル -jQuery UI Theme Retro