カレンダーコントロールを使う - jQuery Mobile メモ - オレスタ
スマートフォンで日付を入力するなら、年月日ごとにセレクトボックスを作るより、カレンダーでかっこよく選択できるようにしたいものです。 jQuery Mobileにカレンダーコントロール プラグインの DateBoxがあるので試してみました。 その再、jQueryを読み込んだ後、スクリプトをはさみ、その後jQuery Mobileなどを読み込むようにします。正確な理由はわかりませんが、chromeでこの指定をしないと上下のスクロールバーがでました。 <script src="scripts/jquery-1.6.2.js"></script> <script type="text/javascript"> $( document ).bind( "mobileinit", function(){ $.mobile.page.prototype.options.degradeInputs.dat
Nerdieworks
If you’re not paying for it, you’re not the customer; you’re the product. — Andrew Lewis It’s no secret that companies are collecting vast amounts of user data. They say data has become more valuable than gold. My problem with the current business model of many great “free” services, is that you can’t opt out by paying a subscription fee. Thus I decided to start self-hosting and learn some DevOps
シンプルなツールチップ実装ができるjQueryプラグイン「mTip」:phpspot開発日誌
mTip - jQuery tooltip plugin シンプルなツールチップ実装ができるjQueryプラグイン「mTip」 シンプルに文字を出せたり、HTMLをそのまま入れられたり、表示位置やディレイ、カスタムアニメーションなどの設定ができたりとそれなりに柔軟性も備えたツールチップフレームワークです。 デザインも目立ちすぎないデザインでいい感じです。 使うのも超簡単で、mTipでツールチップ対象のエレメントを初期化するだけです。対象エレメントのtitleに内容を入れておけば表示されます。 サンプルとともにサンプルコードが紹介されているのですぐ使い始められます 関連エントリ もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 ページメニューにツールチップを表示して分かりやすくするjQueryチュートリアル
ページ遷移前に確認ダイアログを出す onbeforeunload - xykの日記
編集中に別のページに遷移しようとした時に確認ダイアログを出したい。 以下のように onbeforeunload イベントを使えばOK。 window.onbeforeunload = function (e) { var e = e || window.event; // For IE and Firefox prior to version 4 if (e) { e.returnValue = 'Any string'; } // For Safari return 'Any string'; }; jQueryの場合 $(window).bind('beforeunload', function(event) { return 'Any string'; }); ただし、IEの場合は以下のような遷移しないaタグでもonbeforeunloadが発生してしまう。 <a href="jav
ページ遷移不要の、シンプルなWebサイトを作るための軽量jQueryプラグイン・Pagify - かちびと.net
よく見かける、ページ遷移のない Webサイトを作る為のjQueryプラ グイン。ですが、高機能な物では なく、極めてシンプルで、ライブ ラリも軽量です。サクッと作りた い時のテンプレにもいいかも。 僕の語彙の無い説明よりサンプル見た方が早そうですね。 ※漢字も間違ってたので修正しました ページ遷移不要で、内容を書き換えた際もフラグメントURLにしてくれます。以下サンプル。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7'></script> <script src="pagify.js" type="text/javascript"></script> jQuery本体とプラグインを読み込みます。 $(
jQuery を使ってHTMLタグをエスケープする
Javascript ネタです。 ユーザーがテキストボックスに入力した文字を、そのままその画面上に表示するような処理を、Javascriptで作成する際に、エスケープする処理が必要な場合があります。 AJAX でサーバー側から取得した値を表示する場合もそうですね。 今回は、そんなときのエスケープする処理を jQuery を使ってプラグイン形式で紹介したいと思います。 そもそもなぜエスケープする必要があるのか？ 知ってる人は知ってると思いますが、そもそもなぜエスケープする必要があるのか？というところから説明します。 PHPやPerlなどのプログラムを勉強された方はよく知ってると思いますが、ユーザーがテキストボックスに入力した文字をそのまま表示する場合、もしその中にHTMLタグが入っていたとします。 そうすると、（あたりまえですが）ブラウザはその文字をちゃんとしたHTMLタグだと認識してしまう
PHPでのスクレイピングやDOM操作をjQueryっぽく超簡単便利にできる「phpQuery」:phpspot開発日誌
phpmaster | Server-Side HTML Handling Using phpQuery PHPでのスクレイピングやDOM操作をjQueryっぽく超簡単便利にできる「phpQuery」。 紹介記事を読んで使ってみました。 phpQuery はjQueryのPHP版でDOMの操作をjQueryっぽくできるライブラリです。 HTMLのスクレイピングはもちろん、HTMLを追加したり要素に属性を追加等のDOMを操作も簡単に行えます。 jQueryの便利さがPHP上でも十分に使えますので知っておくと確実に面倒な処理を楽に書けるようになるでしょう。 スクレイピング HTMLのスクレイピングをする場合には超簡単かつ、jQueryを使ったことがある方なら抵抗なくすぐに習得できます。 ちょっとコードを書いて実験してみました。 と書くと <div id="two"></div>の中身である t
AngularJS ― Superheroic JavaScript MVC Framework
AngularJS support has officially ended as of January 2022. See what ending support means and read the end of life announcement. Visit angular.io for the actively supported Angular. Why AngularJS? HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resu
シンプルで見やすいガントチャートを描けるjQueryプラグイン・jQuery.Gantt
シンプルで見やすいガントチャート を描画できるjQueryのプラグイン。 以前見かけてから放置していたので 少し触って見ました。使う機会は 個人的には多くありませんけど、 覚えて置いて損はしないかと。 この手のはよく見かけますけど、今日のプラグインは個人的に使いやすい印象だったのでメモ。 こういうやつ。 サンプル作ったので宜しければご覧下さい。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script src="jquery.fn.gantt.js"></script>本体とプラグイン。 $(".foo").gantt({ scale: "weeks", minScale: "weeks",
CLEditorの編集HTMLソースを外部JSから操作する方法 - 東洋黒客は勇者である
プロジェクト「ドラグノフ」こと「2chまとめったー」開発日記 http://d.hatena.ne.jp/thk/20120415 http://sourceforge.jp/projects/j2chmatometter/ 2chMatometterではWYSIWYGエディタのJavaScriptライブラリ(というかjQuery plugin)としてCLEditor(http://premiumsoftware.net/cleditor/index.html)を使用しています。 今日はそのライブラリを使った時のTipsを備忘録としてメモ。 ■知らない間にできていたiframeのデザインモードJSでWYSIWYGエディタを実現するライブラリはCLEditor以外にもあるのだが、そもそもなんでこんな事ができるかというと かなり昔からiframeにデザインモードというHTMLをWYSIWYGで
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.
マニフェスト Tips
RADWIMPSじゃなくてHTML5のキャッシュ。 やっとmanifestファイルを使ったキャッシュを組み込めました。 Offline resources in Firefox - MDC Doc Center Safari Client-Side Storage and Offline Applications Programming Guide: HTML 5 Offline Application Cache 前回のエントリでjQuery Mobileを使ったぐっと来た.ccの話をしましたが、その時はmanifestが簡単に組み込めなくて断念してたんですが、移動中だとやっぱり遅さが気になるんです。 どうすれば簡単にmanifestを使ったキャッシュを使えるのか、ASP.NET MVCのアプリケーションに組み込めるのか、悩ましいところでしたが、なんとかかんとかキャッシュできました。 ロ
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
HTML5 × CSS3 × jQueryを真面目に勉強してみる – #3 オフラインWebアプリケーション | DevelopersIO
そんな訳で、HTML5のオフラインWebアプリケーションに触れてみることにします。 前置きのようなもの Webアプリケーションというくらいだから、当然ネットワークに接続し、目的のページをダウンロードして表示するわけです。 ということはオフライン状態では、Webアプリケーションは一切使うことができないということになります。そりゃそうだ。 ではオンライン状態の間にWebアプリケーションのリソースを、ローカルのストレージ領域にごっそりキャッシュ(ダウンロード)してしまったらどうでしょう？ 以降はそのリソースを参照すれば、オフラインだろうが問題なっしんぐだし、オンラインであってもHTTP通信するよりパフォーマンスの向上が見込めますよね。 この単純明快な力技こそが、HTML5のオフラインWebアプリケーションの仕組みなのです。 とはいっても、アクセスしたページがHTML5なら片っ端からキャッシュする
Webデザイナーのためのjquery入門2（前編）
82 views jQueryの社内勉強会用スライドです。だいたい1時間で終われるように、前編・後編に分けています。 後編は6月以降で公開を予定しています。 More… jQueryの社内勉強会用スライドです。だいたい1時間で終われるように、前編・後編に分けています。 後編は6月以降で公開を予定しています。 このスライドを作るにあたって、書籍「WebデザイナーのためのjQuery入門」をかなり参考にしています。 Webデザイナーのためのjquery入門2（前編） — Presentation Transcript Webデザイナーのための jQuery入門 -覚醒編（前編） -jQueryのコードを自分で考えて書けるようになろう！ 目標 日々の業務にjQueryを取り入れて、 自分で何かを作れるようになる。 大まかな内容１. 何かを取ってくる ２. それに何かをする３. まとめ 1
HTML5 × CSS3 × jQueryを真面目に勉強してみる – #2 WebStorage | DevelopersIO
そんな訳で、HTML5のWebStorageに触れてみることにします。 ※WebStorageと一言で言っても、セッションストレージとローカルストレージがある訳ですが、今回はローカルストレージに焦点を当てていきます。 前置きのようなもの ネイティブアプリケーションの持つアドバンテージのひとつに、アプリ特有のデータや状態を永続的に保存できるというのがあります。 その方法は、iniファイルやXMLファイルなど、いくつかの種類があります。 対するWebアプリケーションは、Cookieをローカルストレージとして使うのが長らく一般的とされてきました。 しかしこれには以下のような欠点があります。 CookieはすべてのHTTPリクエストに含まれる そのため不要なデータを毎回送信してしまうので、Webアプリケーションのパフォーマンス低下を招く SSL状況下でない限りデータが暗号化されないので、何かと危な
[JS]使い勝手のよい、パネルをスクロールに追従させるスクリプト -Sticky Sidebar
Demo 2 赤枠のナビゲーションは左のカラム内の移動、黒枠のパネルは黒枠内のみ、右のバスケットはページ内全てです。 また、中央のテキスト「Remove」をクリックすると、一時的にそのパネルだけ追従をやめます。 Sticky Sidebarの使い方 オーソドックスなデモを例に実装方法を紹介します。 外部ファイル スクリプトを外部ファイルとして記述します。 <script src="jquery.min.js"></script> <script src="jquery.easing.1.3.js"></script> <script src="stickysidebar.jquery.js"></script> HTML ページは2カラムで、サイドバーにパネルをdiv要素で実装します。 <div id="main">コンテンツ</div> <div id="side"> <div id="
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
IDEA * IDEA
YappoLogs: jQuery Mobile 所感