ｊQueryUI実践サンプル集勉強！#2

次回に引き続いて今回は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では表示すらままなりません。

GoogleChrome

IE

これには頭を悩まされました。

というか現在でも原因がさっぱり分かりません(´・ω・`）
ちなみに？の色などが違うのはテーマを変えてみたりしてるせいです。
どなたか分かる方ヘルプ！

ま、ダイアログ自体は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>

と書くことで実現出来るので良しとしましょう！

今回は短いですが~~不具合に３〜４時間かけてしまったので~~ここまで。
次回はさらにプラグインをいじっていきます。