jQueryでsetTimeoutを使ってfunctionの実行を遅らせる方法｜BLACKFLAG
JavaScriptでfunctionの関数や様々な処理等を“何秒後”に実行、といった指定をする時に使う「setTimeout」。 jQueryでもこの指定を使うことが出来るのですが、必要な時に限って記述方法を忘れてしまっていることが多いので、ここにメモ書きしておきます。（ごく単純な記述なのですが…） $(function(){ setTimeout(function(){ ～ここに処理を記載～ },1000); }); 処理を記載する箇所の後ろにある数値は、“何秒後”に処理させるか、の値になります。 例えば、ページを読み込んだ後、3秒後にbodyをフェードインさせる場合。（フェードインするアニメーション時間は1秒） $(function(){ $("body").css({opacity:'0'}); setTimeout(function(){ $("body").stop().ani
jQuery Plugins and JavaScript UI Framework | Shield UI
Use the latest web development technologies and components to save time and accelerate your projects. Easily intergate and configure more than seventy widgets including enterprise level Chart and Grid, many other components and utilities for data-visualization, exporting and rich user experience. Use Shield UI and take advantage of our: 70+ JavaScript/HTML5 components Server-side wrappers for ASP.
綺麗な動きになった！Web制作前に見ておきたいjQueryプラグインまとめ
作成：2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キューブ系のスライドを表示 ６．下方向へドラッグするとページを再読み込みする ７．要素を上下にフワフワ動かす ８．外部要素をクリックで表示 ９．タイピングエフェクト 動作 １０．サーチボックスを画面全体にオーバーレイさせる １１．デイトピッカー １２．ドラッグ＆ドロップ 画像をアップロードする
jQuery リファレンス：jQuery.param
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次 基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素） 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
jQueryプラグイン - 無限にスクロール - endless-scroll
無限にスクロールができるjQueryプラグイン「endless-scroll」を紹介します。 jQueryプラグイン「endless-scroll」どこまでも……限りなく……降り積もるスクロール！ を実現してくれるプラグインです。 デモを上下にスクロールしてみてください。 「endless-scroll」のデモ デモのソース（HTML + jQuery）<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Endless Scroll Demo - jQueryプラグインまとめのカルマ</title> <style type="text/css" media="screen"> li { padding: 0; list-style: none; } #images { padding: 0; } .endless_sc
jQuery：ページアクセス、リンク時にフェードする方法 | raining
jQueryを使用してサイトアクセス時にページ内容をフェードインさせる方法と、 リンクをクリックした時にフェードアウトしてからページ遷移する方法をメモします。 フェードイン、フェードアウトするのに下記のメソッドを使用しています。 fadeIn([speed], [callback]) 指定した要素をフェードインして表示します。 fadeOut([speed], [callback]) 指定した要素をフェードアウトして非表示にします。 ※[callback]は処理終了時に実行する内容を記述します。 ■ フェードイン、フェードアウトする方法 「wrapper」の内容がフェードインして表示されます。 また、リンクをクリックするとフェードアウトしてページ遷移します。 【JS】 <script type="text/javascript" src="http://ajax.googleapis.co
jQueryでページ遷移時にアニメーション効果をつけてみる。｜BLACKFLAG
Webサイト上でリンクをクリックした際、通常のページ遷移では画面がパッと切り替わるだけ。 何か味気ない感じもするので、画面が切り替わる際にフェードアウト ＆ フェードインしたり、 スライドアウト ＆ スライドインなどのアニメーション効果をつければ、 また違った演出が加えられるのではないかと考え、試してみた実験サンプルのご紹介。 サンプルではトップページは“フェードイン”、 「次へ」といったリンクをクリックしてページ遷移をした際に ページ全体がスライドアウト／インして遷移するパターンになります。 まずはサンプルから サンプルはこちら：パターン１※「次へ」をクリックしていくとページ全体がスライドして遷移します。 このパターンのSCRIPTは以下のような感じで実装。（もちろん別途、要jQueryファイル） ◆SCRIPT $(function(){ $('#container:not(body#
jQueryのプラグインを探す時に便利なサイトのまとめ
星の数ほどあるたくさんのjQueryのプラグインから、目的にあったものを探すのはなかなか大変ですよね。そんな時に役立つ便利なサイトをまとめました。 まずは手前ミソで自分がまとめたものから。 これは本当に多大な労力と実際の動作確認もしているので自信をもってオススメできます。 jQueryのプラグイン100選 -2013年総集編 日々チェックしているスクリプトから厳選して一年単位でjQueryのプラグインをカテゴリごとに選出しています。プラグインの半分近くは個別に記事も書いてあります。 jQueryのプラグイン100選 -2012年総集編 jQueryのプラグイン100選 -2011年総集編 jQueryのプラグイン100選 -2010年総集編 jQueryのプラグイン100選 -2009年総集編 jQueryのプラグイン100選 -2008年総集編
スマートフォン時代のCSS Frameworkあれこれ : 構想雑文
構想雑文 WEBデザインとmacに関すること中心の自分向けメモ主体のブログ。 DREAMWEAVER、Illustrator、Photoshopなどのアプリケーションの設定や使い方。HTML、CSS、JavaScript、PHPのコーディングのことをあれこれ書いています。 ここ最近のサイトへのアクセスログを見ていると、スマートフォンからのアクセスが増加傾向にあるので、ウェブサイトつくるときもスマートフォンに考慮したサイトにせねば、とようやく思い始めています。 スマートフォン向けのレイアウトをつくるのは苦手だし、特に、レスポンシブウェブデザインのレイアウトって面倒としか思えないし、どうするかなぁ、と思うもすぐにCSS Frameworkを使えば解決するかなぁ、と思って調べてみました。 CSS Frameworkの数あり過ぎです。 昔は、グリッドレイアウトをきれいに作成するぐらいのものでしたが
jQuery Coding Standards & Best Practices
All variables that are used to store/cache jQuery objects should have a name prefixed with a $. Always cache your jQuery selector returned objects in variables for reuse. var $myDiv = $("#myDiv"); $myDiv.click(function(){...}); Use camel case for naming variables. Use ID selector whenever possible. It is faster because they are handled using document.getElementById(). When using class selectors, d
jQuery columnManager plugin demo page
Example zero (all-in-one): create the column header list inside the element with the ID "targetone"define on and off classes for the column header list don't include the last two columns in the listsave the visibility state informations for the next visit hide the columns one and three by defaulttoggle the columns through the three buttons use custom show/hide functions when using the buttons
【jQuery】スクロールバーをオシャレにカスタマイズする「jScrollPane」の使い方 ｜ KLUTCHE
どんなにサイトをクールなデザインに仕上げても、どうしても邪魔するスクロールバー。 jQeryをプラグイン使ってCSSで自由にカスタマイズします。 デモ デモページ 必要なファイル一式 jScrollPaneというjQueryプラグインを使用します。 最低限必要なのは ・jQuery本体 ・jquery.jscrollpane.min.js ・jquery.jscrollpane.css の3つです。 HTML まず上の3つのファイルをhead内で読み込みます。 <link rel="stylesheet" href="jquery.jscrollpane.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <s
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
WEBページにExcel風スプレッドシートを設置できるウィジェットライブラリ「dhtmlxSpreadsheet」:phpspot開発日誌
WEBページにExcel風スプレッドシートを設置できるウィジェットライブラリ「dhtmlxSpreadsheet」 2011年12月12日- Web-Based JavaScript Spreadsheet Software - dhtmlxSpreadsheet WEBページにExcel風スプレッドシートを設置できるウィジェットライブラリ「dhtmlxSpreadsheet」。 次のような綺麗なデザインのテーブルを簡単に配置できます。PHPとJavaScriptで書かれていて、データなんかも自分のサーバ上においておけるのが特徴 データベースからのバインディングができたり、PDFやExcel形式でのエクスポートに対応しています。 WordPressプラグインもあるみたいなのでWordPressな方にも使いやすい 色を変えたりSUMしたりと多機能。 関連エントリ これは凄い、Excelの関数
jQueryプラグイン 50
少し古いのもありますが、今年見かけたものを中心にフォーム周りでいつか使う機会がありそうだと思ったjQueryプラグインのまとめです。 バリデーションや各フォームエレメントのデザイン変更といったオーソドックスなものから、上手く使えばユーザビリティの向上に繋がりそうなもの、他ではあまり見ないユニークな動きを実装できるものまで様々なタイプがあります。 中にはCSS3を併用したりそのままでは日本語に対応していないというものも幾つかあるので、使う際にはブラウザやデバイス環境によっていろいろ確認する必要はあるんですが、いずれも便利なプラグインばかりです。 exValidation プラグイン作者が日本の方なので、ひらがなやカタカナといった日本語のチェックもできるバリデーションプラグイン。 Validetta シンプルで軽量なバリデーションプラグイン。 jQuery Valideasy 見た目がシンプル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryを使った100のテクニックとサンプルコードを一括配布している・「jQuery Trickshots」
HTML5 video and audio tags in all major browsers
finefinefine.jp
Fluidbox, a jQuery plugin for beautiful lightboxes
Basic Primitives Diagrams - Organizational and Dependency Tree charts for JavaScript/PDFKit/ReactJS