混沌を極める jQuery のコードをいかにして Vue.js に頼らずに整理したか - Qiita
序 師走ですね。年の瀬が近づいてくると、酔っ払った元社員に絡まれることが稀によくあります。 私は jQuery から Vue.js への置き換えで何をやらかしたのか - Qiita 可能ならいきなりフロントエンドのライブラリを導入するよりも jQuery のみで MVVM パターンへ移行したほうがよかったかなぁと今になると思います。 結局のところ、jQuery で苦しんでいたのは、複雑な「状態」が表示やイベントハンドル系のコードとごっちゃになっていたから です。 うん、分かる。当時、この取組みを「大変そうだなー」と思いながら横で眺めていました。 まさか、続きを自分でやることになるとは夢にも思っていませんでしたが(｡◉ᆺ◉) ごあいさつ どうも、 @cesare と申します。 クラウドワークスでサービスの開発や運用を手がける傍ら、たまに機械学習とか VR とかに手を出して遊んでいます。 この
使い勝手は抜群、JavaScriptフレームワーク「Backborn.js」
今回はフルスタックなJavaScriptライブラリ「Angular」と、コンセプトが反対の「Backbone.js」を紹介しよう。 Backbone.jsは、Angularと同じく「MV*」をサポートするJavaScriptフレームワークの一つだ。ただし名前の通り、骨組みしかない。 簡単に言うと、「Model、View、そしてRouterを簡単にWebアプリケーションに組み込むことに特化したJavaScriptライブラリ」となる。もちろん、ほかにも多様な機能を持つが、他のJavaScriptライブラリと組み合わせて使うことが基本となっている。 ほかのライブラリの力を借りる Backbone.jsを使うための準備はいたって簡単だ。公式WebサイトからBackbone.jsをダウンロードして、HTMLにscript要素で組み込むだけだ。ただし前述の通り、いくつか他のJavaScriptライブラ
jQuery→JavaScript書き換え一覧表 - Qiita
<ul> <li id="first">テキストテキストテキスト</li> <li id="second">テキストテキストテキスト</li> <li id="third">テキストテキストテキスト</li> <li id="fourth">テキストテキストテキスト</li> </ul> <ul> <li class="first">テキスト<strong>テキスト</strong>テキスト</li> <li class="second">テキスト<em>テキスト</em>テキスト</li> <li class="third">テキスト<span>テキスト</span>テキスト</li> <li class="fourth">テキストテキストテキスト</li> </ul> <ul> <li lang="en">テキストテキストテキスト</li> <li></li> <li><span>テキ
20160930 フロントエンド高速化 業務編 (社内勉強会)
業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。Read less
CSS, JavaScriptで実装された、チェックしておきたいUIデザインの最近のテクニックのまとめ
実用的なテクニックから、こんなこともできるんだ！とワクワクするすごいアイデアまで、Web制作者はチェックしておきたいUIを実装するテクニックをCodePenから紹介します。 JavaScriptは最小限にして、アニメーションなどCSSでできることは全てCSSで、というのが実装の傾向ですね。
レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 : 森のコーディング
2月10 レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 カテゴリ:javascriptiphone/ipadサイト Tweet レスポンシブデザインのサイトを作っていて、 ブレイクポイントの設定はcssのmedia-queryでやることが多いと思う。 でも動的な処理がからむ部分で変更があるときはjsでも切り替えを行う。 window.resize() とかで。 んで、今回、cssとjsで両方で同時に切り替わるようにしていたのだけれど、 どうやらwin端末だと切り替えのタイミングがズレることがわかった。 css → 768pxで切り替えたい → @media screen and (max-width: 768px) → ちゃんと768pxで切りかわる js → 768pxで切り替えたい → if($(window).innerWidth() < 768){ → 78
jQuery 公式 Blog 「jquery-latest.js を使用するのをやめろ」
jQuery 公式 Blog は、「Don't Use jquery-latest.js」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 jQuery 公式 Blog は、7月 3日付けで投稿された 「Don't Use jquery-latest.js （jquery-latest.js を使うな）」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境 （公開している Web サイト） で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 Don't Use jquery-latest.js ： Official jQ
ノンプログラマーのためのjQuery入門
kanazawa.js v1.0 〜JavaScriptコトハジメ〜（2011年2月5日開催）で使用したスライドです。Read less
レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」:phpspot開発日誌
VenoBox - responsive jQuery modal window plugin レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 LightBox派生スクリプトは多々ありますが、レスポンシブでクールなフラットデザインで、地図、動画、画像、iframeなどなんでも埋め込めるので、今の時代にかなり使いやすそう。 関連エントリ フラットデザインが美しいレスポンシブなLightbox「Nivo Lightbox」 動画/地図/画像のポップアップが可能でレスポンシブなLightBox実装jQueryプラグイン「MagnificPopup」 スワイプできるLightBox実装jQueryプラグイン「Swipebox」 LightBoxはここまで進化したよ「VisualLightBox」
jQueryを高速に動作させるためのポイント５つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近東京にこなれてきたどうも僕です。何がこなれてきたって？電子マネーさ！東京ならSuica、Edy、Waon、なんでもタッチで買えちゃうんだぜ！コンビニで清算するとき、「支払いはEdyで」と一言、そして、読み取り機にソフトタッチ。支払いのシャリーンという音とともに僕の白い歯がキラーンとかがやくのさっ！ そんな東京にこなれてきた僕が、今日はjQueryを使う上で気をつけておきたいポイントを何点か紹介しようと思うよ！ jQueryって便利だけど、もとはJavaScriptで、インタプリタ言語で、コンパイル時に最適化なんてされないから、書き方一つで意外とパフォーマンスに差が出てくるんだよね！開発時は高スペックのPCで見てるから気づかないかもしれないけど、あなたのサイト、低スペックマシンとかモバイル端末でみたら、もっさもさかもよ！ っというわけで、jQueryを使う上で気をつけたいポイントを挙げて
[JS]最近よく見かける縦長ページ用のさまざまなアニメーションが簡単に実装できるスクリプト -ScrollReveal
デモページ フッタはダイナミックに3Dで表示されます。 ScrollRevealの使い方 Step 1: 外部ファイル 当スクリプトとAni.jsを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"> </head> <body> ... <script src="anijs-min.js"></script> <script src="helpers/scrollreveal/anijs-helper-scrollreveal-min.js"></script> </body> Step 2: HTML 各要素のアニメーションの設定は、HTMLに記述
bxslider | Creative Demos
2枚目以降の画像もブラウザの幅全体に表示。 コントローラー（next/prev）クリック後に自動再生をする。 html 画像の幅と高さを指定 <div id="image-bloc"> <ul class="slider"> <li class="slide"><img src="../img/01.jpg" width="800" height="400" alt=""></li> <li class="slide"><img src="../img/02.jpg" width="800" height="400" alt=""></li> <li class="slide"><img src="../img/03.jpg" width="800" height="400" alt=""></li> <li class="slide"><img src="../img/04.jpg" w
コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン | ECサイト｜システム開発会社｜スターフィールド
webサイトのメインビジュアルやバナーの箇所で使われる便利なプラグインを紹介します。 プラグインのダウンロードはこちらから jQuery content slider carousel image slideshow | bxSlider こちらのいいところはカルーセルスライダーになったり、コンテンツスライダーになったり、どちらでも使用できる所です。 まずはDEMOをご覧下さい DEMO 基本的な使い方としては、 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type='text/javascript' src='js/jquery.bxSlider.js'></script>
jQuery＋CSSによるカルーセルパネルの作り方 (1/3)
「カルーセルパネル」は、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。Amazonの「この商品を買った人はこんな商品も買っています」で利用されているので、名前は知らなくてもご存じの方は多いでしょう。カルーセル（Carousel：回転木馬）は、メリーゴーラウンド（merry-go-round）のことで、パネルをスライドしていくと一周して元のスライドに戻ることから「カルーセルパネル」と呼ばれています。今回はjQueryでカルーセルパネルを作成する方法を解説します。 HTML/CSSでカルーセルのベースを作成する 今回作成するカルーセルパネルのHTML／XHTML（以下、HTML）は次のようになっています。カルーセル全体を囲むdiv要素を配置し、id属性に「carouselWrap」を設定します。div要素の内側にはパネルを左方向にスライドさせる「戻る」ボタン用のp
jQuery入門講座：カルーセル CarouFredSel(1)
索引 └ プラグイン目次 1章：小ネタ系 ├ イージングの追加 ├ 要素のセンタリング ├ クッキーの操作 ├ マウスホイール ├ スクロールバー(1) ├ スクロールバー(2) ├ スクロールバー(3) ├ スクロールバー(おまけ) └ アニメの一時停止/再開 2章：ショーケース系 ├ Nivo Slider(1) ├ Nivo Slider(2) ├ Nivo Slider(3) └ Nivo Sliderの改造 3章：カルーセル系 ├ carouFredSel(1) ├ carouFredSel(2) ├ carouFredSel(3) ├ carouFredSel(4) ├ carouFredSel(5) ├ スマホでカルーセル(1) ├ スマホでカルーセル(2) ├ カルーセルとnivo(1) ├ カルーセルとnivo(2) ├ カルーセルとnivo(3) └ カルーセルとniv
簡単にサムネイルやバナーをスライドにするCarouFredSelの使い方！
バナーをたくさん貼りたいけど、あまりベタベタたくさん貼りたくない場合によく使う手なのですが、バナーをスライド風にして、自動でローテーションさせたりします。そんな時にこのjQueryカルーセルプラグイン「CarouFredSel」が便利です。オプションでいろいろな動き方を設定できますので、これ一つでいろいろな場面で使えますよ！ 【更新履歴】 2013年02月22日 WordPressへの使い方追加 2013年09月05日 トップイメージによく使うオプションcrossfadeを追加 jQueryプラグインのダウンロード Circular, Responsive jQuery Carousel – CarouFredSel （機械日本語訳はこちら） 上記サイトよりプラグインをダウンロードして下さい。 「jquery.carouFredSel-*.*.*.js」もしくは「jquery.carouF
複数サムネイルの左右スライドショーを表示する方法【jquery.carouFredSel】｜DAD UNION – エンジニア同盟
コピペで簡単にできる、複数サムネイル（画像）の左右スライダーを表示するjquery.carouFredSel.jsをご紹介します。 複数サムネイルの左右スライドショーを表示するJavaScriptの記述 ※jquery-1.6.2.js、jquery.carouFredSel-2.5.6-packed.jsファイルを読み込みます。$(‘スライドエリア’).carouFredSel({オプション})を記述します。オプションでは自動再生、スライド枚数、次へ・前への表示等を設定します。 <script type="text/javascript" src="js/jquery-1.6.2.js"></script> <script type="text/javascript" src="js/jquery.carouFredSel-2.5.6-packed.js"></script> <scri
wenblish.com - wenblish リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
finefinefine.jp
finefinefine.jp
