memo.xight.org

Home > Changelogメモ > JavaScript > 4ページ目 (全8ページ)
ChangeLog 最新ページ / カテゴリ最新ページ / 前ページ 1 2 3 4 5 6 7 8 次ページ / 4ページ目 (全8ページ)
2008-09 / 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

2006-06-16 Fri

JavaScriptのコーディング規約

- Reference
Javascript Programming Conventions
http://dojotoolkit.org/js_style_guide.html
MochiKit - StyleGuide
http://trac.mochikit.com/wiki/StyleGuide
Collection & Copy - MochKit - スタイルガイド
http://d.hatena.ne.jp/brazil/20060615/1150324291

カテゴリ: [JavaScript]

2006-06-15 Thu

TOC script - 目次自動生成スクリプト

- Summary
h1,h2,h3,h4 などの ヘッダタグから自動的に目次を生成.
Amazon - Ppk on Javascript: 洋書
- Reference
QuirksMode.org - JavaScript - TOC script
http://www.quirksmode.org/dom/toc.html
Ppk on Javascript: 洋書

カテゴリ: [JavaScript]

2006-06-12 Mon

dp.SyntaxHighlighter - JavaScriptでソースのハイライト

- Summary
C#,Javascript,VB,XML,HTML,PHP,SQL,Delphi,Python に対応.

- Reference
dp.SyntaxHighlighter - free JavaScript syntax highlighting
http://www.dreamprojections.com/SyntaxHighlighter/Examples.aspx

- via
phpspot開発日誌 - 2006-01-17 - Javascriptだけで各種プログラム言語コードを色分け表示する方法
http://phpspot.org/blog/archives/2006/01/javascript_2.html

カテゴリ: [JavaScript]
内部リンク: [2006-09-07-3] [2006-06-12-8]

2006-06-12 Mon

振る舞い分離 JavaScript ライブラリ

- behaviour.js
http://bennolan.com/behaviour/

- Modified Behavior
behaviour.jsの改良版.
http://www.firelord.net/modifiedbehavior

- document.getElementsBySelector
http://simon.incutio.com/js/getElementsBySelector.html

- cssQuery
http://dean.edwards.name/my/cssQuery/

- jQuery
http://jquery.com/

- prototype.js
http://prototype.conio.net/

- Reference
我的春秋: 振る舞い分離 JavaScript ライブラリ一覧
http://my-chunqiu.cocolog-nifty.com/html/javascript-behaviour.html
TECHMemo - 2005-12-31 - CSSのselectorとイベントハンドラの関連付け
http://d.hatena.ne.jp/dann/20051231/p5
fladdict.net blog - 2006-06-02 - jsがメッサ楽しくなるフレームワークjQuery(1)
http://fladdict.net/blog/2006/06/jsjquery1.html
JavaScript++かも日記 - 2006-06-02 - jQuery
http://jsgt.org/mt/archives/01/001088.html
- via
我的春秋 - 2006-01-05 - JavaScript ソースが HTML から消える日
http://my-chunqiu.cocolog-nifty.com/blog/2006/01/javascript_html_bc22.html
我的春秋 - 2006-06-10 - 続 JavaScript ソースが HTML から消える日
http://my-chunqiu.cocolog-nifty.com/blog/2006/06/_javascript_htm_d49c.html

カテゴリ: [JavaScript]

2006-06-09 Fri

JavaScriptでラスタスクロール,サイコロ回転エフェクト

- Reference
Kawa.net - Animation.Raster - ラスタスクロールだ!
http://www.kawa.net/works/js/animation/raster.html
Kawa.net - Animation.Cube - サイコロ回転エフェクト (rotating cube animation)
http://www.kawa.net/works/js/animation/cube.html
- via
@IT - Ajax うきうき Watch 第8回 “CGUI” 消費者が作り出すユーザーインターフェイスの時代
http://www.atmarkit.co.jp/fwcr/rensai/ajaxwatch08/01.html

カテゴリ: [JavaScript]

2006-06-06 Tue

Bubble Tooltips - 吹き出し方式のツールチップテキスト作成JavaScriptライブラリ

- Reference
wg:Bubble Tooltips
http://web-graphics.com/mtarchive/001717.php
- via
phpspot開発日誌 - 2006-06-06 - 吹き出し方式のツールチップテキスト作成JavaScriptライブラリ
http://phpspot.org/blog/archives/2006/06/javascript_14.html

カテゴリ: [JavaScript]

2006-05-18 Thu

指定した日時までの時間を表示するスクリプト "countdown.js" と使用法

- Summary
YAPC::Asia 2006のカウントダウンで使われていたスクリプトを見てみた.

- countdown.js

function toCountString(sec) {
	if (sec <= 0) {
		return '00:00:00';
	}
	var day = Math.floor(sec / (60*60*24));
	var hour = Math.floor(sec % (60*60*24)/(60*60)).toString().replace(/^(\d)$/, '0$1');
	var min = Math.floor(sec % (60*60*24) / (60) % 60).toString().replace(/^(\d)$/, '0$1');
	var sec = Math.floor(sec % (60*60*24)%60%60).toString().replace(/^(\d)$/, '0$1');
	return day + 'days ' + hour + ':' + min + ':' + sec;
}
 
function updateCountdown(id, m, c) { 
	var node = document.getElementById(id);
	if (!node) {
		return false;
	}
	for (var i = 0; i < node.childNodes.length; i++) {
		node.removeChild(node.childNodes[i]);
	}
	var count = toCountString(Math.floor((m - c)/1000));
	node.appendChild(document.createTextNode(count));
}


- HTML
<script type="text/javascript" src="countdown.js">
<div id="countdown"></div>
<script type="text/javascript">
	updateCountdown('countdown', new Date('March 29,2006 00:00:00'), new Date());
	setInterval("updateCountdown('countdown', new Date('March 29,2006 00:00:00'), new Date())", 1000);
</script>


- 複数のカウントダウンに対応する
原始的にやってみると以下のようになる.
<div id="countdown-1"></div>
<div id="countdown-2"></div>
<div id="countdown-3"></div>
<script type="text/javascript">
	updateAllCountdown();
	setInterval("updateAllCountdown()",1000);
	
	function updateAllCountdown(){
		updateCountdown('countdown-1', new Date('June 22,2006 00:00:00'), new Date());
		updateCountdown('countdown-2', new Date('October 1,2006 00:00:00'), new Date());
		updateCountdown('countdown-3', new Date('March 18,2007 00:00:00'), new Date());
		return true;
	}
</script>

カテゴリ: [JavaScript]

2006-04-20 Thu

リンクをマウスオーバーでサムネイルをポップアップ

- Source

function linkthumb(){
	var nophoto = 'http://img.simpleapi.net/img/nophoto.gif';
	var img = document.createElement('img');
	img.src = nophoto;
	img.onmouseout = function(){
		img.src=nophoto;
		img.style.display='none';
	};
	img.style.position = 'absolute';
	img.style.cursor   = 'pointer';
	img.style.display  = 'none';
	document.body.appendChild(img);
	var d = document.getElementsByTagName('div');
	for (var j = 0 ; j < d.length ; j++){
		if (d[j].className != 'body') continue;
		var a = d[j].getElementsByTagName('a');
		for (var i = 0 ; i < a.length ; i++){
			if (!a[i].href.match(/^http:/)) continue;
			if (a[i].href.match("^http://www\.example\.org/path/to/dir/")) continue;
			a[i].onmouseover=function(e){
				var link  = this.href;
				var thumb = 'http://img.simpleapi.net/small/'+link;
				img.onmouseover=function(){
					img.src=thumb;
					img.style.display='block';
				};
				img.onclick = function(){
					location.href=link;
				};
				if(document.all){
					img.style.left = document.documentElement.scrollLeft + event.x + "px";
					img.style.top  = document.documentElement.scrollTop  + event.y + "px";
				}else{
					img.style.left = e.pageX + "px";
					img.style.top  = e.pageY + "px";
				}
				img.src = thumb;
				img.style.display = 'block';
			};
			a[i].onmouseout = img.onmouseout;
		}
	}
}
if(window.addEventListener){
	window.addEventListener('load',linkthumb,false);
} else if(window.attachEvent){
	window.attachEvent('onload',linkthumb);
} else {
	window.onload=linkthumb;
}


以下の部分を適宜書き換えることで,自分のサイトはポップアップさせないように設定可能.
if(a[i].href.match("^http://www\.example\.org/path/to/dir/")) continue;


- Reference
Simple API - ウェブサイト・サムネイル化ツール
http://img.simpleapi.net/
- via
halchan's diary
http://www.halchan.org/diary/

カテゴリ: [JavaScript]

2006-03-15 Wed

JavaScript で指定の HTML 要素を動的に角丸デザインにする方法

- Source

Rounded("div#nifty","#377CB1","#9BD1FA"); // この1行だけで要素を角丸にすることが可能


<div id="nifty"><p>test</p></div>


- Reference
Nifty Corners
http://pro.html.it/esempio/nifty/
- via
phpspot開発日誌 - Javascriptで指定のHTML要素を動的に角丸デザインにする方法
http://phpspot.org/blog/archives/2006/03/javascripthtml.html

カテゴリ: [JavaScript]

2006-03-15 Wed

target="_blank" を使わないで別ウィンドウでリンクを開くのに rel="external" を使う

- Reference
tcervo.com - 2004-01-01 - Opening a link in a new window - the valid way
http://tcervo.com/?p=18
- via
hori-uchi.com: _blankを使わないで別ウィンドウを開くにはrel="external"を使うのが美しいと思う。
http://hori-uchi.com/archives/000424.html

カテゴリ: [HTML][JavaScript]

2006-03-15 Wed

target="_blank" を使わないで新しいウィンドウでリンクを開く方法

- Summary
target="_blank" を使わないで新しいウィンドウでリンクを開くための手法.
Behaviour.js を利用すればより簡単,かつHTMLを汚さずに実装可能.
Sample

- Source

var myrules = {
	'.popup' : function(el){
		var href = el.getAttribute('href');
		if (href){
			el.onclick    = function(){ window.open(href); return false;}
			el.onkeypress = function(){ window.open(href); return false;}
		}
	}
};
Behaviour.register(myrules);


<script type="text/javascript" src="behaviour.js"></script>
 
<a href="index.html">Normal</a>
<a class="popup" href="index.html">Pop up</a>


- Reference
Behaviour : Using CSS selectors to apply Javascript behaviours
http://bennolan.com/behaviour/

- via
cl.pocari.org - 2006-03-14
http://cl.pocari.org/2006-03-14-5.html

カテゴリ: [HTML][JavaScript]

2006-03-13 Mon

JavaScript で数値を3桁区切り

function toReadableNumber(str){
	var ret = Math.floor(str).toString();
	ret = ret.match(/./g).reverse().join("");
	ret = ret.replace(/(\d{3})/g,"$1,");
	ret = ret.match(/./g).reverse().join("").replace(/^,/,"");
	return ret;
}


- Reference
きんがくとかをけたくぎり
http://page.freett.com/elledia/tips/comma.html

カテゴリ: [JavaScript]

2006-02-17 Fri

JavaScriptにおけるコントロール名としてのブラケット (大括弧) の利用

- Summary
PHP で フォームの値を配列として受け取りたい場合,
以下のように記述するが,JavaScript で値を受け取る場合にちょっと面倒.

<input name="hoge[]" />
<input name="hoge[]" />


- name が hoge[0],hoge[1] ... の場合
<input name="hoge[0]" />
<input name="hoge[1]" />


JavaScript で hoge[1] の値を取得したい.
以下の場合,配列として認識されてしまう.
document.forms[0].hoge[1].value;


elements を用いて解決.
document.forms[0].elements["hoge[1]"].value;


- name が hoge[],hoge[] ... の場合
<input name="hoge[]" id="hoge0" />
<input name="hoge[]" id="hoge1" />


JavaScript で hoge[1] の値を取得したい.
getElementById を用いて解決.
document.getElementById('hoge1').value;


elements を用いて解決.
document.forms[0].elements[1].value;


- Reference
Web相談室 - JavaScriptにおけるコントロール名としての[]の利用
http://www.parkcity.ne.jp/~chaichan/qanda/qa5517.htm

PHP マニュアル - 第71章 PHPとHTML - 3. HTMLフォームで配列を使用するにはどうすればよいですか?
http://php.s3.to/man/faq.html.html#faq.html.arrays

W3C Recommendation - HTML4.01 - Basic HTML data types - CDATA
http://www.w3.org/TR/html401/types.html#type-cdata

W3C Recommendation - HTML4.01 - Forms in HTML documents - The INPUT element
http://www.w3.org/TR/html401/interact/forms.html#h-17.4

カテゴリ: [JavaScript][PHP]

2006-02-16 Thu

今日から使える JavaScript カスタム関数トップ 10

- Reference
Web Standards with Imagination - Top 10 custom JavaScript functions of all time
http://www.dustindiaz.com/top-ten-javascript
- via
[戯] 今日から使える JavaScript カスタム関数トップ 10
http://cl.pocari.org/2006-02-13-2.html

カテゴリ: [JavaScript]

2006-02-16 Thu

Canvas Graph library - canvas を使った JavaScript によるグラフ描画ライブラリ

- Reference
Announcement: new Javascript/Canvas Graph library
http://aslakhellesoy.com/articles/2006/02/09/announcement-new-javascript-canvas-graph-library
OpenSpace - HTMLタグリファレンス - <canvas>タグ
http://www.openspc2.org/HTML/appendix/canvas_param/title.html
- via
[戯] canvas を使った JavaScript によるグラフ描画ライブラリ
http://cl.pocari.org/2006-02-13-1.html

カテゴリ: [JavaScript][Stub]

2006-02-07 Tue

Firefox 検索 Plug-in を追加する JavaScript

- Summary
クリックすると,Firefox に検索プラグインを追加するダイヤログが表示される.
Qooqle で発見した.
http://qooqle.jp/javascripts/firefox_plugin.js
- Source

function addEngine() {
	if ((typeof window.sidebar == "object") && (typeof window.sidebar.addSearchEngine == "function")) {
	window.sidebar.addSearchEngine(
		"http://xight.org/misc/firefox/searchplugins/xight.src",  /* engine URL */
		"http://xight.org/misc/firefox/searchplugins/xight.png",  /* icon URL */
		"memo.xight.org",                          /* engine name */
		"Web検索");                                /* category name */
	} else {
		alert("検索プラグインを使用するには Mozilla Firefox、Mozilla、または Netscape 6 以上が必要です。");
	}
}


<a href="javascript:addEngine();">Firefox に検索プラグインを追加</a>


- Sample
Firefox に検索プラグインを追加

- Reference
Qooqle
http://qooqle.jp/

カテゴリ: [JavaScript][Firefox]

2006-02-06 Mon

FCKEditor - WYSIWYG な HTML 編集ライブラリ

- Summary

<?php
	include "fckeditor.php";
	$fckObject = new FCKeditor( "edit_name") ;
	$fckObject->BasePath = "./";
	$fckEditorHtml = $fckObject->CreateHtml();
?>
<form method="post">
	<?= $fckEditorHtml ?>
	<input type="submit" value="send" />
</form>
<?= $_REQUEST['edit_name'] ?>


- イメージマネージャを利用する
fckconfig.js を編集
// var _FileBrowserLanguage    = 'asp' ;   // asp | aspx | cfm | lasso | perl | php | py
var _FileBrowserLanguage    = 'php' ;   // asp | aspx | cfm | lasso | perl | php | py
// var _QuickUploadLanguage    = 'asp' ;   // asp | aspx | cfm | lasso | php
var _QuickUploadLanguage    = 'php' ;   // asp | aspx | cfm | lasso | php


editor/filemanager/browser/default/connectors/php/config.php を編集
// SECURITY: You must explicitelly enable this "connector". (Set it to "true").
// $Config['Enabled'] = false;
$Config['Enabled'] = true;
 
// Path to user files relative to the document root.
// $Config['UserFilesPath'] = '/UserFiles/' ;
$Config['UserFilesPath'] = '/FCKeditor/UserFiles/' ;


% mkdir /var/www/FCKeditor/UserFiles


- XOOPSに組み込む
FCKeditor - xoopsに組み込む
http://www.geocities.jp/fckeditor/xoops.html




- FCKEditorクラスのメソッド
メソッド名 用途
FCKeditor コンストラクタ
Create FCKEditorを実行するHTMLを出力する
CreateHtml FCKEditorを実行するHTMLを返す
IsCompatible FCKEditorが使用できるかどうか調べる
GetConfigFieldString ConfigプロパティをFCKEditorに渡すパラメータ文字列に変換する(private的関数)

- FCKEditorクラスのプロパティ
プロパティ名 用途
$InstanceName インスタンスするフォーム要素名を指定する
$BasicPath FCKEditor本体のURLパスを指定する
$Width 表示するFCKEditorの幅をピクセル単位で指定する
$Height 表示するFCKEditorの高さをピクセル単位で指定する
$ToolbarSet 使用するツールバーの種類を指定する.デフォルトでは「default」と「Basic」がある
$Value FCKEditorのデフォルト文字列
$Config その他のFCKEditorの設定を配列で指定

- Reference
FCKeditor - The text editor for Internet
http://www.fckeditor.net/
- via
Writing/kiwameru_php_vol.1/wysiwyg-editor - よくきた wiki
http://wiki.poyo.jp/read/Writing/kiwameru_php_vol.1/wysiwyg-editor
cl.pocari.org - PHP で WYSIWYG な編集ライブラリ FCKEditor
http://cl.pocari.org/2006-01-23-2.html

カテゴリ: [PHP][JavaScript]
2008-09 / 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
最終更新時間: 2008-09-05 14:14

Color Reference

ChangeLogを検索
携帯電話からアクセス!

カテゴリ

最近の話題

リンク

過去ログ

Google

QR Code

Since
2002-11-28
Update
2008-09-05 14:14
Copyright © 2005 xight.org All Rights Reserved.