Webウォーカーのブログ -13ページ目

Webウォーカーのブログ

ブログの説明を入力します。

Firefoxでおこるバグ回避のクラス

class="pkg"



/* .pkg class wraps enclosing block element around inner floated elements
-------------------------------------------------------------------------------- */
/* for modern browser */
.pkg {
overflow: hidden;
}

.pkg:after {
content: ".";
display: block;
height: 1px;
clear: both;
overflow: hidden;
}

/* Hides from IE-mac \*/
* html .pkg {
height: 1em;
overflow: visible;
}
/* End hide from IE-mac */

HTMLで読み込むjavascriptファイルがひとつだけですむ。

後からjavascriptファイルを追加しても、HTMLファイルにいちいち変更を加えなくてもOKで便利☆

ローカル環境でも動く



【HTML】

headに読み込み

<script type="text/javascript" src="common/js/include.js"></script>


【include.js】


var include = function(){
//対象のディレクトリ
var targetDirName = 'common/';

//JSのディレクトリ
var jsDir = 'js/';

var escapeRegex = function(str){
return str.replace(/([\\$^*+?(){}\[\].|])/g,"\\$1");
};

//ベースディレクトリ
var baseDir = function(){
if(!document.getElementsByTagName) return;
var scripts = document.getElementsByTagName("script");
var regexp = new RegExp('^(.*/?' + escapeRegex(targetDirName) + ').*?$');
for(var i = 0;i < scripts.length;i++){
if( scripts[i].src.match(regexp) ){
return scripts[i].src.match(regexp)[1];
}
}
}();

//include関数
var pub = function(file){
document.write('<script src="' + baseDir + jsDir + file + '"><\/script>');
};

//ベースディレクトリの属性を追加
pub.baseDir = baseDir;

return pub;
}();


include('jquery.js');


///////////////////////////////////////////////////////////////////////////////


↑こんな感じで書く



「include('jquery.js');」のところでファイル指定

この後に追加していく

【HTMLのheadのスクリプト読み込み】

<script>
function year() {var data = new Date();var now_year = data.getFullYear();document.write(now_year);}
</script>


【表示したいHTML部分に】
<script type="text/javascript">year();</script>


【例】
Copyright &copy; <script type="text/javascript">year();</script>


【表示】
Copyright (c) 2011