次回に引き続いて今回はjQueryUIを実際に触っていきます。
・jQueryUIプラグイン
まずは何らかのエディターで1-dialog.htmを作成しましょう。
head要素にlinkとscript要素を入れ、CSSとjQueryライブラリの読み込みを行ないます。
<html> <head> <link href="base.css" rel="stylesheet" type="text/css" /> <link href="../../jquery-ui/css/ui-lightness/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css" /> <script src="../../jquery-ui/js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../../jquery-ui/js/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script> </head> <body> </body> </html>
次にbody要素にデザインを施していきます。
ここからCSSを活用!
<p> <a href="#" id="dialog_link" class="ui-state-default ui-corner-all"> <span class="ui-icon ui-icon-help"></span> </a> </p>
a hrefの部分では特定の範囲の背景を表示。
spanではアイコンの表示を行っています。
で、書きながらテストしてみたらGoogleChromeでは表示がおかしくなるんですよ。
IEではui-corner-allが無視され、角張ったものになるのは予想通りなんですがGoogleChromeでは表示すらままなりません。
というか現在でも原因がさっぱり分かりません(´・ω・`)
ちなみに?の色などが違うのはテーマを変えてみたりしてるせいです。
どなたか分かる方ヘルプ!
ま、ダイアログ自体はbody要素内に
<div id="dialog" title="jQuery Help"> <p> このサンプルは、ローカルPCにダウンロードしたjQueryのライブラリを利用しています。 </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
と書いた後に、head要素内に
<script type="text/javascript"> $(function() { // dialog $('#dialog').dialog({ autoOpen: false, width: 400, buttons: { 'Ok': function() { $(this).dialog('close'); }, 'Cancel': function() { $(this).dialog('close'); } } }); // dialog link $('#dialog_link').click(function() { $('#dialog').dialog('open'); return false; }); }); </script>
と書くことで実現出来るので良しとしましょう!
今回は短いですが不具合に3〜4時間かけてしまったのでここまで。
次回はさらにプラグインをいじっていきます。