2
我下面Smarty的模板代碼：如何從smarty中調用JavaScript代碼？
<style type="text/css">
{literal}
li{
display:block;
}
li.tooltip
{
position:relative;
display:inline-block;
cursor:pointer;
width:300px;
text-align:right;
}
li.tooltip > ul li.info
{
display:none;
}
li.tooltip > ul li.info_container
{
position:absolute;
right:20px;
width:200px;
height:100px;
display:none;
color:#000;
}
li.tooltip ul li.info
{
text-align:left;
position:absolute;
left:1px;
right:1px;
top:20px;
bottom:1px;
color:#000;
padding:5px;
overflow:auto;
border:1px solid #000;
background-color: #fff;
}
{/literal}
</style>
<div class="view-questions" id="view_test_question_form">
<div class="breadcrumb-wrap">
{include file='prepare-sub-menu.tpl'}
<ul class="page-flow">
<li><a href="{$control_url}">Home</a><span>></span></li>
<li><a href="{$control_url}modules/practice_sheet/practice_sheet.php?op={$query_string}">Practice Sheet</a><span>></span></li>
<li>Detail</li>
</ul>
</div>
<h1 class="c-heading"> View Practice Sheet</h1>
{if "" != $info_msg}<div class="c-msg-seccess"> {$info_msg} <a href="#" class="c-close fnClose"></a> </div>{/if}
<div class="btn-space clear-flt" style="margin:0;">
<a href="{$control_url}modules/practice_sheet/practice_sheet.php?op={$query_string}" name="back" id="back" class="c-btn c-gray-btn c-back-btn"><span>Back</span></a>
{if $site_id!='ENTPRM'}
{if $coaching_account.NO_PDF_LIMIT>0}
<a href="{$control_url}modules/practice_sheet/pdf_practice_sheet.php?op=view&practice_sheet_id={$practice_sheet_id}" class="c-btn c-pdf-btn fl-right" target="_blank"><span>Generate PDF</span></a>
{else}
<a href="#" onclick="javascript:alert('You have used your available pdf limit, please contact admin.');return false;" class="c-btn c-pdf-btn fl-right"><span>Generate PDF</span></a>
{/if}
{else}
<a href="{$control_url}modules/practice_sheet/pdf_practice_sheet.php?op=view&practice_sheet_id={$practice_sheet_id}" class="c-btn c-pdf-btn fl-right" target="_blank"><span>Generate PDF</span></a>
{/if}
</div>
<!-- /. SOF que-answer-wrap -->
<div class="que-answer-wrap">
{if $practice_details}
{foreach from=$practice_details item=practice_sheet_data key=subject_name}
<h3><strong>Subject :</strong> {$subject_name}</h3>
{foreach from=$practice_sheet_data.topics item=topic_details}
<h3><strong>Topic : </strong>{$topic_details.topic_name}</h3>
{if $topic_details.practice_topics_ques}
<table class="base-table selection-table" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:15px;">
{assign var='que_seq_no' value=1}
{foreach from=$topic_details.practice_topics_ques item=question_data}
{foreach from=$question_data item=qstn_ans key=key}
<tr class="{cycle values="evenRow, oddRow"}" id="{$qstn_ans.question_id}">
<td class="question">
<ul class="tabl-head">
<li>Question {$que_seq_no}.</li>
<li class="center-align tooltip"><span>Report question issue - {$search_ques_id_str}{$qstn_ans.question_id}</span>
<ul class="tooltipText">
<li class='info'>Some text to fill the box with.</li>
</ul></li>
<li class="right-align"><a class="change_ps_question" href="change_practice_sheet_question.php?question_id={$qstn_ans.question_id}&practice_sheet_id={$practice_sheet_id}"><label class="bright" style="cursor:pointer;" >Change Question</label></a></li>
</ul>
<ul class="options w-auto">
{if $qstn_ans.question_directions|trim!=""}
<li><strong>Direction:</strong><span>{$qstn_ans.question_directions}</span></li>
{/if}
<li><strong>Question:</strong>{$qstn_ans.question_text}
{if $qstn_ans.question_file}<img src="{$ques_thum_image_path}{$qstn_ans.question_id}_{$qstn_ans.question_file}" />{/if}
</li>
{if $qstn_ans.question_has_sub_ques==0}
{if $qstn_ans.answer}
<li><strong>Answer:</strong>
{foreach from=$qstn_ans.answer item=ans key=ans_no}
<p>
{if $ans.answer_is_right==1}{assign var='correct_ans' value=$ans_no+1}{/if}
<b style="font-size:13px;">{$ans_no+1}.</b> {if $ans.answer_text!=''}{$ans.answer_text}{/if}<br />
{if $ans.answer_file!=''}<img src="{$ans_thumb_img_path}{$ans.answer_id}_{$ans.answer_file}" />{/if}
</p>
{/foreach}
</li>
<li><strong>Correct Answer Option : {$correct_ans}</strong></li>
{/if}
{else}
{if $qstn_ans.question_has_sub_ques==1 && $qstn_ans.sub_question}
{foreach from=$qstn_ans.sub_question item=sub_ques_ans key=sub_ques_no}
<li><strong>Sub-question {$que_seq_no}.{$sub_ques_no+1}</strong>{$sub_ques_ans.question_text}
{if $sub_ques_ans.question_file!=''}
<br /><img src="{$ques_thum_image_path}{$sub_ques_ans.question_id}_{$sub_ques_ans.question_file}">
{/if}
</li>
{if $sub_ques_ans.answer}
<li>
<strong>Answer:</strong>
{foreach from=$sub_ques_ans.answer item=sub_ans key=sub_ans_no}
<p>
{if $sub_ans.answer_is_right==1} {assign var='correct_sub_ans' value=$sub_ans_no+1} {/if}
<b style="font-size:13px;">{$sub_ans_no+1} . </b>{if $sub_ans.answer_text!=''}{$sub_ans.answer_text}{/if}<br />
{if $sub_ans.answer_file!=''}<img src="{$ans_thumb_img_path}{$sub_ans.answer_id}_{$sub_ans.answer_file}" >{/if}
</p>
{/foreach}
</li>
<li><strong>Correct Answer Option : {$correct_sub_ans}</strong></li>
{/if}
{/foreach}
{/if}
{/if}
</ul>
{assign var='que_seq_no' value=$que_seq_no+1}
{/foreach}
</td>
</tr>
{/foreach}
{else}
<tr><td>Questions are not available</td></tr>
{/if}
</table>
<br />
{/foreach}
{/foreach}
<table border="0" cellpadding="5" cellspacing="0" align="center" width="99%">
<tr><td> </td></tr>
<tr>
<td align="center" height="10"></td>
</tr>
</table>
{/if}
</div>
<!-- /. EOF que-answer-wrap -->
</div>
{literal}
<script type="text/javascript">
"use strict";
function click(event) {
var elem = this.parentNode.querySelector('.info_container');
if (elem)
elem.style.display = elem.style.display === 'block' ? 'none' : 'block';
}
function toolify() {
console.log("toolfiy",arguments)
var idx,
len,
elem,
info,
text,
elements = document.querySelectorAll('li.tooltip'),
canvas,
imgurl,
pointer,
tipHeight = 20,
tipWidth = 20,
width = 200,
height = 100,
ctx;
// Create a canvas element where the triangle will be drawn
canvas = document.createElement('canvas');
canvas.width = tipHeight;
canvas.height = tipWidth;
ctx = canvas.getContext('2d');
ctx.strokeStyle = '#000'; // Border color
ctx.fillStyle = '#fff'; // background color
ctx.lineWidth = 1;
ctx.translate(-0.5, -0.5); // Move half pixel to make sharp lines
ctx.beginPath();
ctx.moveTo(1, canvas.height); // lower left corner
ctx.lineTo(canvas.width, 1); // upper right corner
ctx.lineTo(canvas.width, canvas.height); // lower right corner
ctx.fill(); // fill the background
ctx.stroke(); // stroke it with border
//fix bottom row
ctx.fillRect(0, canvas.height - 0.5, canvas.width - 1, canvas.height + 2);
// Create a div element where the triangel will be set as background
pointer = document.createElement('li');
pointer.style.width = canvas.width + 'px';
pointer.style.height = canvas.height + 'px';
pointer.innerHTML = ' ' // non breaking space
pointer.style.backgroundImage = 'url(' + canvas.toDataURL() + ')';
pointer.style.position = 'absolute';
pointer.style.top = '2px';
pointer.style.right = '1px';
pointer.style.zIndex = '1'; // place it over the other elements
console.log(elements.length);
for (idx = 0, len = elements.length; idx < len; ++idx) {
elem = elements[idx];
elem.querySelector('span').addEventListener('click', click);
text = elem.querySelector('ul li.info');
// Create a new div element, and place the text and pointer in it
info = document.createElement('li');
text.parentNode.replaceChild(info, text);
info.className = 'info_container';
info.appendChild(pointer.cloneNode());
info.appendChild(text);
text.style.display = 'block';
//info.addEventListener('click',click);
}
}
window.addEventListener('load', toolify);
</script>
{/literal}
其實我想打電話從頭部的JavaScript代碼不上「的Onload」。這裏的主要問題是當我包含一個名爲headr.tpl的文件時，所有必需的jquery庫等都會自動加載。這一切都寫在頭部分。那麼我應該如何運行這段代碼呢？爲了您的參考，我向您提供了我爲上述smarty模板的等效HTML創建的jsFiddle。 Fiddle
所以我的問題是做了什麼改變後，代碼將正常工作？
你問過如何讓'toolify'運行在head部分，而不是通過'window.addEventListener（'load'，toolify）;'？ – EthanB
@EthanB：是的，需要做些什麼改變？ ？ – PHPLover
我不認爲這會起作用：'toolify'會影響DOM並且與DOM（網頁中的元素）進行交互，並且如果它在head部分被調用，那麼web頁面（body部分）不會即使存在， – EthanB