新JavaScript例文辞典
説明 FullCalendarライブラリでスケジュール（イベント）をクリックしたら別ページを表示するにはevents配列で指定するスケジュール要素にurlオプションで表示先のページURLを指定します。 サンプルプログラム 【HTML】 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> <link rel="stylesheet" href="css/fullcalendar.css" type="text/css" media="all"> <link rel="stylesheet" hr
新JavaScript例文辞典
説明 FullCalendarライブラリでカレンダーにスケジュール（イベント）を表示するにはfullCalendar()にevents配列にスケジュール（イベント）を設定します。スケジュール（イベント）はevents配列にJSON形式{〜})で指定します。複数のスケジュール（イベント）を指定する場合は要素単位でid、title（スケジュール名）、start（開始日）、end（終了日）を指定します。startとendではnew Date()で日付オブジェクトを指定します。 サンプルプログラム 【HTML】 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charse
JavaScriptライブラリ「jQuery」でカレンダーを作る「FullCalendar」
JavaScriptライブラリの「jQuery」を使用してカレンダーを作ります。 via：FullCalendar - Full-sized Calendar jQuery Plugin sponsors 使用方法 FullCalendar - Full-sized Calendar jQuery Pluginからファイル一式をダウンロードします。 <link rel="stylesheet" href="fullcalendar.css" media="all"> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="ui.core2.js"></script> <script type="text/javascript" src="ui.dra
FullCalendar の複数カレンダー表示 - エンジニアきまぐれTips
元ネタはこちら、http://oshiete.chance.com/qa6564701.html イベントが空っぽだと寂しいのでGoogleカレンダーの日本の祝日を表示してみた。 前月、次月に移動するボタンも追加した。 <html> <head> <link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' /> <link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.print.css' media='print' /> <script type='text/javascript' src='../jquery/jquery-1.5.2.min.js'></script> <script type='t
新JavaScript例文辞典
説明 FullCalendarライブラリでスケジュール（イベント）をドラッグして移動できるようにするにはdraggableオプションにtrueを指定します。 サンプルプログラム 【HTML】 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> <link rel="stylesheet" href="css/fullcalendar.css" type="text/css" media="all"> <link rel="stylesheet" href="css/main.css" type
Styling Buttons and Toolbars with the jQuery UI CSS Framework | Filament Group, Inc.
Styling Buttons and Toolbars with the jQuery UI CSS Framework By popular demand: coded real-world examples of themeable buttons and toolbars using the jQuery UI CSS framework, a system of classes developed for jQuery UI widgets that can easily be applied to any plugin, and even static content. We got lots of requests in jQuery UI discussion groups for ThemeRoller-ready buttons when we launched our
jQuery UI - Documentation: UI/Theming/API
The jQuery UI CSS Framework jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller. By building your UI components using the jQuery UI CSS Framework, you will be adopting shared markup conventions and allowing for ease of code int
jQuery UI CSS Framework を使ってみる（角丸モジュール編）
コードは↓ <div style="border: 1px solid #000" class="ui-corner-all"> <div style="border-bottom:1px solid #000;padding-left:10px;"> モジュールタイトル </div> <div> <div style="padding-left: 10px;"> ああああああああああああ </div> <div style="padding-left: 10px;"> ああああああああああああ </div> <div style="padding-left: 10px;"> ああああああああああああ </div> </div> </div> ポイントは、 divタグで囲む。クラスにui-corner-allを指定する。 ↑のdivタグに、borderスタイルを指定する(border:1p
jQuery UI CSS Framework を使ってみる（エラーメッセージ編）
コードは、こちら <div style="padding-left:10px" class="ui-state-error ui-corner-all"> <p> <span style="float: left; margin: 0.3em 0.3em 0 0" class="ui-icon ui-icon-alert"></span> <strong>エラー:</strong> 入力値が正しくありません。 </p> </div> ポイントは、 divで囲む。 classにui-state-errorを指定する（枠と背景、文字色を赤くする） classにui-corner-allを指定する(4つ角を丸くする) divの中に中身をpタグで囲み、空のspanタグを入れる CSS Spliteで「！」アイコンを表示させるためのもの classにui-iconとui-icon-alertを指定す
jQueryUIのUI-ICONをインライン要素として使う。
jQueryのUI-ICONがブロックレベル要素なので、インラインで使おうとしても前後に改行が入ってしまう。float:leftでも行頭がせいぜいなので、インライン要素で使えるように考えてみた。 「ui-icon-inline」クラスを付けたものをインライン要素にする。 ■HTML まず最初に、UI-ICONを普通（ブロックレベル要素）<span class="ui-icon ui-icon-lightbulb"></span>として使う。 <p /> そして次に、UI-ICONをインライン要素<span class="ui-icon ui-icon-inline ui-icon-lightbulb"></span>として使う。 ■jQuery $(function(){ var $icon = $('.ui-icon.ui-icon-inline'); $icon.css({'displ
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 UI に見る WAI-ARIA の実装：dialog 編
はじめに † こんにちは。竹村です。 JavaScriptのライブラリである jQuery のユーザーインターフェイス関連を 実装している『jQuery UI』がWAI-ARIAに対応しつつある。ということを 下記の記事で知り、どのように実装されているかを確認してみました。 WAI-ARIA Implementation in JavaScript UI Libraries - updated http://www.paciellogroup.com/blog/?p=313 今回は、jQuery UI の dialog ウィジェットのWAI-ARIAの実装を確認します。 ↑ 簡単なWAI-ARIAの説明 † まず、WAI-ARIAについては、下記を確認ください。 WAI-ARIA導入（日本語訳） http://d.hatena.ne.jp/aratako0/20090709/p1 第1回：
$.ui.vScroll (jQuery UI Slider習作)
HTML <div class="mod_vScroll"><-- Scroll wrapper --> <div class="content"><-- Scroll contents --> <!-- Some vertical scroll contents here --> </div> <!-- Slider (generated from JavaScript) --> <div class="sliderWrap"><!-- Slider wrapper. "sliderWrap" class is optional --> <div class="sliderVertical ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all"><!-- "sliderVertial" class i
jQuery UI widgetでviewをゼロから作る
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / jQuery UI の widgetを使ってると、jQuery プラグイン形式だけどOOPできるぞーとかいう感じだけれども、結局のところはプラグイン形式なので、既にあるDOMをベースを起点として動作する。なので、例えば new $.ui.dashboard(JSON); みたいにやって、ゼロからviewを作ることが出来ない。こうするとwidgetのインスタンスをnewすることはできるんだけど、欲しいのは、widgetが適用されたDOM一式だったりすることが多い。widgetの_create（コンストラクタみたいなの）の中でごねごねやれば出来ないことは無いんだけど、それでやると色々とwidget
utBREW – jQuery UIでドラッグ＆ドロップ
jQuery 1.5 リリースされましたね。せっかくなんで1.5を使ってみます（特に1.5依存のことはやらないけど）。今回はjQuery UIを使ってドラッグ＆ドロップをやってみます。jQuery UI はjQueryの機能を拡張するプラグインの1つで、jQuery公式のUI関係のプラグインです。 今回のベース HTML / CSS はこんな感じ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="styleshe
Sortable （jQuery UI）の順序をクッキーに記録・再現させる方法 * Devotion Time
jQuery UIのsortableはリスト等の順序をAjaxに並び替えるために大変便利です。そして、Methodsの中でtoArrayを使えば、すべてリストのIDを順番に配列に吐き出してくれるので、並び替えたリストの順序を記録してCookieやDBにAjaxで保存することができます。しかし、クッキーやデータベースから呼び出したリスト順序の記録をリスト表示に再現するためのMethodsはありません。そこでjavascript関数を作成してみました。 HTML（例）<ul> <li id="foo1"></li> <li id="foo2"></li> <li id="foo3"></li> </ul> Sortable（jQuery UI）のメソッドtoArrayによる、クッキーへのリスト順序記録$('ul').sortable({ update:function(ev,ui){$.coo
jQuery UIのダイアログで特定のボタンをデフォルトにする方法
====================================================== 漢(オトコ)のコンピュータ道: 地震による災害復旧に対して今我々が出来ること。 ====================================================== jQuery UIのダイアログを使って見て、デフォルトボタンの指定をするオプションが見当たらなかったので、調査した結果をメモ。 今回の情報元： javascript - jquery-ui Dialog: Make a button in the dialog the default action (Enter key) - Stack Overflow javascript - Submit jQuery UI dialog on <Enter> - Stack Overflow 調べた結果に
jQuery UI でテーブルタグをsortableに :: [コエカタマリン MX 2007]
jQuery UI Sortableを使えば、直感的にマウスでドラッグアンドドロップしてアイテム（行）を入れ替えられるようなWebページが作成できます。 念のため説明しておくと、 jQuery UI Sortableは、jQuery UIのなかのひとつのフィーチャーです。 jQuery UIは、jQueryのプラグイン（ライブラリの一つ）です。 jQuery UI Sortableを使用するには、jQueryとjQuery UIを読み込むか、 以下のようにjquery.ui.sortable.jsが依存している「core」「widget」「mouse」だけを読み込めば軽くなります。 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src=
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
jQuery UI - アイコン - jQuery 入門