* サーバー側は、小松氏のこれをbloga.jp:80へ置いてあります。
* クライアント側はWS処理をjQueryプラグイン化してみました。これです。
* ちなみに、このDemoサンプルは、下記5行でローカルでも別ドメインでもどこにでも設置出来ます。
<script src="http://bloga.jp/ws/jq/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://bloga.jp/ws/jq/js/jquery.ws-0.3-noenc-pre.js" type="text/javascript" charset="utf-8"></script>
<script src="http://bloga.jp/ws/jq/conn/wschatdemo0.3.js" type="text/javascript"></script>
<script>/*サポートしてない時のalertメッセージを抑止*/$.ws.wsSetup({nonosupportmsg:true});</script>
<div id="wsdemos"></div>
【info】いつもいろいろなテストなどをページ内のあちこちでやっているので、重かったり、壊れていたりするf^^;ことも多いです。実験用ですので、カオス(混沌)をあえて意図したりもしますので、標準やValidとは無縁だったりしますが、何卒、ご了承ください ( _ _ b
【info】
最近はTwitterでぶつぶつ言ってることが多いです。
>http://twitter.com/toshirot
【info】
Chrome Extension [WebSocket Chat] もちろんChrome専用です
https://chrome.google.com/extensions/detail/fnoegeafibddabfhmpmhniphlcojkjli
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu with YUI Goodness</title>
<link rel="stylesheet"
href="yui-rollover_files/yui-rollover.css"
type="text/css" media="screen">
<script type="text/javascript"
src="yui-rollover_files/yahoo-dom-event.js"></script>
<script type="text/javascript">
// Create a menu object, put everything we need into it
var menu = {
// Initialize the menu rollover
init : function() {
// Get the btn elements
btns = YAHOO.util.Dom.getElementsByClassName('btn', 'div', 'menu');
// Assign event listeners to the btns
for (var i=0; i<btns.length; i++) {
YAHOO.util.Event.addListener(btns[i], 'mouseover', menu.roll, i);
YAHOO.util.Event.addListener(btns[i], 'mouseout', menu.roll);
}
},
// First, turn 'em all off, then turn one on
roll : function(e, i) {
YAHOO.util.Dom.removeClass(btns, 'btn-over');
YAHOO.util.Dom.addClass(btns[i], 'btn-over');
}
};
// Initialize the menu
YAHOO.util.Event.on(window, 'load', menu.init);
</script></head><body>
<div id="menu">
<div class="btn">
<a href="#">Link 1</a>
<p>Description for link 1</p>
</div>
<div class="btn">
<a href="#">Link 2</a>
<p>Description for link 2</p>
</div>
<div class="btn">
<a href="#">Link 3</a>
<p>Description for link 3</p>
</div>
</div>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu with jQuery</title>
<link rel="stylesheet"
href="jquery-rollover_files/jquery-rollover.css"
type="text/css" media="screen">
<script type="text/javascript"
src="jquery-rollover_files/jquery-1.2.3.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
btns = $('.btn');
btns.hover(
function(){ $(this).addClass('btn-over')},
function(){ $(this).removeClass('btn-over')}
)
})
</script></head><body>
<div id="menu">
<div class="btn">
<a href="#">Link 1</a>
<p>Description for link 1</p>
</div>
<div class="btn">
<a href="#">Link 2</a>
<p>Description for link 2</p>
</div>
<div class="btn">
<a href="#">Link 3</a>
<p>Description for link 3</p>
</div>
</div>
</body>
</html>
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |




