FAREX BLOG

Just another WordPress site

08 5月

Snippet :: Syntax Highlighter 2.0.0 サンプル

Posted in jQuery on 08.05.11

 

Syntax Highlighter とは、ソースコードHTML で表示する際、行番号の表示や色分けなどにより、ソースコード を見栄え良く装飾するツールです。

 

最も単純に利用する場合は、以下の 2 つのファイルを ダウンロード し、使用します。

jquery.snippet.js
jquery.snippet.css

 

<head> に以下の様に記述しました。

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.snippet.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.snippet.css" />
<script type="text/javascript">
$(function(){
  $( "pre.htmlCode" ).snippet( "html" );
  $( "pre.styles"   ).snippet( "css", { style : "greenlcd" } );
  $( "pre.js"       ).snippet( "javascript", { style : "random", transparent : true, showNum : false } );
});
</script>

 

<body> には、上記の jQuery セレクタ に対応する <pre> を記述します。

サンプル 1

style を指定しない場合、random となります。

 

transparent は、背景透過 の指定です。

サンプル 2

showNum は、html 表示時の 行番号付加 の指定です。

サンプル 3

 

クリップボード への コピー を可能にする場合は、ZeroClipboard.swf をダウンロードします。

ZeroClipboard.swf

 

そして、以下のように clipboard で、ZeroClipboard.swf へのパスを指定します。

$( "pre.clipboard" ).snippet( "javascript", { style : "peachpuff", clipboard : "ZeroClipboard.swf" } );

 

サンプル 4

tags: , , , ,

Snippet :: Syntax Highlighter 2.0.0 サンプル はコメントを受け付けていません。

15 4月

xMenu 1.1 サンプル

Posted in jQuery, ホームページ作成 on 15.04.11

 

シンプルな ドロップダウンメニュー です。

xmenu-1.1.zip 展開

jquery-1.4.4.min.js
jquery.xMenu-1.1.css
jquery.xMenu-1.1.js
jquery.xMenuStyle-1.1.css
xMenu-1.1.html

 

サンプル 
サンプル  [ css ]
サンプル  [ css ]
サンプル  [ css ]
サンプル  [ css ]
サンプル  [ css ]
サンプル  [ css ]
サンプル  [ css ]
サンプル  [ css ]

サンプル google 風 [ css ]

中継のみをする動作しない <li> に対しても、<a href="#"> のように記述して下さい。

 

LEVEL 1 、LEVEL 2 » を変更する場合は、以下を編集して下さい。

jquery.xMenu-1.1.js

	var mark_a = "&#9660;";
	var mark_b = "&raquo;";

tags: , , , , , ,

xMenu 1.1 サンプル はコメントを受け付けていません。

14 4月

jQuery :: ウィンドウのリサイズイベントのサンプル

Posted in jQuery on 14.04.11

xfunction は、リサイズ 後に実行する処理です。

 

 

var resizeTimer = null;
$( window ).resize(function(){
  if( resizeTimer ) clearTimeout( resizeTimer );
  resizeTimer = setTimeout( xfunction, 500 );
});

 
 

 

var resizeTimer = null;
$( window ).bind( 'resize', function(){
  if( resizeTimer ) clearTimeout( resizeTimer );
  resizeTimer = setTimeout( xfunction, 500 );
});

tags: , , , , , ,

jQuery :: ウィンドウのリサイズイベントのサンプル はコメントを受け付けていません。