JavaScript環境で、navigator.userAgentを見てMacOSのバージョンだけを引っこ抜く方法があるか検討してみました。 Windowsなら入ってるんですけどね、Macって結構カオスだったはずなんですが限定すれば意外とイ
javascript | デジタル料理人
JavaScript環境で、navigator.userAgentを見てMacOSのバージョンだけを引っこ抜く方法があるか検討してみました。 Windowsなら入ってるんですけどね、Macって結構カオスだったはずなんですが限定すれば意外とイ
jQueryで作るタブのメニュー画面がリンクから飛んできた時も選択した状態にしたい
今開発してるシステムでちょっとおもしろそうな題材があったので紹介しておきます。 ソース全部載せると分かりづらいので一部だけで概念的に説明しますが、これはまあ、普通にレフトメニューがあって、そしてメインの部分にはタブでメニューを選択できるようなレイアウトの画面だと思って下さい。 レフトメニューはこんな感じ <div class="left"> <p>メニュー</p> <ul> <li><a href="sample.html#menu1">menu1</a></li> <li><a href="sample.html#menu2">menu2</a></li> <li><a href="sample.html#menu3">menu3</a></li> <li><a href="sample.html#menu4">menu4</a></li> <li><a href="sample.htm
jQuery UI Tabsでタブのリンクを静的リンクにする方法
► 2018 (1) ► 1月 (1) ► 2017 (4) ► 6月 (3) ► 5月 (1) ► 2016 (15) ► 12月 (4) ► 11月 (1) ► 10月 (2) ► 7月 (3) ► 6月 (1) ► 5月 (3) ► 1月 (1) ► 2015 (13) ► 12月 (1) ► 10月 (1) ► 9月 (1) ► 6月 (1) ► 5月 (1) ► 3月 (2) ► 2月 (3) ► 1月 (3) ► 2014 (11) ► 12月 (1) ► 9月 (2) ► 8月 (2) ► 6月 (1) ► 4月 (4) ► 2月 (1) ► 2013 (15) ► 12月 (3) ► 11月 (3) ► 8月 (2) ► 7月 (4) ► 5月 (1) ► 4月 (2) ► 2012 (7) ► 10月 (1) ► 7月 (1) ► 4月 (3) ► 1月 (2) ▼ 20
jQuery UI Autocompleteのサンプル - 積み重ねた日々
jQuery UIを使って、Autocompleteのサンプルを作ってみた。 jQuery UIは、以下よりダウンロードします。 Download Builder | jQuery UI まずはサーバとの通信を必要としない単純な形(HTMLファイル内にデータがある場合)だとこんな感じ。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery UI Autocomplete sample 1</title> <link rel="stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui-1.8.5.custom.css" /> <script type="text/javascript"
はてなブログ | 無料ブログを作成しよう
この半年のつれづれ みなさま、お元気ですか？ブログを書くのが半年ぶり。書きたいと時々思うものの、時が流れるのが早くてあっという間にまた一年の半分が過ぎていきました。この半年何していたかなと自分で手帳を振り返ると、マンスリー手帳の欄に「楽しかったこと」と書いて箇条書きに…
jQuery droppable の複数要素が重なった場合の問題 - COBALT
他のブログからエントリーをこちらに移行させて集約します。 今製作中のもので派手にハマッたので、今後バージョン上がった時に対応が必要になるかもしれないのでメモをしておく。 対象箇所は jQuery UI の droppable 系（jquery-1.4.2 + jquery-ui-1.8）。 はじまり jQuery UI で、指定要素に doroppable を指定してドロップ領域を作成する。ここまでは問題なし。問題なしどころか実装が簡単すぎて涙がでそう。一般的なアプリならここで終わるので特に問題はない。問題となるのは異なるドロップ領域がレイヤーとして重なっている場合。 こちらの想定としては、オレンジ色の部分にドロップしたらオレンジへのドロップ、青い部分にドロップしたら青い部分へのドロップとしたいし、それが普通だと思うんだけど、jQuery.ui.droppable は内部的に複数レイヤーが
jQuery UI でダイアログ表示 - Pyro Memo
別の記事でも書いたけど、個人で開発しているWebアプリでは、だいたいjQuery UIを使用してる。 今回はその中でもよく利用しているdialogの使い方をまとめておく。dialog機能を使うと、割と簡単にエラーダイアログやフォーム表示用のサブウィンドウを作成することができる。http://jqueryui.com/demos/dialog/ 僕の使い方としては、あらかじめ使用するダイアログやサブウィンドウをHTML内に非表示で埋め込んでおき、必要な時にダイアログとして表示する、という方法をとっている。1つのファイルにまとまってると、本体のHTML、ダイアログ、サブウィンドウを区別なく編集できるので結構楽だと思う。 OKダイアログ（通知やエラー表示用）、確認ダイアログ、フォームダイアログをそれぞれ表示できるサンプルを書いておく。よく使うOKダイアログや確認ダイアログは関数化しておくと便利。
jQuery UI 1.8.4のdatepickerでmultiple months時のバグ
jQuery UIをそろそろバージョンアップしてみるかと思い立ち。ファイルを上書きしてみると、datepickerで月表示を複数している場合に、選択している日時のハイライトが全ての月に反映してしまうバグに遭遇。 調べてみると、既に本家のdeveloper siteにはチケットが上がっているみたい。 Ticket #5984 Datepicker showing multiple months highlights selected day in all of them 修正する方法も書いてあるけど、私が使っているのは圧縮されたmin状態のjsファイルなので、どう直せばよいのだろうと試行錯誤。 結局 q.getTime()==J.getTime()?" ui-state-active":"" を q.getTime()==u.getTime()?" ui-state-active":"" に
jQuery UIの Datepickerで日本語のカレンダーを表示する方法
（2010/07/05追記：年月選択のオプションと、その見た目の調整のCSSを追加した。） （2013/05/01変更：CSSがmin対応したので変更した。） 必要なJavaScriptとCSSは、全てGoogleがホスティングしてくれてた。 （2010/10/12追記：日本の祝日を表示するGCalendar HolidaysだけはGoogleはホスティングしていない。） サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <title>Datepicker</title> <!-- jQuery UIのCSSファイルの読み込み --> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.min.cs
jQuery droppable の複数要素が重なった場合の問題 - binary-lifeの日記
第５回ジオメディアサミット 東大駒場キャンパスで開催された「第５回ジオメディアサミット」行ってきた。特に地域情報とかソーシャルのサービスを担当している訳じゃないんですけど、誘われて面白そうだったので。色々試作サービスも見せてくれて楽しかった。古地図アプリ多分買うな。 本題の jQuery 今製作中のもので派手にハマッたので、今後バージョン上がった時に対応が必要になるかもしれないのでメモをしておく。対象箇所は jQuery UI の droppable 系（jquery-1.4.2 + jquery-ui-1.8）。 はじまり jQuery UI で、指定要素に doroppable を指定してドロップ領域を作成する。ここまでは問題なし。問題なしどころか実装が簡単すぎて涙がでそう。一般的なアプリならここで終わるので特に問題はない。問題となるのは異なるドロップ領域がレイヤーとして重なっている場
jquery1.3 UI1.7 dialogはIE６だとかなり微妙。。。 - astrsk_horiの日記
jquery1.3でUI1.7のdialogを実装してみた。 最初にはまったのがdoctype指定。 まさか宣言がないとIEでは動かないとは知りませんでした。 おかげでdoctypeについて少し理解。 ただIE６のdialogの挙動がおかしい。 リサイズがものすごいゆっくりドラッグしないとできないのです。。。 →最初はリサイズできないのかと思った。 これは本家サイトをIE６で確認してもらえば再現してます。 早く対応してくれないかなぁ。。。 ■追記 2009/03/26 dialogというかiframeのリサイズに時間がかかっているみたいです。 ■追記 2009/03/28 dialogのbgiframeをfalseにしてオーバレイに隠れるselectの表示・非表示制御を自作実装すると凄く早くなりました。
jQuery UI Tabs で Ajax、Cookie、キャッシュを使ったタブコンテンツを作りたい
正式版となった「jQuery UI 1.8」が公開されました。先日、「Ajaxのタブ切り替えを使って、WPのサイドバーにある発リンク数を調整」という記事を書いているのですが、早速同様のタブコンテンツを jQuery UI Tabs で再現したいと思います。 ファイル一式を用意 デモ : http://jqueryui.com/demos/tabs/ ダウンロード : http://jqueryui.com/download 1. ダウンロードのページに行くと、全ファイルにチェックが入った状態で待ち構えていますが、必要最低限のファイルだけ欲しいので、いったん全チェックを外します。 2. WidgetsにあるTabsだけにチェックを入れます。エフェクトなどの機能が欲しい方は、必要なコンポーネントにチェックを加えてください。 3. Tabs をチェックすると、動作に必要な「Core」と「Widg
【ハウツー】Web開発者必見! jQuery UI ウィジェット3選 (4) 一度使ったら離れられない! タブレイアウトをさくっと導入 - UI/Tabs | エンタープライズ | マイコミジャーナル
一度使ったら離れられない! タブレイアウトをさくっと導入 - UI/Tabs UI/Tabsはタブレイアウトを作成するウィジェット。一画面に表示する項目数が多い場合、適切なグルーピングとUI/Tabsを使用することでユーザビリティを向上させることが可能となる。タブ内のコンテンツはHTML内に直接記述する方法のほかに、外部ファイルを呼び出すAjax modeがサポートされている。 HTMLファイル - tabs.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=U
【ハウツー】Web開発者必見! jQuery UI ウィジェット3選 (3) 思いのままのダイアログを - UI/Dialog | エンタープライズ | マイコミジャーナル
思いのままのダイアログを - UI/Dialog UI/Dialogはダイアログを簡単に作成することができるウィジェット。お知らせといった簡単な文章を表示するダイアログから、リサイズをサポート・ボタンラベルを自由に定義することができるダイアログも作成することが可能だ。こちらも他のウィジェットと同様、$('#dialog').dialog()というように、dialog()メソッドを呼び出して使用する。 HTMLファイル - dialog.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/ht
【ハウツー】Web開発者必見! jQuery UI ウィジェット3選 (2) 日付の入力をカレンダーから直感的に - UI/Datepicker | エンタープライズ | マイコミジャーナル
日付の入力をカレンダーから直感的に - UI/Datepicker UI/Datepickerは日付の入力を簡易化するカレンダーを提供するウィジェット。カレンダーを生成し、日付を選択するとフォームに日付が書き込まれるユーザインタフェースだ。$('#date').datepicker()というように、datepicker()メソッドを呼び出して使用する。 HTMLファイル - datepicker.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
【ハウツー】jQueryを使ってるならコレ! ウィジェットライブラリの決定版 - jQuery UI (2) UI/Sliderの使い方 - まずは使ってみる | エンタープライズ | マイコミジャーナル
jQuery1.2.6とBuild your Downloadを使用し作成したjQuery UI 1.5.1を用意し、実際に使ってみた。ここでのWebブラウザ実行環境は次のとおり。 Microsoft Windows XP SP2 / Microsoft Internet Explorer 7 FreeBSD 8-current / Mozilla Firefox 3 まずはスライダーのみを作成。$('#slider').slider()というように、slider()メソッドを呼び出すだけだ。 HTMLファイル - slider.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-e
jQuery UI Dialog w/ Resizable iFrame
Today I went looking for a jQuery Modal Plugin that would allow me to display resizeable iframe content. Although there are many jQuery Modal Plugins out there, there are not many that support iframe content. Out of those that openly support the iframe, I personally didn’t think they look all that good and I didn’t see any that supported the resize feature. So, then I decided to take a deeper dive
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてなブログ | 無料ブログを作成しよう
jQuery のプラグイン ui の dialog でIE8のバグ - かなぶん読書記録
http://aext.net/2009/12/learning-jquery-optimize-using-modal-window-or-dialog-box-in-jquery-ui/