初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips
こんにちは、鴨田です。 今更感はすごくあるとは思いますが、 コーダー初心者でも簡単なJavaScript/jQueryのコードで、 ちょっとした運用を楽に出来るTipsを紹介したいと思います。 １．現在見ているページのナビゲーションをアクティブにする JS if (document.URL.indexOf("001.html") != -1) { $("nav a.top").toggleClass("on"); } else if (document.URL.indexOf("002.html") != -1){ $("nav a.list").toggleClass("on"); }
クライアントサイド JavaScript のパフォーマンス改善には backburner.js が便利！ - tricknotesのぼうけんのしょ
DOM 処理や Ajax など、JavaScript が外の世界とやり取りする部分というのは、一般的に待ち時間を多く必要とします。 パフォーマンスを改善しようと思った時に、ロジック部分でコツコツと節約するより、まずコストが高い処理を行わないようにするということで、驚くほどの効果を経験をされたことはありませんか？ 今までパフォーマンス測定をされた方であればピンとくる部分があることと思います。 そんな時に役に立つのが、今回ご紹介する backburner.js です。 ebryn/backburner.js - GitHub backburner.js って? backburner.js とは Ember.js の run loop モジュールから切りだされたとても小さなライブラリで、短時間に集中的に発生するメソッド呼び出しの回数を制限したい場合などに利用することができます。 backburn
Re:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips
Re:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips ネタ元:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips : アシアルブログ ちょっと気になるコードがあるのでツッコミを。 １．現在見ているページのナビゲーションをアクティブにする if (document.URL.indexOf("001.html") != -1) { $("nav a.top").toggleClass("on"); } else if (document.URL.indexOf("002.html") != -1){ $("nav a.list").toggleClass("on"); } class属性の付加にtoggleClass()を利用しているけどaddClass()のほうがシンプルでよいです。 if (document.URL.index
[JS]スマフォアプリのように左右にスライドしてコンテンツを表示するスクリプト -mmenu
mmenuの使い方 スクリプトの使い方は下記ページにステップごとの解説があります。 tutorial Step 1: 外部ファイル head内に「jquery.js」と当スクリプト・スタイルシートを記述します。 <head> <script type="text/javascript" language="javascript" src="jquery.js"></script> <script type="text/javascript" language="javascript" src="jquery.mmenu.js"></script> <link type="text/css" media="all" rel="stylesheet" href="jquery.mmenu.css" /> </head> Step 2: HTML コンテンツの基本構造は、下記のようになります。
『JavaScriptの開発効率を高める7つのライブラリ』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。
「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる － Publickey
このところHTML5関連のモバイルアプリケーション開発について調べていて、先週の水曜日にはSwapSkills主催のイベント「jQueryモバイルで簡単！ スマートフォンサイト作成」に参加してjQuery Mobileについて勉強してきました。 jQuery Mobileとは、jQueryのプラグインとして利用するモバイルアプリケーション用のライブラリです。そしてその驚異的なまでの簡単さは、これから業務用のモバイルアプリケーションの作り方を一変させてしまう可能性を感じさせます。 jQuery Mobileの大きな特徴は次の3つです。 1）HTMLを書くだけでモバイルアプリケーションができてしまう 2）モバイルのユーザーインターフェイス対応の部品が多く揃っている 3）iOS、Android、WebOS、Windows Moblie、Symbianなどクロスプラットフォーム対応である 具体的な
HTML5アプリで簡単にジェスチャーを実装できるライブラリ QUOjs 【18日目】 | DevelopersIO
と同じで最初に呼び出されます。 イベントハンドラの渡し方なども先頭が$$になっている以外はjQueryと同じです。 ブラウザのジェスチャ機能と競合する場合があるので、ブラウザのジェスチャ機能を無効にする必要があります。 タッチサンプル <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>タッチサンプル</title> <script src="quo.js"></script> <script> $$(document).ready(function(){ $$('#button1').touch(function(){ ale
[JS]要素の一つひとつを異なるタイミングでスライドさせる、パララックス対応のコンテンツスライダー
jQueryとCSS3アニメーションを使った、パララックス対応のコンテンツスライダーを実装するチュートリアルを紹介します。 Parallax Content Slider with CSS3 and jQuery [ad#ad-2] デモ 実装 デモ 一枚のスライドには、h2要素、パラグラフ、リンク、画像が配置されており、それぞれが異なるタイミングでスライドします。 分かりにくいかもしれませんが、背景もアニメーションで動いています。 Kendo UI こちらも当然パララックス対応のコンテンツスライダーです。 こっちの方が背景がはっきりしてるので、その動作を楽しめると思います。 実装 実装は各ポイントとなる箇所を説明します。 HTML スライダーは複数のスライドを含んでおり、それぞれのスライドにh2要素、パラグラフ、リンク、画像を含んでいます。 <div id="da-slider" cla
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
jQueryでスクロールすると上部に固定されるナビゲーション
jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
