仿微软Office 迷你工具条（简易编辑器）

最新推荐文章于 2020-09-15 11:21:36 发布

原创最新推荐文章于 2020-09-15 11:21:36 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Office #jQuery #Microsoft #UP #ViewUI

Javascript /Jquery / Bootstrap / Web 专栏收录该内容

434 篇文章

订阅专栏

本文介绍如何利用jQuery和CSS3技术实现类似Microsoft Office 2007中的迷你栏功能。该迷你栏会根据用户的文本选择情况出现在鼠标附近，提供如加粗、斜体等快速操作选项。

源自： http://www.jankoatwarpspeed.com/post/2010/05/23/microsoft-office-minibar-jQuery-CSS3.aspx

Why and how to create Microsoft Office Minibar with jQuery and CSS3

Although many will argue that Microsoft products are an example of a good design, Minibar was one of design refreshments that came out with the Office 2007. It is a variation of a toolbar that exposes context-related functionality . In case of MS Word, context is a text selection. Since Minibar always pops up near the mouse pointer it enables users to quickly perform actions related to a selection.

Check out demo

So how it works? When user makes a selection in input field Minibar pops up, semi-transparent, above the selection. When user hovers the Minibar it fades out. It disappears when user clicks anywhere in the input field or performs an action by clicking on a Minibar button.

Quite simple Minibar will be shown in this tutorial - it has only bold , underline , italic , and link buttons.

具体情况附件：