DataTables | Javascript table libraryAdd advanced interaction controls to your HTML tables the free & easy way
jQueryで実装するページローディングのプログレスバー | 群馬 ホームページ制作：MK-Design/MKデザイン「群馬県伊勢崎市」
今回は、ページの読み込み時、jQueryを使い進捗状況をプログレスバーで表示する方法を、実際にサンプルコードを用いて、詳しく記載していこうと思います。 ページを読み込む際、jQueryでページローディングを実装しているサイトをよく見かけますが、プログレスバーを実装しているサイトは少ないように感じます。そこで、今回記載する「プログレスバーでの表示機能」を用意しておくと、ページローディングと同様に、すべての画像の準備が整うのを待ってから、ページを表示することができます。画像をたくさん含むページやファイルサイズの大きいページに、ページローディングのUIとして実装することをおすすめします。 という事で、それでは今回はッ、 ・プログレスバー表示機能の概要 ・プログレスバー表示に必要な処理 ・プログレスバー表示のHTMLとCSS ・プログレス、ローディング表示のjQuery 上記について記載していこう
Google Chrome の JavaScript コンソールが便利
jQuery の使用 次のコードを実行することにより、jQuery を読み込んでいないページでも jQuery を使用することができる。 if (!window.jQuery) { document.body.appendChild((function(){ var s = document.createElement("script"); s.type = "text/javascript"; s.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"; return s; })()); } (参考: ChromeのJSコンソールでjQueryを使うTips – y-kawazの日記) 試しに任意のページで jQuery をロードして、次のコマンドを打ってみると、あら不思議……。 $('img').a
About - CLEditor
CLEditor is an open source jQuery plug-in which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor that can be easily added into any web site. Live Demo Go ahead, take it for a test drive. Highlight some text and click some buttons. The following demos are a great source for code samples and examples of how to use plug-ins.
『Googleサジェストが実装できるjQuery Autocomplete Mod』
jQuery Autocomplete Mod はjQueryベースのプラグインで、テキストボックスに入力した情報を元に、Googleサジェストのような機能を簡単に実現することができます。 Ajaxを使って外部プログラムと通信しながら情報を取得し、候補をユーザーに表示することができるほか、予めJavaScript内に定義していた情報から入力された情報を補完するというような使い方もできます。 設置方法は、jQuery Autocomplete Mod のサイトから、下記3つのファイルをダウンロードします。 ・ jquery.autocomplete.js 本体となるJavaScript ・ jquery.autocomplete.css 検索結果のフォームを表示するためのCSS ・ indicator.gif サイト上ではリンクが掲載されていないのですが、検索候補のローディング時に表示する画
[JS]かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic
HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量（約3K）のスクリプトを紹介します。 デモページ Sonicの実装 Square（矩形）とCircle（円形）を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="sonic.js"></script> JavaScript: Square（矩形） あとは、JavaScriptで記述するだけです。 var square = new Sonic({ width: 100, height: 100, fillColor: '#000', path: [ ['line', 10, 10, 90, 10], ['line', 90, 10, 90, 90], ['line', 90, 90, 10, 90], ['line', 10, 90, 10, 10]
知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ！ 毛根にはこれからもがんばってほしい！いつだって頭を温かいまなざしで見守
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
jQuery Mobileを使ったアーティスト、アルバム別歌詞検索 - jsdo.it - Share JavaScript, HTML5 and CSS
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>アーティストアルバム別歌詞表示</title> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <meta name="format-detection" content="telephone=no"> <!-- 数字が電話番号にリンクされないようにする --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile
さまざまなタイプのスライドショーが簡単に設置できるスクリプト -Agile Carousel | コリス
一つ一つの完成度が高い、アニメーションを伴ったさまざまなタイプのスライドショーが簡単に設置できるjQueryのプラグインを紹介します。 Agile Carousel - Javascript Slideshow - Image Carousel [ad#ad-2] Agileは以前ちらっと紹介しましたが、つい最近バージョンアップしたので改めて紹介します。 以前のバージョンではjQuery UIも併用するタイプでした。 Agile Carouselには、下記のさまざまなタイプのスライドショーが用意されています。
「マンガで分かる JavaScriptプログラミング講座」第2版公開中
JavaScriptと言えば、GmailやGoogleマップなどのページ移動を伴わない動的ウェブコンテンツの登場で一気に息を吹き返して注目を集めたプログラミング言語で、jQueryの登場によってプログラマだけではなくウェブデザイナーにも重要なものとなっています。 そんなJavaScriptを簡単に初心者でも理解できるようにということで、マンガ158ページ、解説文とサンプルソースコード全471KBの「マンガで分かる JavaScriptプログラミング講座」第2版が公開中となっています。この講座の第1版は2010年4月26日から連載を始めて2010年5月10日に完成しており、今回の第2版はその第1版からマンガをすべて描きなおし、説明文章を1.7倍に増補して、図版を充実させたものです。 アクセスは以下から。 マンガで分かる JavaScriptプログラミング講座 http://crocro.co
[JS]25種類の言語に対応したsyntax highlighter -jQuery.Syntax
HTML, CSS, JavaScriptをはじめ、PHP, Ruby, Perl, Apache Configなどにも対応した、コード表示を読みやすくするsyntax highlighterの超軽量スクリプトを紹介します。 jQuery.Syntax デモページ 対応する言語は、下記の25種類です。 リンクは各デモへのものです。 Apache Config AppleScript Assembly Bash Bash Script Basic C# C/C++/Objective-C CSS Diff HTML Haskell Java JavaScript Lisp Lua Object-Oriented C PHP Pascal Perl 5 Python Ruby SQL Smalltalk YAML 対応ブラウザはIE6+, Fx2+, Safari3+, Opera9+とのこと
ajaxで簡単ファイルアップロードが可能なjQueryプラグイン「jQuery.upload」:phpspot開発日誌
jQuery.upload: A simple ajax file upload plugin ajaxで簡単ファイルアップロードが可能なjQueryプラグイン「jQuery.upload」 同じページ内に生成したiframeへデータをPOSTすることで、非同期にファイルをアップロードが可能にするものです。 ファイルを選択すると即時にアップロードが開始するのが特徴 アップロードを完了すると次のように、ファイル名・サイズといったファイル情報が表示されるデモが公開されています。 ファイルアップロードを頻繁に行うようなケースにおいて、便利に使えるインタフェースが組み込めそうですね。 関連エントリ ajaxファイルアップロードに使えるjQueryプラグインいろいろ PHPでファイルアップロードの処理を超簡単にするクラス例「EasyUp」 ファイルアップロードの際に便利なFlash/JavaScri
[JS]既存のLightbox系スクリプトの不満を解決したスクリプト -Lightbox_me
IE6にも対応した、DOMエレメントをLightboxのエフェクトで表示するjQueryのプラグインを紹介します。 Lightbox_me - Stupidly Simple Lightboxing Lightbox_meは他のLigtbox系スクリプトのソリューションにはない特徴をもっています。 DOMエレメントをLightbox化。 ウインドウのリサイズ時はオーバーレイもリサイズ。 ドキュメントがウインドウよりサイズが小さい場合はオーバーレイのサイズを変更。 全てのブラウザで固定配置（fixed）で表示。 ウインドウがモーダルボックスより小さい場合は固定配置（fixed）が自動的に絶対配置（absolute）に切り替え。これによりユーザーはスクロールが可能に。 そして、軽量でシンプル、という素晴らしい特徴も備えています。 対応ブラウザはIE6+, Fx2.5+, Safari, Chr
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://plugins.learningjquery.com/
Sign PDF Documents | DocHub
http://blog.fulltext-search.biz/articles/2008/03/01/jquery-loader-for-greasemonkey