Question

我已经分别在/ css和/ js下的/ public目录中添加了一些CSS和JS文件。在我的Bootstrap.php文件中，我使用了以下初始化程序：

protected function _initPlaceholders() {
    $view = new Zend_View($this->getOptions());
    $view->headLink()->appendStylesheet('/css/themes/gray/style.css');
    $view->headScript()->prependFile('/js/global.js');
    return $view;
}

在我看来，我正在引用CSS和脚本如下：

<?php

echo "Employee Pay Stub Summary";
echo $this->headLink();
echo $this->headScript();
?>

我认为包装DIV是：

<div id="wrapper">

<?php if(count($this->PayStub)): ?>
<table>
    <tr>
    <th>Employee ID</th>
    <th>PayStub ID</th>
    <th>Earning Type</th>
    <th>Total Hours</th>
    <th>Hourly Rate</th>
    <th>Total Earnings</th>
    <th>Total Witholding</th>
    <th>Start Date</th>
    <th>End Date</th>
    </tr>


    <?php foreach ($this->PayStub as $key => $values):?>
        <tr>
        <td><?php echo $values['EmployeeID'];?></td>
        <td><?php echo $values['PayStubID']; ?></td>
        <td><?php echo $values['EarningType']; ?></td>
        <td><?php echo $values['TotalHours']; ?></td>
        <td><?php echo $values['HourlyRate']; ?></td>
        <td><?php echo $values['TotalEarnings'];?></td>
        <td><?php echo $values['TotalWitholding']; ?></td>
        <td><?php echo $values['StartDate']; ?></td>
        <td><?php echo $values['EndDate']; ?></td>
        </tr>
    <?php endforeach;?>

</table>

<a href="/index">Logout</a>
<?php else: ?>
    <p>There are no Paystubs available</p>
<?php endif; ?>
</div>

我的CSS主题部分内容如下：

#wrapper > header {
background-color: #ABCEEE;
background-image: url(../../svg1910.svg?from=%23ABCEEE&amp;to=%238AA8CA);
background-image: -o-linear-gradient(top, #ABCEEE, #8AA8CA);
background-image: -ms-linear-gradient(top, #ABCEEE, #8AA8CA);
background-image: -moz-linear-gradient(top, #ABCEEE, #8AA8CA);
background-image: -webkit-gradient(linear, left top, left bottom, from(#ABCEEE), to(#8AA8CA));
background-image: -webkit-linear-gradient(top, #ABCEEE, #8AA8CA);
background-image: linear-gradient(top, #ABCEEE, #8AA8CA);
-pie-background: linear-gradient(top, #ABCEEE, #8AA8CA);
}

#main-navigation > li.active {
background-color: #abceee;
background-image: -o-linear-gradient(#ABC, rgba(234, 238, 243, 0.2) 10%, #ABCEEE), -o-
linear-gradient(left, #ABC, #ABCEEE 3%, #ABCEEE 97%, #ABC);
background-image: -ms-linear-gradient(#ABC, rgba(234, 238, 243, 0.2) 10%, #ABCEEE), -ms-
linear-gradient(left, #ABC, #ABCEEE 3%, #ABCEEE 97%, #ABC);
background-image: -moz-linear-gradient(#ABC, rgba(234, 238, 243, 0.2) 10%, #ABCEEE), -moz-    linear-gradient(left, #ABC, #ABCEEE 3%, #ABCEEE 97%, #ABC);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ABC), 
color-stop(10%, rgba(234, 238, 243, 0.2)), color-stop(100%, #ABCEEE)), -webkit-gradient(linear, 
left 
center, right center, color-stop(0%, #ABC), color-stop(3%, #ABCEEE), color-stop(97%, #ABCEEE),   
color-stop(100%, #ABC));
background-image: -webkit-linear-gradient(#ABC, rgba(234, 238, 243, 0.2) 10%, #ABCEEE), -
webkit-linear-gradient(left, #ABC, #ABCEEE 3%, #ABCEEE 97%, #ABC);
background-image: linear-gradient(#ABC, rgba(234, 238, 243, 0.2) 10%, #ABCEEE), linear-
gradient(left, #ABC, #ABCEEE 3%, #ABCEEE 97%, #ABC);
}

/**
* Contents
*/
#wrapper > section > section > header h1,
#wrapper > section > section > .viewport > header h1{
color: #567;
line-height: 30px;
margin: 0;
text-shadow: #FFF 0 1px 2px;
}

这是FireFox的View Source输出：

Employee Pay Stub Summary
<div id="wrapper">

<table>
    <tr>
    <th>Employee ID</th>
    <th>PayStub ID</th>
    <th>Earning Type</th>
    <th>Total Hours</th>

    <th>Hourly Rate</th>
    <th>Total Earnings</th>
    <th>Total Witholding</th>
    <th>Start Date</th>
    <th>End Date</th>
    </tr>



                <tr>
        <td>1</td>
        <td>1</td>
        <td>0</td>
        <td>40</td>
        <td>25</td>

        <td>1000</td>
        <td>100</td>
        <td>07/01/2011</td>
        <td>07/14/2011</td>
        </tr>
                <tr>
        <td>1</td>

        <td>5</td>
        <td>1</td>
        <td>80</td>
        <td>40</td>
        <td>3200</td>
        <td>320</td>

        <td>07/15/2011</td>
        <td>07/31/2011</td>
        </tr>

</table>

<a href="/index">Logout</a>
</div>

由于我是ZF的新手，我不确定如何在视图中引用标题和包装类？同样，如何从该目录中的一个文件调用JS函数？如何确保我视图中DIV正确引用上面的#wrapper CSS片段？

谢谢！

Answer 1

您可以在视图中引用CSS类，就像在普通HTML页面中一样，与javascript相同。

使用headScript（）和headLink（）帮助程序只是附加或预先添加要包含的文件的辅助工具。

例如，在我的布局脚本中，我预先添加了一些在我的网站中随处使用的css和javascript文件，并且在我的布局中的标签中，我回显了headLink（）和headScript（），但这给了我能够从可能需要额外代码的各个视图添加其他css和javascript文件。通过在我的视图中附加额外的文件，当我的布局回显headScript和headLink时，我得到了我从视图中添加的附加文件。

他们只是帮助者，但他们不会改变你调用普通javascript代码或引用CSS的方式。

因此，如果您包含包含这些类的css文件，您仍然可以在视图中的任何位置使用。

以下是我的布局脚本中的代码段：

<?php echo $this->doctype() ?>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<?php echo $this->headTitle() ?>

<?php 
$this->headLink()
     ->prependStylesheet($this->baseUrl('css/master.css'))
     ->prependStylesheet($this->baseUrl('css/application.css'));

echo $this->headLink();
?>

<?php
$this->headScript()
     ->prependFile($this->baseUrl('js/prototype.js'), 'text/javascript');
echo $this->headScript();
?>
</head>

然后从另一个需要特殊javascript和css文件的视图脚本中添加

<?php
$this->headScript->appendFile($this->baseUrl('js/prototip.js'), 'text/javascript');
$this->headLink->appendStylesheet($this->baseUrl('css/prototip.js'));
?>

现在我的布局有这些附加文件。渲染布局和视图后，我最终得到了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Site Title</title>
<link href="/css/application.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/master.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/prototip.css" media="screen" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/prototip.js"></script>
</head>

它们根本不会改变浏览器中html和javascript的工作方式。

如何通过Zend_View中的headLink引用CSS类？

1 个答案: