Script
本体のコンテンツを取得し、それを HTML<script>
要素にラップして、外側の taglib ( と呼ばれる) の下部に挿入する単純な taglib ( と呼ばれる) を作成しましたBody
。これは、Zurb の Foundation 4 の初期化を自動化するためのものです。これは、次の JSP を意味します。
<r:page>
<r:head title='Test Site'/>
<r:body>
<div id='thing'></div>
<r:script>
$(function() {
$('#thing').html('DOM is ready');
});
</r:script>
</r:body>
</r:page>
次の HTML としてレンダリングされます。
<!DOCTYPE html>
<!--[if IE 8]><html class='no-js lt-ie9' lang='en'><![endif]-->
<!--[if gt IE 8]><!--><html class='no-js' lang='en'><!--<![endif]-->
<head>
<meta http-equiv='content-type' content='text/html;charset=UTF-8' />
<title>Test Site</title>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
<link rel='stylesheet' href='/css/foundation.min.css'>
<script src='/js/vendor/custom.modernizr.js'></script>
<!--[if lt IE 9]><script src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script><![endif]-->
</head>
<body>
<div id='thing'></div>
<script>
document.write('<script src=/js/vendor/' + ('__proto__' in {} ? 'zepto' : 'jquery') + '.js><\/script>')
</script>
<script src='/js/foundation.min.js'></script>
<script>
$(document).foundation();
//The contents of the <r:script> from the JSP
$(function() {
$('#thing').html('DOM is ready');
});
</script>
</body>
</html>
このアプローチの欠点は、Eclipse WTP JSP エディターがスクリプト taglib の本文コンテンツを単なる HTML として認識するため、JavaScript 構文の強調表示が失われることです。何らかの方法がありますか (おそらく、.tld
ファイルに情報を追加するか、TagInfo
クラスを作成して、JSP エディターに本体が JavaScript を読み取ることを意味することを伝えますか? または、<script></script>
要素を手動で追加する唯一の方法です (明確にするために名前を変更します)カスタム taglib のようなものonFoundationReady
. また、そもそもこの余分な努力が価値があることを私よりも賢い人々に納得させることがまだ可能である場合に備えて、代替手段はボイラープレートの Zepto/jQuery ローダーを含めることです。$(document).foundation();
各ページの下部に、JavaScript SDK を介して Facebook Connect も使用しているという事実を含めると、この taglib が私からきれいに隠されている多くのボイラー プレート コードがあります)