SPAだけじゃない！Vue.js[1] jQueryをVue.jsに書き換えてみる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドのつっちーです。 以前は最先端感をプンプンさせていたSPA（シングルページアプリケーション）ですが、最近では事例や情報が増え、当たり前に選択される技術となってきたように感じます。今後もどんどん使われていくのでしょう。ですが、だからといってサーバーサイドテンプレート（Haml、Slim、テンプレートとしてのPHPなど）やHTMLファイルへのマークアップが無くなるわけではありません。SEO対策、CMSやフレームワークへの適応など、様々な理由でまだまだ使われていくはずです。 ではSPAと、サーバーサイドテンプレートやHTMLファイルへのマークアップと、両方に使えるフレームワークはないものだろうか？ そう思い調べてみたところ、Vue.js がまさにそれでした。案件でも実際に使用し、大きなメリットを感じられたため、記事にまとめておこうと思います。 Vue.jsのSPAでの用
![SPAだけじゃない！Vue.js[1] jQueryをVue.jsに書き換えてみる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作](https://cdn-ak-scissors.b.st-hatena.com/image/square/9c0639a571a5571b378855b1f6fd361c9080dbcf/height=288;version=1;width=512/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2018%2F02%2F30145102%2F01_ogp.png)
jQueryでマウス動作が止まった時点で展開するドロップダウンメニューを実装する方法｜BLACKFLAG
以前「jQueryでマウス動作がストップした時を判別して処理する方法」と題して、jQueryでマウス動作がストップした時を判別して処理する方法を紹介しましたが、それを利用してドロップダウンメニューのロールオーバー動作をマウス動作がストップしたときに発動させるUI改善について紹介してみます。 「jQueryでマウス動作が止まった時点で展開するドロップダウンメニューを実装する方法」サンプルを別枠で表示 ※上記のサンプルでは「WORKS」「PRODUCT」「RECRUIT」の3つのボタンのみにドロップダウンメニュー動作を実装しています。 ドロップダウンメニューのようなロールオーバーの状態を判別して処理するメニューUIでは、ボタンにロールオーバーをして表示されたメニューエリアにマウスカーソルを持って行く際に誤って隣のボタンに少しでも触れてしまうと表示されていたメニューエリアの内容が入れ替わってしま
プラグイン作成
query_plugin_authoring_ja.md 元文書: Plugins/Authoring - jQuery Wiki(t) プラグイン/作成 jQueryを使うことが快適になってきたら、プラグインの作り方を知りたくなるでしょう。それは正解です！プラグインとメソッドでjQueryを利用することは、非常に協力で、さらに、プラグインの中に最も有効な機能を抽象化することで、開発にかける時間を大幅に節約出来ます。この記事は、プラグインを書き始める際の基本的な概要とベストプラクティス、さらに気をつける必要のある一般的な落とし穴についての記事です。 目次 さあはじめよう コンテキスト 基本 メソッドチェーンの維持 デフォルトとオプション 名前空間 6.1. プラグインのメソッド 6.2. イベント 6.3. データ 概要とベストプラクティス 翻訳 さあはじめよう jQueryプラグインを書
jQuery で複数の要素のアニメーションが全て終わったら何かを実行する - ダーシマ・ヱンヂニヤリング
jQuery でたくさんの要素をグリグリ動かしたいときに、完了時刻の違う複数の要素のアニメーションが両方終わった時に何かを実行する、というような処理をしたいと思うことがある。 完了時刻が遅い方のコールバックに処理を書けば、望みのことは出来る。ただ、このようにして書かれたコードは変更に弱いし、見ただけで何をしたいコードなのかがパッと見わからなくなる。 アニメーション完了後に何かをするといえば、慣例的に以下のように書くことがポピュラーである。 $('.target') .animate({ top: '+=100px' }, 500, 'swing', function () { // アニメーション完了後に実行される alert('done!'); }); jQuery 1.6 から、 animate や fadeOut といった処理がキューに入る系のメソッドでは、キューがすべて空っぽになっ
自分以外の領域がクリックされたら、ポップアップを閉じるような jQuery の処理例。 - mabots' blog
ポップアップを表示して、その領域外をクリックされた時にそのポップアップを閉じたい、といった処理はよくあります。 Stackoverflow などでよくある処理としては、 クリックイベントを全検知して、Pop up を閉じるような処理をしてしまう。 もし自分自身だったら stopPropagation() して、イベント伝播しなくする。 という処理があるのですが、若干危険な処理です。理由は後述します。 今回のアプローチとしては クリックイベントを全検知 (ついでに touch device も対応) もし、そのクリックが自分を含まないものであれば *1 閉じる処理をする。 $(document).on('click touchend', function(event) { if (!$(event.target).closest('#target').length) { // ここに処理;
【jQuery】ブラウザのタブが非アクティブ時でもsetIntervalの挙動について！ - Web.fla
丁度、jQueryで自動的にスライドさせて画像が切り替わり、ボタンをクリックすると次の画像・前の画像にスライドするイメージスライダーを自作してたんですが、ちょっと変な挙動が発生しました。 その挙動というのが、ボタンがフェードアウトとフェードインが繰り返されている感じです。これは自動的にスライドさせて最後の画像が標示された時は「NEXT」というボタンを非表示にして最初の画像の時は「PREV」ボタンを非表示にするアニメーションをチェックする関数を作って自動的にチェックしていました。もちろん自動的なアニメーションはJavaScriptのsetIntervalで実行しています。 で、それがどういう時に発生しているかというと、setintervalが実行されているときに、そのページを開いたまま、ほかのタブをしばらく見ていて、再度setintervalを使用しているタブに戻った時に発生している様です！
lightGallery
lightGallery A lightweight, modular, JavaScript image and video lightbox gallery plugin. Available for React.js, Vue.js, Angular, and TypeScript. View on GitHub
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
外部サイトへのリンクにtarget=_blank属性を追加（jQuery）
外部サイトへのリンク jQueryを使って、外部サイトへのリンクにtarget=_blankを追加する仕様にしました。 外部へのリンクにtarget=_blank属性を付けることはアクセシビリティの観点から望ましくない。つまり、別ウインドウで開くかどうかはユーザーが判断すべきとされてきましたが、これだけタブブラウザが普及するとかえってアクセシビリティ上よろしくないという気がします。 といって膨大な記事の中から外部へのリンクを探し出して、手書きでtarget=_blank属性を追加するのも大変な作業量です。 そこで、jQueryを使って処理することにしました。 関連リンク Wordpress: 外部リンクをtarget=_blankに - blog.eラーニング.co.jp jQuery (document).ready( function () { jQuery ('a[href^=htt
『チェックボックスにjQueryで簡単に全てをチェックさせる方法』
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます！現在、長野県長野市の制作会社でWeb作成中！ ＨＴＭＬのフォームでチェックボックスで選択させるときに 項目を全てチェックさせる機能をサクッと実装 させるやり方を発見 jQueryだとアッという間にできます Easiest “check all” ever with jQuery 実装するのに手間だったのでこれだと楽ですね。 $(function () { // this line makes sure this code runs on page load $('#checkall').click(function () { $(this).parents('fieldset:eq(0)').fi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Skitter • Slideshow for anytime
jQueryで要素をシャッフル。 | Almondlab
https://atmarkit.itmedia.co.jp/ait/subtop/features/da/dt_jqueryref_index.html