You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity
デモページ: ナビゲーション Flickityの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 ※jQueryのプラグインとして利用する時は、jquery.jsを加えます。 <head> ... <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/flickity.pkgd.min.js"></script> </head> Step 2: HTML 各スライドをdiv要素などで実装し、ラッパーで内包します。 <div id="main-gallery"> <div class="gallery-cell">...</div> <div class="gallery-cell">...</div> <div cl
![[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf5475b2160c621bb7e866a6e614ec3326ad2769/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015012901.png)
javascript | デジタル料理人
JavaScript環境で、navigator.userAgentを見てMacOSのバージョンだけを引っこ抜く方法があるか検討してみました。 Windowsなら入ってるんですけどね、Macって結構カオスだったはずなんですが限定すれば意外とイ
Textillate.js
About Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Usage Simply include textillate.js and it's dependencies in your project to start creating unqiue effects. Credits Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.
BigVideo.js
デモページ デモは左のメニューから、動画を変更して再生できます。 BigVideo.jsの使い方 外部ファイル BigVideo.jsはjQuery, jQuery UIと、動画再生に「video.js」を利用しています。これら全てを外部ファイルとして記述します。 <!-- BigVideo Dependencies --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/jquery-ui-1.8.22.custom.min.js"></script> <script src="js/jquery.imagesloaded.min.js"></script> <script src="http://vjs.zencdn.net/c/vide
JSでのタイマー処理がもっと簡単になるjQueryプラグイン「timing」:phpspot開発日誌
timing: a jQuery plugin JSでのタイマー処理がもっと簡単になるjQueryプラグイン「timing」 setTimeoutやsetIntervalはタイマー関連の関数ですが、沢山使うとどこで何やってるかわかりにくくなって管理がめんどくさいですね。 timingプラグインを使えば、次のように書けば 0.3秒ごとにクラスをつけたり消したりということが可能。これにより文字を点滅させたりする処理が簡単にかけます $('.example1').repeat(300).toggleClass('blink'); repeat は setIntervalにあたり、何度も実行させるメソッドでありますが、setTimeoutの対応としてwaitメソッドがあります。 次のように書けば、0.5秒後にクラスを追加し、その0.2秒後にクラスを削除というような処理が可能です。これをsetTim
[JS]大量の画像コンテンツに便利！ サムネイルを自動生成するスクリプト -NailThumb
大きいサイズの画像から、クロップやリサイズなどして小さいサイズのサムネイルを自動生成するjQueryのプラグインを紹介します。 サムネイルはテキスト配置やさまざまなエフェクトにも対応しています。 jQuery NailThumb [ad#ad-2] NailThumbのデモ NailThumbの使い方 NailThumbのデモ NailThumbは元画像のアスペクト比を維持したまま、クロップやリサイズをしてサムネイルをスクリプトで生成します。 サムネイルはさまざまなフォーマットが用意されています。 キャプション テキストをオーバーレイで表示することもできます。 NailThumbの使い方 NailThumbの基本的な使い方は、サムネイル用のコンテナとサムネイルのサイズ設定です。 外部ファイル スクリプトとスタイルシートを外部ファイルとして記述します。 <script type="text/
javascript - めんどうな作業がわずか1クリックに!新人プログラマーが知らないと一生後悔するブラウザーを使ったHTML生成 : 404 Blog Not Found
2011年12月14日15:34 カテゴリTipsLightweight Languages javascript - めんどうな作業がわずか1クリックに!新人プログラマーが知らないと一生後悔するブラウザーを使ったHTML生成 いいえ、使いません。 めんどうな作業がわずか数秒に！新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成 | Webロケッツマガジン 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ 僕たちプログラマーは、ちょっとしたHTML生成にDHTMLを使います。 DEMO TSV JSON JSON to HTML function (json){ var tbody = $('<tbody>'); $.map(json, function(row){ var tr = $('<tr>'); $.map(row, function(c
リッチすぎるデータグリッド等を実装できるJavaScriptライブラリ１５:phpspot開発日誌
15 JavaScript Data Grids to Enhance your HTML Tables | Hot Scripts Blog リッチすぎるデータグリッド等を実装できるJavaScriptライブラリ１５。 WEBページに実装するグリッドを選ぶ際にかなり参考にできそうです。 スタンドアロンで動くものや、JavaScriptやMootoolsプラグインのものがまとまっています dhtmlxGrid SigmaGrid jTPS – Datatable jQuery Plugin DataTables – Data Table jQuery plugin Flexigrid for jQuery MyTableGrid OmniGrid 全部見る 関連エントリ シンプルなグリッドをレイアウトにオーバーレイ表示できるjQueryプラグイン「Griddy」 グリッドアコーディオンで新
どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」:phpspot開発日誌
infinite, circular jQuery carousel --- CarouFredSel 2.1.3 どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」。 指定した要素以下に<div>や<img>を単に並べるだけでカルーセル化してくれるプラグインです。 少ないスペースで多くのコンテンツを格納するのに便利です。 横だけでなく、縦スクロールもオプションで指定することが出来ます。 ページ下部にexamplesが多数紹介されているので他にも色々な機能があることを確認できます。 関連エントリ 関連アイテムを出す場合等に使えそうなjQueryカルーセル「bxCarousel」 JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル
サムネイルをドラッグして画像の表示領域をスクロールするスクリプト -Image Scroller
サムネイル画像をドラッグして、大きい画像の表示領域をその動作に合わせてスクロールさせるスクリプトを紹介します。 jQuery Image Scroller Plugin デモページ このスクリプトは作者がPUMAのサイトを構築する際に使用したスクリプトをjQueryのプラグインとして作り直したとのことです。 PUMAで使用されているのは、下記のページです。 <textarea name="code" class="html" cols="60" rows="5"> <div class="image-scroller"> <img src="images/feature.jpg" alt="" class="feature-image" height="1280" width="960" /> <div class="preview"> <img src="images/preview.j
[JS]フォームの入力欄にテキストを表示するスクリプト -Textbox Hinter
設置も簡単、カスタマイズも容易、フォームのテキストボックスとテキストエリアにテキストを表示するスクリプトを紹介します。 表示するテキストにはclassを付与できます（Demo 3参照）。 jQuery Textbox Hinter Plugin デモページ 主な特長 シンプルで軽量 スクリプトの知識は不要 表示するテキストにclassを付与できる textareaにもテキスト表示が可 クロスブラウザ対応 カスタマイズが簡単 デモと実装方法 実装は簡単で、フォームの各パーツに任意のclassを与え、テキストはJavaScriptに記述します。
Inset Border Effect jQuery Plugin | CSS-Tricks
This is a guest post by Robin Thrift who wrote to me with some demo code for creating this effect. Together we turned it into a jQuery plugin. Enjoy! I was browsing through a few Flash templates on ActiveDen when I came across an effect I see very often on Flash website galleries. It’s a very simple but neat effect. The images have a border, but unlike CSS borders, it covers up part of the image.
画像やHTML、動画等何でもスライドできちゃウィジェット実装jQueryプラグイン「Sudo Slider」:phpspot開発日誌
画像やHTML、動画等何でもスライドできちゃウィジェット実装jQueryプラグイン「Sudo Slider」 2010年07月26日- Sudo Slider jQuery Plugin Demo#1 画像やHTML、動画等何でもスライドできちゃウィジェット実装jQueryプラグイン「Sudo Slider」。 簡単な定義でなんでもスライダーとして動作させちゃうことが出来ます。 <div>の中に<ul>リストで<li>内にコンテンツを並べるだけであとは順次スライドしてくれるようです。 あとはAjaxによるコンテンツ読み込みにも対応してるみたい 以下にサンプルをご紹介。 シンプルな画像スライダー ページ送りを追加した例 ページ送りは番号だけじゃなくて特定文字列の定義も可能 タブっぽいUIにすることも可能。コンテンツの高さは自動でアニメーションしながら調節されるようにしたりもできる 他にも色々
20+ Demos Showing Advanced jQuery Effects
Just a short while ago, Flash was one of the primary technologies used by web designers to add interactivity to a website. Since the introduction of the iPad, with its lack of the Flash Player, there's an acceleration in the web development world to use alternative technologies to Flash, such as jQuery, Ajax and others. Although Flash is still a very powerful and useful tool, which works great on
[JS]jQueryのプラグイン33+1選 -2010年5・6月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 simpleSli.de フレキシブルでシンプルで軽量なコンテンツスライダーの決定版。 Lightbox_me DOM要素を指定して
[JS]使い方も簡単、画像をフェードで切り替える超軽量スクリプト -hoverFade
既存のページに導入するのも簡単な画像をフェードで切り替えるスクリプトをDan Wellmanから紹介します。 フッタのアイコン 実装方法 フェードで切り替える画像のエレメントに対して、hover時に画像が切り替わるように設定します。その際に使用するクラス名は「hover-css」が初期設定です（変更可能）。 これはもしJavaScriptがオフの環境でも、ホバーがCSSで行われるようにするためです。 次にスクリプト用のクラスを用意します。初期設定は「hover-anims」で、「hover-css」と同様に画像が切り替わるように設定します。 これはスクリプトで利用するクラスで、その際にCSSのクラスは削除されます。 jquery.jsとhoverfade.jsを外部ファイルとして配置します。記述位置の理想はHTMLの終わりです。 HTMLにさきほどのCSS用のクラスを記述します。 また、初
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]ダイナミックにウェブサイトをナビゲートするスクリプト -jQuery Panel Magic
mitya.co.uk
IDEA * IDEA
