漏刻有时数据可视化大屏核心框架模版更换前端模版操作(1)HTML文件分离及访问显示

简介: 漏刻有时数据可视化大屏核心框架模版更换前端模版操作(1)HTML文件分离及访问显示

准备步骤:

1、完成核心框架的安装;

2、准备前端HTML模版

(1)文件目录



(2)大屏效果



开始更换大屏:

1、index.html文件重命名为demo.html,并复制到dashboard/view/demo.html;

2、static目录下新建demo文件夹,并将模版css、images、js复制到static/demo/目录下;



已选择区域为新增模版的路径位置;

3、dashboard\controller\Index.php创建访问demo.html的方法;



  function demo()
  {
    global $CONF;
    $tpl      = new Smarty;
    $pagestpl = './' . DASH_BOARD . '/view/demo.html';
    if (!$tpl->isCached($pagestpl)) {
      $tpl->assign('title', $CONF['sys_name']);
      $tpl->assign('STATIC', 'static/demo/');
    }
    $tpl->display($pagestpl);
  }

      1、$pagestpl = ‘./’ . DASH_BOARD . ‘/view/demo.html’ 大屏前端文件路径                       为/view/demo.html

      2、$tpl->assign(‘STATIC’, ‘static/demo/’); 前端文件的css、js、images路径为static/demo/

4、修改dashboard\view\demo.html文件中静态文件中的路径为3种的赋值路径;


20191207155537340.png

    <meta charset="utf-8">
    <title>大数据统计展示大屏</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <link href="css/index.css" rel="stylesheet" />

修改为

  <head>
    <meta charset="utf-8">
    <title>{$title}</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="{$STATIC}css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="{$STATIC}js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="{$STATIC}js/bootstrap.min.js"></script>
    <link href="{$STATIC}css/index.css" rel="stylesheet" />
  </head>
  <body>
    <header>{$title}</header>



保存文件,关闭即可。

**访问:**http:/你的域名/index.php?m=Index&a=demo,即可实现前端静态文件的更换

相关文章
|
13天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
41 9
|
15天前
HTML 框架2
iframe标签用于在当前页面中嵌入另一个HTML页面。通过设置frameborder属性为&quot;0&quot;,可以移除iframe边框。iframe的src属性用于指定要嵌入的页面URL。例如,使用`&lt;iframe src=&quot;https://www.runoob.com&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;`可以无边框地显示RUNOOB.COM页面。
|
7天前
|
前端开发 JavaScript API
前端界的秘密武器:掌握这些框架,让你轻松秒杀99%的同行!
前端开发日新月异,掌握几个明星框架如React、Vue.js和Angular,不仅能让工作更得心应手,还能轻松超越同行。React以高效的虚拟DOM和组件化著称;Vue.js简洁易懂,灵活性高;Angular提供全面的解决方案,适合大型应用。此外,轻量级的Svelte也值得关注,其编译时处理设计提升了应用性能。掌握这些框架,结合深刻理解和灵活运用,助你在前端领域脱颖而出。
22 9
|
15天前
HTML 框架1
HTML框架允许在同一个浏览器窗口中同时显示多个页面。`&lt;iframe&gt;`标签用于嵌入其他网页,基本语法为 `&lt;iframe src=&quot;URL&quot;&gt;&lt;/iframe&gt;`。可以通过设置 `height` 和 `width` 属性来调整 iframe 的大小,例如:`&lt;iframe src=&quot;demo_iframe.htm&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;&lt;/iframe&gt;`。属性值可以是像素或百分比。
|
18天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
30 3
|
25天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
14天前
HTML 框架3
iframe 是一种在网页中嵌入另一个 HTML 页面的技术。通过设置 iframe 的属性,可以显示指定的目标链接页面。例如,可以使用 iframe 嵌入 RUNOOB.COM 网站。HTML 中的 `&lt;iframe&gt;` 标签用于定义内联框架。
|
3月前
|
监控 数据可视化 前端开发
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
|
5月前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
4月前
|
JavaScript 前端开发 Java
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)