1 follower

Trabajar con Scripts del Cliente

Nota: Esta sección se encuentra en desarrollo.

Registrar scripts

Con el objeto yii\web\View puedes registrar scripts. Hay dos métodos dedicados a esto: registerJs() para scripts en línea registerJsFile() para scripts externos. Los scripts en línea son útiles para configuración y código generado dinámicamente. El método para agregarlos puede ser utilizado así:

$this->registerJs("var options = ".json_encode($options).";", View::POS_END, 'my-options');

El primer argumento es el código JS real que queremos insertar en la página. El segundo argumento determina en qué parte de la página debería ser insertado el script. Los valores posibles son:

El último argumento es un ID único del script, utilizado para identificar el bloque de código y reemplazar otro con el mismo ID en vez de agregar uno nuevo. En caso de no proveerlo, el código JS en sí será utilizado como ID.

Un script externo puede ser agregado de esta manera:

$this->registerJsFile('https://example.com/js/main.js', ['depends' => [\yii\web\JqueryAsset::class]]);

Los argumentos para registerJsFile() son similares a los de registerCssFile(). En el ejemplo anterior, registramos el archivo main.js con dependencia de JqueryAsset. Esto quiere decir que el archivo main.js será agregado DESPUÉS de jquery.js. Si esta especificación de dependencia, el orden relativo entre main.js y jquery.js sería indefinido.

Como para registerCssFile(), es altamente recomendable que utilices asset bundles para registrar archivos JS externos más que utilizar registerJsFile().

Registrar asset bundles

Como mencionamos anteriormente, es preferible utilizar asset bundles en vez de usar CSS y JavaScript directamente. Puedes obtener detalles de cómo definir asset bundles en la sección gestor de assets de esta guía. Utilizar asset bundles ya definidos es muy sencillo:

\frontend\assets\AppAsset::register($this);

Registrar CSS

Puedes registrar CSS utilizando registerCss() o registerCssFile(). El primero registra un bloque de código CSS mientras que el segundo registra un archivo CSS externo. Por ejemplo,

$this->registerCss("body { background: #f00; }");

El código anterior dará como resultado que se agregue lo siguiente a la sección head de la página:

<style>
body { background: #f00; }
</style>

Si quieres especificar propiedades adicionales a la etiqueta style, pasa un array de claves-valores como tercer argumento. Si necesitas asegurarte que haya sólo una etiqueta style utiliza el cuarto argumento como fue mencionado en las descripciones de meta etiquetas.

$this->registerCssFile("https://example.com/css/themes/black-and-white.css", [
    'depends' => [BootstrapAsset::class],
    'media' => 'print',
], 'css-print-theme');

El código de arriba agregará un link al archivo CSS en la sección head de la página.

  • El primer argumento especifica el archivo CSS a ser registrado.
  • El segundo argumento especifica los atributos HTML de la etiqueta <link> resultante. La opción depends es especialmente tratada. Esta especifica de qué asset bundles depende este archivo CSS. En este caso, depende del asset bundle yii\bootstrap\BootstrapAsset. Esto significa que el archivo CSS será agregado después de los archivos CSS de yii\bootstrap\BootstrapAsset.
  • El último argumento especifica un ID que identifica al archivo CSS. Si no es provisto, se utilizará la URL del archivo.

Es altamente recomendable que ustilices asset bundles para registrar archivos CSS en vez de utilizar registerCssFile(). Utilizar asset bundles te permite combinar y comprimir varios archivos CSS, deseable en sitios web de tráfico alto.

Widgets de datos
Go to Top
Temas

Found a typo or you think this page needs improvement?
Edit it on github !