Code Monkey home page Code Monkey logo

jsnotepad-jq's Introduction

jsnotepad

Windows 记事本网页版

jsnotepad-jq's People

Contributors

wangding avatar

Stargazers

胡英杰 avatar  avatar carrot avatar czb avatar

Watchers

James Cloos avatar  avatar  avatar

jsnotepad-jq's Issues

实现主窗体布局

完成以下两个代码文件的编写:

  • index.html
  • main.css
  • favicon.ico

要求:

  • 响应式布局
  • 布局尺寸和 Windows Notepad 窗口尺寸相同
  • 界面字体、字号跟 Window Notepad 保持一致

实现菜单栏

包括以下任务:

  • 存储菜单信息的数据结构
  • 菜单的 HTML 结构
  • 菜单的样式

项目初始化

需要完成以下工作:

  • 添加项目配置文件
  • 添加各种 dot File
  • 创建目录结构
  • 初始文件可以暂时为空
  • 模块化以及文件命名规范

界面原型

Notepad 界面原型

主窗体

Windows Notepad 程序的窗口界面,包括三部分:菜单栏、主窗口和状态栏,如下图所示:

notepad-main-window

菜单栏

其中,菜单栏包括:文件、编辑、格式、查看和帮助,每个菜单栏的下拉菜单项如下图所示:

notepad-menu

文件菜单

文件菜单栏的下拉菜单中,负责文件新建、保存功能,以及打印相关功能。其中,打开、保存、和另存为菜单项弹出相应的对话框,对话框除了标题不同,对话框的布局和内容基本相同,如下图所示,

notepad-open-dialog

页面设置菜单项弹出页面设置对话框,如下图所示:

notepad-page-set-dialog

打印菜单项弹出打印对话框,如下图所示:

notep-print-dialog

编辑菜单

编辑菜单栏的下拉菜单中,负责文本编辑相关的功能。其中,查找菜单项弹出查找对话框,如下图所示:

notepad-find-dialog

替换菜单项弹出替换对话框,如下图所示:

notepad-replace-dialog

转到菜单项弹出转到对话框,如下图所示:
notepad-goto-dialog

格式菜单

格式菜单栏的下拉菜单,设置自动换行和字体,其中字体菜单项弹出字体设置对话框,如下图所示:

notepad-font-dialog

查看菜单

查看菜单栏的下拉菜单只有一个菜单项:状态栏,这个菜单项设置是否显示状态栏。当然,还有一个前提,格式菜单的自动换行如果启用,状态栏是不能显示的,所以如果自动换行启用,这个状态栏菜单项是禁用状态。

帮助菜单

主要是 Notepad 的帮助信息,以及软件的关于对话框,关于对话框截图略。

其他

上下文菜单

在 Notepad 主窗口上点击鼠标右键有一个浮动菜单,也称为上下文菜单或者快捷菜单,如下图所示:

notepad-context-menu

实现文本编辑窗口

要求:

  • 完成 HTML 文档结构
  • 设置文本编辑窗口样式
  • 文本编辑窗口大小跟随浏览器窗口大小变化

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.