2011-07-07 7 views
-1

phpを使ってアプリケーションを開発していますが、ヘッダーとフッター用のシンプルなテンプレートシステムを作成しました。 私のジレンマは、jQueryコードに依存するビューが多数あり、すべてのユーザーがヘッダーテンプレートを使用していることです。ヘッダーからの抜粋。サイトのフォルダ内のJavaScriptドキュメントにhtmlマークアップからjQueryコードを分離するにはどうすればいいですか

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>NgInformr | Adminstration | <?php if(isset($title)) { echo $title; }?></title> 
<?=$html->js("javascripts/top_up")?> 
<?=$html->css("admin-css")?> 
<?=$html->css("form-style")?> 
<link href="http://localhost/nginformr/www_root/js/uploadify/uploadify.css" type="text/css" rel="stylesheet"/> 
<?=$html->css("base/jquery.ui.all")?> 
<?=$html->js("uploadify/jquery.uploadify.v2.1.4.min")?> 
<?=$html->js("uploadify/swfobject")?> 
<?=$html->js("jquery-ui-1.8.9")?> 
<?=$html->js("jscripts/tiny_mce/jquery.tinymce")?> 
<script type="text/javascript"> 
$(document).ready(function() { 
//Uploader 
$('#file_upload').uploadify({ 
    uploader : "/nginformr/www_root/js/uploadify/uploadify.swf", 
    script : "/nginformr/www_root/js/uploadify/uploadify.php", 
    folder : "/nginformr/www_root/uploads", 
    auto : true, 
    onComplete : function(event, queueID, fileObj, reponse, data) { 
     $('#file_details').css({display:"block"}); 
     $('#path').val(fileObj.filePath); 
     $('#type').val(fileObj.type); 
    }, 
    onError : function (event,ID,fileObj,errorObj) { 
     alert(errorObj.type + ' Error: ' + errorObj.info); 
    } 
}); 
$("#side_menu").accordion({header:"p",fillSpace: false}); 
//Ajax for select boxes 
$('#state').change(function() { 
     $('#city').html(""); 
     var id = $('#state').val(); 
     var dataString = "id="+id; 
    $.ajax({ 
     url:"http://localhost/nginformr/cities/ajax_cities", 
     type:"POST", 
     data:dataString, 
     success:function(html) { 
      $('#city').append(html); 
     } 
    }); 
}); 
$("#city").change(function() { 
    $('#area').html(""); 
    var id = $('#city').val(); 
    var dataString = "id="+id; 
    $.ajax({ 
     url:"http://localhost/nginformr/areas/ajax_areas", 
     type:"post", 
     data:dataString, 
     success:function(html) { 
      $('#area').append(html); 
     } 
    }); 
}); 
$('#sector').change(function() { 
    $('#category').html(""); 
    var id = $('#sector').val(); 
    var dataString = "id="+id; 
    $.ajax({ 
     url:"http://localhost/nginformr/categories/ajax_categories", 
     type:"post", 
     data:dataString, 
     success:function(html) { 
      $('#category').append(html); 
     } 
    }); 
}); 
$(".widget").draggable(); 

//TinyMCE Editor 
$('textarea.tinymce').tinymce({ 
    // Location of TinyMCE script 
    script_url : 'http://localhost/nginformr/www_root/js/jscripts/tiny_mce/tiny_mce.js', 

    // General options 
    theme : "advanced", 
    plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist", 

    // Theme options 
    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect", 
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", 
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", 
    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak", 
    theme_advanced_toolbar_location : "top", 
    theme_advanced_toolbar_align : "left", 
    theme_advanced_statusbar_location : "bottom", 
    theme_advanced_resizing : true, 

    // Example content CSS (should be your site CSS) 
    //content_css : "css/content.css", 

    // Drop lists for link/image/media/template dialogs 
    template_external_list_url : "lists/template_list.js", 
    external_link_list_url : "lists/link_list.js", 
    external_image_list_url : "lists/image_list.js", 
    media_external_list_url : "lists/media_list.js", 

    // Replace values for the template plugin 
    template_replace_values : { 
     username : "Some User", 
     staffid : "991234" 
    } 
}); 
}); 
</script> 
<script type="text/javascript"> 
    TopUp.host = "http://localhost/nginformr/"; 
    TopUp.images_path = "www_root/img/top_up/"; 
</script> 
</head> 
<body> 
<div id="header"><!-- ------Header --> 
<div id="logo"> 
<a href="./"><?$html->img("nginformr_logo.png") ?></a> 
</div> 

<div id="user_controls"> 
<?=$html->link("admin/users/logout","Logout")?> 
</div> 
</div> 

答えて

1

あなたのヘッダから出て、別のファイルにあなたのjQueryのコードを移動することを意味している場合、あなたは、単にコピーし、それをすべて(マイナスHTMLスクリプトタグ)を貼ります(たとえば、 general.js)。

他のjavascriptファイルを参照したときと同じ方法でHTMLからそのファイルを参照するだけです。

<?=$html->js("general.js")?> 
+0

ええ、私はそれを試みたが、問題は、別のビューもヘッダにある別のjqueryコードを使用することです。私はオーバーヘッドを減らしたい、私は特定のビューに必要ではないコードを分離したい – MrFoh

0

なぜJavascriptファイルを作成してHTMLに組み込むのですか?

だから、(例えば)jquery_functions.jsにすべてのあなたのjQueryのコードを貼り付けて、それを含めるコピー:あなたのコードの例では

<html> 
    <head> 
     ... 
     <script type="text/javascript" language="javascript" src="/javascript/jquery_functions.js"></script> 
     ... 
    </head> 
    <body> 
     ... 
    </body> 
</html> 

または使用している関数を使用して

<?=$html->js("/javascript/jquery_functions")?> 
0

私はどうしてあなたのjQueryコードを自分のjsファイルに入れておかないと、あなたのテンプレートにそれが含まれているのか分かりません。

関連する問題