You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
デザインとデータ操作を分離汁。という世間の声がうるさいので デザイン部分はHTML+JavaScript(jQuery)な環境にしようと思う。 jQueryからGETやPOSTしてスクリプト言語で生成されたJSONを食うサンプルは よく見るが逆はあまり見ないので備忘録を兼ねて....φ(・ω・` )カキカキ json形式のデータをjQuery.ajaxを使ってPOST send_json.js var func_send_json = function(){ var json_data { id:'epy0n0ff', pw:'hogehoge' }; $.ajax( { url:'receive_json.php', type:'POST', data:json_data, error:function(){}, complete:function(data){alert(data.re
画像にマウスオーバーするとキャプションをオーバーレイ表示するjQueryプラグイン。 オプションのパラメータで、キャプションを表示するときのアニメーション効果(フェード、スライドなど)やアニメーション速度、透明度などを指定することができます。 下記の2つのサンプルが掲載されています。 img要素のalt属性をキャプション表示 <img src='画像URL' class='captify' alt='キャプション' /> imt要素のrel属性とdiv要素のid属性を関連付けて、div要素の内容をキャプション表示 <img src='画像URL' class='captify' rel='caption1' /> <div id='caption1'>キャプション</div> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
最近のJavaScript熱は凄いものがあります。 去年まで僕がいたお仕事の世界では、「JavaScript=Webアプリケーションで背景をちょっと変えたりする言語モドキ」として非常に扱いが低かったと記憶しております。それでもjQueryのプラグインなどで実現出来るカックイイUIなんかをユーザの人にリクエストされたりという事はありましたし、その為にjQueryの中身を覗いて「きんもー☆」って思ったりせっかく調べてドヤ顔でサンプルとか作ってみたのに「OSSってヤバイじゃん?」とヤバイご指摘で秒殺されたりしたのも、今となっては良い思い出です。 さらに、最近はやりのSmartPhoneでは結局Flashがどうなっちゃうんだかって状況が続いておりまして、折しもHTML5なんて目新しい話題も盛り上がってきている事からしても、これはもうiPhoneでもAndroidでもWebブラウザでも使えるJava
Google Chart API を jQuery で簡単に使えるラッパーライブラリ「jQuery Google Charts」 2009年07月08日- jQuery Google Charts 1.0 - Demo Site Google Chart API を jQuery で簡単に使えるラッパーライブラリ「jQuery Google Charts」。 たとえば、次のようなコードを書きます。 var api = new jGCharts.Api(); var opt = { data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]//mandatory }; jQuery('<img>').attr('src', api.make(opt)).appendTo("#bar1"); すると、次のグラフが簡単にページに挿入されます。 もちろ
Freetile.jsはカラム幅も可変なPinterest風デザインを実現するライブラリです。 2012年前半の話題を一気にかっさらっていったPinterestはその奇抜なデザインもあり、色々な類似デザインを実現するライブラリを登場させるに至っています。Freetile.jsもその一つですが、高さだけでなく幅も自由に設定できるのが特徴になります。 サンプルです。かなり複雑なデザインでもこなします。 実例です。斬新なデザインがきちっと決まります。 フィルタリングしました。並び変わる時のアニメーションが格好いいです。 要素がない部分もできてしまうのは致し方ありません。 Freetile.jsを使うとかなり自由度の高いデザインが実現できます。とは言え表示はFreetile.jsに任せきりなので、思った通りのデザインになるとは限りません。なおフィルタリング機能があり、絞り込む時にはアニメーションが
はじめに jQuery mobile 使ってますか? 同一ソースでPC用ブラウザからiPhone、Androidまで対応できる便利なフレームワークですが、開発中は基本的にGoogle Chromeを用いて動作確認や画面の確認を行なっています。 スマートフォンの通信・CPUが早くなったとはいえPCには敵いませんし、キーボードから手を離すのも億劫ですから、こうしてGoogle Chromeで確認している人は多いのではないでしょうか。 # 個人的には普段はFirefoxを使っていますが、iPhone/Android向けWebサービスを作る場合には、同じWebkit系ブラウザ(Safari, Chrome, etc.)で動作確認した方が良いように感じます。 画面サイズの問題 さて、Google Chromeで確認する方法は大抵の場合うまくいくのですが、時々「これ、iPhoneの画面サイズで見たら
JavaScript 再入門から1週間弱。 JQuery で遊べるところまできた。あるフォームの内容を非同期通信するページを Django と JQuery を用いて作成する手順について自分なりに整理してみる。 Ajax 。 フォーム Django でフォームを扱う方法の一つである django.forms のマニュアルは http://djangoproject.jp/doc/ja/1.0/topics/forms/index.html にある。 Ajax が絡んでもやるべきことは特に変わらない。 なお、フォームクラスに、自身の表示に必要な javascript ファイルを覚えさせておくことができる。この機能を使う場合、『Form Media』を参考に Media クラスを定義する。すると、フォームインスタンスの media プロパティで head タグ内に挿入すべき script タグ
ddSlickはドロップダウンメニューにアイコン、説明文を追加できるjQueryライブラリです。 常々HTMLのコンポーネントは貧弱だと思っていた。特にドロップダウンの使い勝手の悪さったらない。テキストしか表示できず、情報選択のUIとしてあまりに粗雑ではなかろうか。そしてみんなが望んでいたライブラリが登場した。それがddSlickだ! 見よ、この格好いいドロップダウン!テキストに加えて画像が表示できるようになっています! ダイナミックに変更も可能です。まず普通のドロップダウン。実にいけてない。 じゃじゃーん! もちろん普通のドロップダウンライクに値が取得できます。選択した項目のデータも取れます。 外部から値を与えて表示項目を変更することもできます。 コールバック対応! デフォルトの選択もできます。 画像を右に寄せられます。 さらに説明をつけて行ごとに高さを可変にもできます。 画像がない場合
こんにちは、やっと地上デジタル放送がうちのテレビに映るようになりました。tanakaです。液晶テレビはもう1年前に買っていたので、ついにフルパワーを発揮しているんですが、新品みたいです。 今日はjQuery の each の使い方についてとりあげます。 jQuery はループ処理を意識しなくても使える jQuery がよく使われるJavaScriptライブラリである理由のひとつに、CSSライクに、宣言的な記述ができる、ということをあげることができます。複数の要素に同じスタイルを適用したいとき、CSSではループ処理を書く必要がありませんが、jQuery も基礎的な使い方ではループを意識しなくても書くことができます。 $('p').css('background-color', 'yellow'); // すべての p 要素の背景色を黄色にする $('p').prepend('Oh! ');
jQuery File Upload Demo File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads. Pintura
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ?'); }, function(){ $(this).text('ヌー'); } );
Windows OS に PHPとApacheサーバーのインストール ~ php.iniの設定まで、 パソコンでPHPを使えるようになるまでの手順を図解。 .htaccessの指定方法、使用頻度の高いPHP関数をサンプル付きで解説。 Tipsでは実用的な自作関数を紹介。 JavaScriptの基本~実用的な関数までサンプル付きで解説。 ロールオーバー、ウィンドウ操作、連動プルダウン、入力チェック(正規表現含む)など、 サイト制作に使える実用的なスクリプトを紹介。コピペで使えます。 JavaScriptでDOM(Document Object Model)のメソッド・プロパティを使ってページ上のノードにアクセスするサンプルも追加しました。 Ajax ブログやサイトで使える実用的なAjaxをサンプル付きで解説。 HTML5 次世代HTML標準となるHTML5を使ってみよう!HTML5のタグリフ
<div class="container-fluid"> <div class="row-fluid"> <div class="span4"> Span4の中身 </div> <div class="span8"> Span8の中身 </div> </div> </div> Preタグで囲むコード エンジニアの皆さんなら、ブログにコードを書きたいですよね。 Twitter Bootstrapでも、かっこ良くコードを見せる手法を提供しています。 ・codeタグで囲む 赤くなります。 ・preタグで囲む 囲み枠がつき、灰色になります。 ・Preタグ+Google Prettifyを使う preタグのclassに、prettyprint linenums を入れましょう。 これが超かっこいい!!コードを見せるならこれがよさそうですね! さて、かっこいいGoogle Prettifyですが、こ
最近、TwitterやFacebookのタイムラインでPinterestの名前を目にすることが多くなり、とりあえずアカウント作って試してみました。 ・Takahito Yagami (takahitoyagami) on Pinterest 「オンライン上にピンボードを作る」事ができるWEBサービスで、Instagramの様に写真をアップロードでき、Tumblrのように他サイトから画像を引用でき、SNS的な機能も携えてRepinやLike・コメントでのコミュニケーションを図れます。Boardと呼ばれるカテゴリーを複数作成でき、画像のタイプごとにPinする先を選択しながらアップロードします。なにより美しいUIが素晴らしく、見ていて楽しいのでハマる人が続出しているそうで(海外ではすでに一定の地位を得ているようですね)。 個人的にはどハマりするほどの衝撃では無かったのですが、大好きなジャンルであ
tQuery API : three.js + jQuery Three.js Power + jQuery API Usability tQuery API is a thin library on top of three.js It is an extension system for people to write plugins. To help them share their code and build on top of each other. It mimics jquery api, well know for its usuability. tQuery API aims for "it should not be harder than playing with lego bricks." Download Boilerplate Try it Online Po
jQuery Mobile Icon PackはjQuery Mobileで使えるアイコン集です。 jQuery Mobileを使ってスマートフォン最適化サイトを構築する際に使ってみたいのがjQuery Mobile Icon Packです。スマートフォンにマッチしたシンプルなアイコン集となっています。 アイコンの一覧です。 実際に使っている例。data-iconで指定するだけで使えます。 多数のアイコンが揃っています。 シンプルで使い勝手が良さそうです。 アイコン画像は全て一つの画像となっており、CSS Spriteで切り出すようになっています。このアイコン群を使う限り読み込みは一度なので高速に表示が可能です。 jQuery Mobile Icon PackはCSS製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。 MOONGIFTはこう見る 3Gを
Twitter, Facebook, Google+, RSSなど、ソーシャルメディアの不揃いなデザインのボタンを統一した美しいデザインにしてブログやサイトに設置するjQueryのプラグインを紹介します。 Koottam Social jQuery Plugin [ad#ad-2] Koottamの主な特徴 Koottamのデモ Koottamの使い方 Koottamの主な特徴 Twitter, Facebook, Google+などのアカウントを設定するだけで設置できます。 7種類のテーマがあり、CSSベースでカスタマイズも可。 カウントの表示はスタティック・アニメーションに対応。 カラーは簡単に変更できます。 より大きいカウント用に省略表記も対応。 MITライセンスのため、あらゆるブログ・サイトに使用しても無料! Koottamのデモ
With the rapid advancement of web technologies, web developers now have access to a plethora of features once confined to native applications. One such feature is accessing the device's camera directly from the web browser using JavaScript. This capability opens up a world of possibilities for creating interactive and immersive web experiences. Whether you're building a video conferencing app, a p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く