关于 Solo 前端页面的小问题

本贴最后更新于 2960 天前,其中的信息可能已经时移世易

1. 关于后台管理页面中 tabsPannel 标签下的问题

1. 代码背景
Solo 前端源码中后台管理里面统一是以 admin-index.ftl 为主页面,而其他功能(文章、用户)则分开放在其他 flt 文件中,通过异步来加载其他功能页面

2. 我们先简单回顾下代码的思路
整体设计如下 : (帮助您回想下,嘿嘿)

<div id="tabsPanel"> <div id="tabsPanel_main" class="none"> <div id="tabsPanel_article" class="none"> <div id="tabsPanel_article-list" class="none"> <div id="tabsPanel_draft-list" class="none"> <div id="tabsPanel_link-list" class="none"> <div id="tabsPanel_preference" class="none"> <div id="tabsPanel_page-list" class="none"> <div id="tabsPanel_others" class="none"> <div id="tabsPanel_user-list" class="none"> <div id="tabsPanel_comment-list" class="none"> <div id="tabsPanel_plugin-list" class="none"> <div id="tabsPanel_about" class="none">

然后我们通过调用 Jquery 的 load 方法来加载上面的子模块页面:比如加载 admin-user-list.ftl 页面

$("#tabsPanel_" + tab).load("admin-" + tab + ".do", function () { // 页面加载完后,回调初始函数 if (tab === "article" && admin.article.status.id) { // 当文章页面编辑器未初始化时,调用更新文章需先初始化编辑器 admin.register[tab].init.call(admin.register[tab].obj, admin.article.getAndSet); } else { admin.register[tab].init.call(admin.register[tab].obj, tags.page); } // 页面包含子 tab,需根据 hash 定位到相应的 tab if (subTab) { $("#tab" + tab.substring(0, 1).toUpperCase() + tab.substring(1)). tabs("setCurrent", subTab); } // 根据 hash 调用现有的插件函数 admin.plugin.setCurByHash(tags); });

最后 load 方法会把服务器中得到的数据插入到 id 为 tabsPanel_user-list 的 div 标签下。

3. 那么问题是
为什么 load 方法加载完页面后, <div id="tabsPanel_user-list" class="none"> 的属性会从 display:none 变成 display: block,如果自己在加一个新的 div 标签 <div id="tabsPanel_user-new" class="none"> 即使在 load 完页面后,属性依旧是 display:none

2. admin.min.js 的问题确认(续 Github 上的提问

管理后台依赖的 JS 压缩合并 —— 意思就是:把那些的依赖的 js 压缩成一个 min js 文件的意思吗?

@Vanessa

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • tianxin
    作者

    @Vanessa 这样能 @ 到吗~

  • 收到了。稍等一下下

  • Vanessa 1 via macOS

    1.3 . 你后台的 .do 请求要返回正常才会回调 function 里面的方法去设置 tab. 你先查看一下 admin-user-new.do 请求是否正常,js 里面的 $("#tabs").tabs("setCurrent", tab); 方法是否调用正常

    2 . 嗯,减少请求数

    BTW: at 前后需要加空格。

    1 回复
  • tianxin
    作者

    原来控制 属性 display 的 none 和 block 是 tabs 方法来控制的。已经解决该问题了。

    1. tabs 方法是在 jquery.bowknot.min.js 里实现的。jquery.bowknot.min.js 库的主要用途是干什么呢?
    1 回复
  • 年轻时候自己造的 jQuery 插件的轮子

tianxin
不会前端的后台工程师不是一个好厨师。所以,我的理想是成为一个吃遍天下美食的好厨师。 广州

推荐标签 标签

  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 3 关注
  • Access
    1 引用 • 3 回帖 • 2 关注
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 7 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 650 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖 • 1 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    124 引用 • 74 回帖
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    99 引用 • 367 回帖
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 177 关注
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    6 引用 • 26 回帖 • 548 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 702 关注
  • 反馈

    Communication channel for makers and users.

    126 引用 • 930 回帖 • 270 关注
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用(如 Word、Excel 和 PowerPoint)与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起,可帮助你在任何设备上完成操作。

    5 引用 • 34 回帖 • 1 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 740 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 76 回帖
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 677 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 20 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 391 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖 • 4 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖 • 2 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1742 回帖
  • CodeMirror
    2 引用 • 17 回帖 • 158 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    66 引用 • 114 回帖 • 196 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 782 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    21 引用 • 204 回帖
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 643 关注