PHP & JavaScript Room :: 設置サンプル

実行結果

jQuery Impromptu | 設置サンプル

▼ダイアログ、入力プロンプト、確認ダイアログをカスタマイズできるjQueryプラグイン。

ダイアログ（【OK】ボタンのみ）

$.prompt('Example 1');

ダイアログ（【OK】ボタン＋【Cancel】ボタン）

$.prompt('Example 2',{ buttons: { Ok: true, Cancel: false } });

オーバーレイの透明度を指定

$.prompt('Example 3',{ opacity: 0.9 });

デフォルトでフォーカスを当てるボタンを指定

$.prompt('Example 4',{ buttons: { Ok: true, Cancel: false }, focus: 1 });

CSS名で使用するプレフィックスを変更

$.prompt('Example 5',{ prefix: 'impromptu' });

プロンプト表示する時のエフェクトを変更

$.prompt('Example 6',{ show:'slideDown' });

jQueryでエフェクトをカスタマイズ

jQuery.fn.extend({
	myanimation: function(speed){
		var t = $(this); 
		if(t.css("display") == "none") t.show(speed,function(){ t.hide(speed,function(){ t.show(speed); }); }); 
		else  t.hide(speed,function(){ t.show(speed,function(){ t.hide(speed); }); });
	} 
});
$.prompt('Example 7',{ show:'myanimation' });

コールバック関数を追加

function mycallbackfunc(v,m,f){
	$.prompt('i clicked ' + v);
}
$.prompt('Example 8',{ callback: mycallbackfunc });

入力プロンプト（3の引数を持つコールバック関数）

var txt = 'Please enter your name:<br />
	<input type="text" id="alertName" 
	name="alertName" value="name here" />';
function mycallbackform(v,m,f){
	$.prompt(v +' ' + f.alertName);
}
$.prompt(txt,{
	callback: mycallbackform,
	buttons: { Hey: 'Hello', Bye: 'Good Bye' }
});

入力プロンプト（入力チェック）

var txt = 'Try submitting an empty field:<br />
<input type="text" id="alertName" 
name="myname" value="" />';

function mysubmitfunc(v,m,f){
	an = m.children('#alertName');
	if(f.alertName == ""){
		an.css("border","solid #ff0000 1px");
		return false;
	}
	return true;
}

$.prompt(txt,{
	submit: mysubmitfunc,
	buttons: { Ok:true }
});

角丸（jQuery Corner Plugin使用）

$.prompt('Example 11',{prefix:'impromptu'}).children('#impromptu').corner();

入力プロンプト（ボタンのカスタマイズ）

$.prompt('Example 12<p>Save these settings?</p>',{
	buttons:{ Apply:1,Maybe:2,Never:3 },

	prefix:'colsJqi',
}).children('#colsJqi').corner();

テーマ：ブラウザ

var brown_theme_text = '<h3>Example 13</h3>'+
'<p>Save these settings?</p>'+
'<img src="images/help.gif" alt="help" '+
'class="helpImg" />';
$.prompt(brown_theme_text,{
	buttons:{Ok:true,Cancel:false}, 
	prefix:'brownJqi'
});

テーマ：ブルー1

$.prompt('Hello World!!',{
	buttons:{Ok:true,Cancel:false}, 
	prefix:'cleanblue'
});

テーマ：ブルー2

$.prompt('Hello World!!',{
	buttons:{Ok:true,Cancel:false}, 
	prefix:'extblue'
});

ステータス

var statesdemo = {
	state0: {
		html:'test 1.<br />test 1..<br />test 1...',
		buttons: { Cancel: false, Next: true },
		focus: 1,
		submit:function(v,m,f){ 
			if(!v) return true;
			else
			$.prompt.goToState('state1');
			return false; 
		}
	},
	state1: {
		html:'test 2',
		buttons: { Back: -1, Exit: 0 },
		focus: 1,
		submit:function(v,m,f){ 
			if(v==0) $.prompt.close()
			else if(v=-1)
			$.prompt.goToState('state0');
			return false; 
		}
	}
};
$.prompt(statesdemo);

設置サンプルのソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="Content-Language" content="ja" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <meta http-equiv="imagetoolbar" content="no" />
      <title>jQuery Impromptu | 設置サンプル</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <!-- JS -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script type="text/javascript" src="/content/lib/jquery/jquery-impromptu.2.5.js"></script> 
      <script type="text/javascript" src="/content/lib/jquery/jquery.corner.js"></script> 
      <!-- CSS -->
      <style type="text/css">
         .jqifade { position:absolute; background-color:#aaa; }
         div.jqi { width:400px; position:absolute; background-color:#fff; font-size:11px; text-align:left; border:solid 1px #eee; -moz-border-radius:10px; -webkit-border-radius:10px; padding:7px; }
         div.jqi .jqicontainer { font-weight:bold; }
         div.jqi .jqiclose { position:absolute; top:4px; right:-2px; width:18px; cursor:default; color:#bbb; font-weight:bold; }
         div.jqi .jqimessage { padding:10px; line-height:20px; color:#444; }
         div.jqi .jqibuttons { text-align:right; padding:5px 0; border:solid 1px #eee; background-color:#f4f4f4; }
         div.jqi button { padding:3px 10px; margin:0 10px; background-color:#2f6073; border:solid 1px #f4f4f4; color:#fff; font-weight:bold; font-size:12px; }
         div.jqi button:hover { background-color:#728a8c; }
         div.jqi button.jqidefaultbutton { background-color:#bf5e26; }
         .jqiwarning .jqi .jqibuttons { background-color:#bf5e26; }
      </style>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <div id="wrap">
         <h1><a href='http://www.trentrichardson.com/Impromptu/index.php'>jQuery Impromptu</a> | 設置サンプル</h1>
         <p>▼ダイアログ、入力プロンプト、確認ダイアログをカスタマイズできるjQueryプラグイン。</p>
<!-- CODE -->
<h2>ダイアログ（【OK】ボタンのみ）</h2>
<div class="exlink">
   <button onclick="$.prompt('Example 1')" title="Example 1">Example 1</button>
</div>
<pre>$.prompt('Example 1');</pre>

<h2>ダイアログ（【OK】ボタン＋【Cancel】ボタン）</h2>
<div class="exlink">
   <button onclick="$.prompt('Example 2',{ buttons: { Ok: true, Cancel: false } })" title="Example 2">Example 2</button>
</div>
<pre>$.prompt('Example 2',{ buttons: { Ok: true, Cancel: false } });</pre>

<h2>オーバーレイの透明度を指定</h2>
<div class="exlink">
   <button onclick="$.prompt('Example 3',{ opacity: 0.9 })" title="Example 3">Example 3</button>
</div>
<pre>$.prompt('Example 3',{ opacity: 0.9 });</pre>

<h2>デフォルトでフォーカスを当てるボタンを指定</h2>
<div class="exlink">
   <button onclick="$.prompt('Example 4',{ buttons: { Ok: true, Cancel: false }, focus: 1 })" title="Example 4">Example 4</button>
</div>
<pre>$.prompt('Example 4',{ buttons: { Ok: true, Cancel: false }, focus: 1 });</pre>

<h2>CSS名で使用するプレフィックスを変更</h2>
<div class="exlink">
   <button onclick="$.prompt('Example 5',{ prefix: 'impromptu' })" title="Example 5">Example 5</button>
</div>
<pre>$.prompt('Example 5',{ prefix: 'impromptu' });</pre>
<style type="text/css">
/* impromptu */
.impromptuwarning .impromptu{ background-color:#aaa; }
.impromptufade { position:absolute; background-color:#fff; }
div.impromptu{ position:absolute; background-color:#ccc; padding:10px; width:300px; text-align:left; }
div.impromptu .impromptuclose { float:right; margin:-35px -10px 0 0; cursor:pointer; color:#213e80; }
div.impromptu .impromptucontainer { background-color:#213e80; padding:5px; color:#fff; font-weight:bold; }
div.impromptu .impromptumessage { background-color:#415ea0; padding:10px; }
div.impromptu .impromptubuttons { text-align:center; padding:5px 0 0 0; }
div.impromptu button { padding:3px 10px 3px 10px; margin:0 10px; }
</style>

<h2>プロンプト表示する時のエフェクトを変更</h2>
<div class="exlink">
   <button onclick="$.prompt('Example 6',{ show:'slideDown' })" title="Example 6">Example 6</button>
</div>
<pre>$.prompt('Example 6',{ show:'slideDown' });</pre>

<h2>jQueryでエフェクトをカスタマイズ</h2>
<div class="exlink">
   <button onclick="$.prompt('Example 7',{ show:'myanimation' })" title="Example 7">Example 7</button>
</div>
<pre>jQuery.fn.extend({
   myanimation: function(speed){
      var t = $(this); 
      if(t.css("display") == "none") t.show(speed,function(){ t.hide(speed,function(){ t.show(speed); }); }); 
      else  t.hide(speed,function(){ t.show(speed,function(){ t.hide(speed); }); });
   } 
});
$.prompt('Example 7',{ show:'myanimation' });</pre>
<script type="text/javascript">
jQuery.fn.extend({
   myanimation: function(speed){
      var t = $(this);
      if(t.css("display") == "none")  t.show(speed,function(){ t.hide(speed,function(){ t.show(speed); }); });
      else t.hide(speed,function(){ t.show(speed,function(){ t.hide(speed); }); });
   }
});
</script>

<h2>コールバック関数を追加</h2>
<div class="exlink">
   <button onclick="$.prompt('Example 8',{ callback: mycallbackfunc });" title="Example 8">Example 8</button>
</div>
<pre>function mycallbackfunc(v,m,f){
   $.prompt('i clicked ' + v);
}
$.prompt('Example 8',{ callback: mycallbackfunc });</pre>
<script type="text/javascript">
function mycallbackfunc(v,m,f){
   $.prompt('i clicked ' + v);
}
</script>

<h2>入力プロンプト（3の引数を持つコールバック関数）</h2>
<div class="exlink">
   <button onclick="$.prompt(txt,{ callback: mycallbackform, buttons: { Hey: 'Hello', Bye: 'Good Bye' } })" title="Example 9">Example 9</button>
</div>
<pre>var txt = 'Please enter your name:&lt;br /&gt;
   &lt;input type="text" id="alertName" 
   name="alertName" value="name here" /&gt;';
function mycallbackform(v,m,f){
   $.prompt(v +' ' + f.alertName);
}
$.prompt(txt,{
   callback: mycallbackform,
   buttons: { Hey: 'Hello', Bye: 'Good Bye' }
});</pre>
<script type="text/javascript">
var txt = 'Please enter your name:<br><input type="text" id="alertName" name="alertName" value="name here" />';
var txt2 = 'Try submitting an empty field:<br><input type="text" id="alertName" name="alertName" value="" />';
function mycallbackform(v,m,f){
   $.prompt(v +' ' + f.alertName);
}
</script>

<h2>入力プロンプト（入力チェック）</h2>
<div class="exlink">
   <button onclick="$.prompt(txt2,{ submit: mysubmitfunc, buttons: { Ok:true } })" title="Example 10">Example 10</button>
</div>
<pre>var txt = 'Try submitting an empty field:&lt;br /&gt;
&lt;input type="text" id="alertName" 
name="myname" value="" /&gt;';

function mysubmitfunc(v,m,f){
   an = m.children('#alertName');
   if(f.alertName == ""){
      an.css("border","solid #ff0000 1px");
      return false;
   }
   return true;
}

$.prompt(txt,{
   submit: mysubmitfunc,
   buttons: { Ok:true }
});</pre>
<script type="text/javascript">
function mysubmitfunc(v,m,f){
   an = m.children('#alertName');
   if(f.alertName == ""){
      an.css("border","solid #ff0000 1px");
      return false;
   }
   return true;
}
</script>

<h2>角丸（<a href="http://methvin.com/jquery/jq-corner.html" title="jQuery Corner Plugin">jQuery Corner Plugin</a>使用）</h2>
<div class="exlink">
   <button onclick="$.prompt('Example 11',{prefix:'impromptu'}).children('#impromptu').corner()" title="Example 11">Example 11</button>
</div>
<pre>$.prompt('Example 11',{prefix:'impromptu'}).children('#impromptu').corner();</pre>

<h2>入力プロンプト（ボタンのカスタマイズ）</h2>
<div class="exlink">
   <button onclick="$.prompt('Example 12<p>Save these settings?</p>',{ buttons:{ Apply:1,Maybe:2,Never:3 },prefix:'colsJqi'}).children('#colsJqi').corner()" title="Example 12">Example 12</button>
</div>
<pre>$.prompt('Example 12&lt;p&gt;Save these settings?&lt;/p&gt;',{
   buttons:{ Apply:1,Maybe:2,Never:3 },<br>
   prefix:'colsJqi',
}).children('#colsJqi').corner();</pre>
<style type="text/css">
/* columns ex */
.colsJqifadewarning .colsJqi{ background-color:#b0be96;}
.colsJqifade { position:absolute; background-color:#fff; }
div.colsJqi { position:absolute; background-color:#d0dEb6; padding:10px; width:400px; text-align:left; }
div.colsJqi .colsJqiclose { float:right; margin:-35px -10px 0 0; cursor:pointer; color:#bbb; }
div.colsJqi .colsJqicontainer { background-color:#e0eEc6; padding:5px; color:#fff; font-weight:bold; height:160px; }
div.colsJqi .colsJqimessage { background-color:#c0cEa6; padding:10px; width:280px; height:140px; float:left; }
div.colsJqi .jqibuttons { text-align:center; padding:5px 0 0 0; }
div.colsJqi button { background:url(/content/img/ajax/jquery_impromptu/button_bg.jpg) top left repeat-x #fff; border:solid #777 1px; font-size:12px; padding:3px 10px 3px 10px; margin:5px 5px 5px 10px; width:75px; }
div.colsJqi button:hover { border:solid #aaa 1px; }
</style>

<h2>テーマ：ブラウザ</h2>
<div class="exlink">
   <button onclick="$.prompt(brown_theme_text,{buttons:{Ok:true,Cancel:false}, prefix:'brownJqi'})" title="Example 13">Example 13</button>
</div>
<pre>var brown_theme_text = '&lt;h3&gt;Example 13&lt;/h3&gt;'+
'&lt;p&gt;Save these settings?&lt;/p&gt;'+
'&lt;img src="images/help.gif" alt="help" '+
'class="helpImg" /&gt;';
$.prompt(brown_theme_text,{
   buttons:{Ok:true,Cancel:false}, 
   prefix:'brownJqi'
});</pre>
<script type="text/javascript">
var brown_theme_text = '<h3>Example 13</h3><p>Save these settings?</p><img src="/content/img/jquery_impromptu/help.gif" alt="help" class="helpImg" />';
</script>
<style type="text/css">
/*
------------------------------
   brown theme
------------------------------
*/
.brownJqiwarning .brownJqi { background-color:#ccc; }
.brownJqifade { position:absolute; background-color:#fff; }
div.brownJqi { position:absolute; background-color:transparent; padding:10px; width:300px; text-align:left; }
div.brownJqi .brownJqiclose { float:right; margin:-20px 0 0 0; cursor:pointer; color:#777; font-size:11px; }
div.brownJqi .brownJqicontainer { position:relative; background-color:transparent; border:solid 1px #5F5D5A; color:#fff; font-weight:bold; }
div.brownJqi .brownJqimessage { position:relative; background-color:#F7F6F2; border-top:solid 1px #C6B8AE; border-bottom:solid 1px #C6B8AE; }
div.brownJqi .brownJqimessage h3 { background:url(/content/img/ajax/jquery_impromptu/brown_theme_gradient.jpg) top left repeat-x #fff; margin:0; padding:7px 0 7px 15px; color:#4D4A47; }
div.brownJqi .brownJqimessage p { padding:10px; color:#777; }
div.brownJqi .brownJqimessage img.helpImg { position:absolute; bottom:-25px; left:10px; }
div.brownJqi .brownJqibuttons { text-align:right; }
div.brownJqi button { background:url(/content/img/ajax/jquery_impromptu/brown_theme_gradient.jpg) top left repeat-x #fff; border:solid #777 1px; font-size:12px; padding:3px 10px 3px 10px; margin:5px 5px 5px 10px; }
div.brownJqi button:hover { border:solid #aaa 1px; }
</style>

<h2>テーマ：ブルー1</h2>
<div class="exlink">
   <button onclick="$.prompt('Hello World!!',{buttons:{Ok:true,Cancel:false}, prefix:'cleanblue'})" title="Example 14">Example 14</button>
</div>
<pre>$.prompt('Hello World!!',{
   buttons:{Ok:true,Cancel:false}, 
   prefix:'cleanblue'
});</pre>
<style type="text/css">
/*
*------------------------
*   clean blue ex
*------------------------
*/
.cleanbluewarning .cleanblue{ background-color:#acb4c4; }
.cleanbluefade{ position:absolute; background-color:#aaa; }
div.cleanblue{ font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; position:absolute; background-color:#fff; width:300px; font-size:11px; text-align:left; border:solid 1px #213e80; }
div.cleanblue .cleanbluecontainer{ background-color:#fff; border-top:solid 14px #213e80; padding:5px; font-weight:bold; }
div.cleanblue .cleanblueclose{ float:right; width:18px; cursor:default; margin:-19px -12px 0 0; color:#fff; font-weight:bold; }
div.cleanblue .cleanbluemessage{ padding:10px; line-height:20px; font-size:11px; color:#333333; }
div.cleanblue .cleanbluebuttons{ text-align:right; padding:5px 0 5px 0; border:solid 1px #eeeeee; background-color:#f4f4f4; }
div.cleanblue button{ padding:3px 10px; margin:0 10px; background-color:#314e90; border:solid 1px #f4f4f4; color:#fff; font-weight:bold; font-size:12px; }
div.cleanblue button:hover{ border:solid 1px #d4d4d4; }
</style>

<h2>テーマ：ブルー2</h2>
<div class="exlink">
   <button onclick="$.prompt('Hello World!!',{buttons:{Ok:true,Cancel:false}, prefix:'extblue'})" title="Example 15">Example 15</button>
</div>
<pre>$.prompt('Hello World!!',{
   buttons:{Ok:true,Cancel:false}, 
   prefix:'extblue'
});</pre>
<style type="text/css">
/*
*------------------------
*   Ext Blue Ex
*------------------------
*/
.extbluewarning .extblue{ border:1px red solid; }
.extbluefade{ position:absolute; background-color:#fff; }
div.extblue{ border:1px #6289B6 solid; position:absolute; background-color:#CAD8EA; padding:0; width:300px; text-align:left; }
div.extblue .extblueclose{ background-color:#CAD8EA; margin:2px -2px 0 0; cursor:pointer; color:red; text-align:right; }
div.extblue .extbluecontainer{ background-color:#CAD8EA; padding:0 5px 5px 5px; color:#000000; font:normal 11px Verdana; }
div.extblue .extbluemessage{ background-color:#CAD8EA; padding:0; margin:0 15px 15px 15px; }
div.extblue .extbluebuttons{ text-align:center; padding:0px 0 0 0; }
div.extblue button{ padding:1px 4px; margin:0 10px; background-color:#ccc; font-weight:normal; font-family:Verdana; font-size:10px; }
</style>

<h2>ステータス</h2>
<pre>var statesdemo = {
   state0: {
      html:'test 1.&lt;br /&gt;test 1..&lt;br /&gt;test 1...',
      buttons: { Cancel: false, Next: true },
      focus: 1,
      submit:function(v,m,f){ 
         if(!v) return true;
         else
         $.prompt.goToState('state1');
         return false; 
      }
   },
   state1: {
      html:'test 2',
      buttons: { Back: -1, Exit: 0 },
      focus: 1,
      submit:function(v,m,f){ 
         if(v==0) $.prompt.close()
         else if(v=-1)
         $.prompt.goToState('state0');
         return false; 
      }
   }
};
$.prompt(statesdemo);</pre>
<div class="exlink">
   <button onclick="$.prompt(statesdemo)" title="Example 16">Example 16</button>
</div>
<script type="text/javascript">
var statesdemo = {
   state0: {
      html:'test 1.<br>test 1..<br>test 1...',
      buttons: { Cancel: false, Next: true },
      focus: 1,
      submit:function(v,m){ 
         if(!v) return true;
         else $.prompt.goToState('state1');//go forward
         return false; 
      }
   },
   state1: {
      html:'test 2',
      buttons: { Back: -1, Exit: 0 },
      focus: 1,
      submit:function(v,m){ 
         if(v==0) $.prompt.close()
         else if(v=-1) $.prompt.goToState('state0');//go back
         return false; 
      }
   }
};
</script>
<!-- / CODE -->
      </div>
   </body>
</html>