在图表页上显示测量值
如果您有 Visio 标准版,可以通过使用字段,链接到形状的高度和宽度属性来显示形状的尺寸。有关使用域的详细信息,请参阅使用字段来保持当前显示的信息。
如果您有 Visio 专业版,您可以使用尺寸形状以显示大小。尺寸形状显示他们正在粘附到,并且原始形状调整文字时自动更新该形状的大小。
尺寸形状包含在一些模板内,并可以在任何模板打开尺寸度量模具。
若要打开尺寸度量模具
在“形状”窗口中,单击“更多形状”。
指向其他 Visio 方案,,然后单击尺寸度量-建筑或尺寸度量-工程。
将尺寸形状拖动到要测量的形状,然后将尺寸线形状的端点粘附到要测量的点。
注意: 若要更改度量单位,右键单击尺寸形状,然后单击快捷菜单上的精度和单位。
示例
如果您有 Visio 专业版,请按下列步骤将指导您如何使用尺寸形状的示例。
使用尺寸形状 (示例)
单击文件选项卡,单击新建,单击类别,单击地图和平面布置图,然后双击家居规划。
单击庭园附属设施模具的标题栏和混凝土通道形状拖到绘图页。
您可能需要滚动以找到该模具或其他人的模具下的列表。
拖动手柄以扩大此混凝土通道形状上。
单击尺寸度量-建筑模具的标题栏并将水平形状拖到绘图页上通道形状上方。
如果看不到此列表中的模具,请按照上述过程,以打开尺寸度量模具中的说明进行操作。
请将形状手柄右侧的水平尺寸形状拖到通道形状的右边缘,直至绿色框中显示指示形状粘附在一起。
将水平形状左侧的形状手柄拖到通道形状的左边缘。
拖动黄色菱形 ( ),拖移到通道上方的位置右侧以便尺寸线不会遮住通道形状。
官网示例 | 国内示例 | ||
Metronic | 收费 | 最新 | |
Unify | 收费 | ||
Angulr | 收费 | Angular HTML | 本站 Angular v2.2.0 本站 HTML v2.2.0 |
AdminLTE | 免费开源 | 最新 | 本站 v2.4.2 |
Color Admin | 收费 | 最新 | |
更多 …… |
浏览示例前,将以下域名的重定向加入到 hosts 中可以加快页面的打开速度:
127.0.0.1 fonts.googleapis.com
127.0.0.1 ajax.googleapis.com
127.0.0.1 player.vimeo.com
127.0.0.1 www.vimeo.com
收录了一些个人觉得不错的网页开发插件。
由于插件更新频繁,本页如有错误请指正,也欢迎告知更多功能强大、使用方便的插件。
插件 | 简介 | 备注 |
框架 | ||
jQuery | 最流行的 JS 框架 | 下载、中文文档、英文整合文档、中文整合文档,浏览器支持、来自 css88 的文档 官方建议 IE 6-8 使用 1.12.4 |
Angular、中文版 AngularJS (version 1.x) | 一套框架,多种平台同时适用手机与桌面 | MVC 架构,使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易 |
Vue.js | 是一套用于构建用户界面的渐进式框架。 | |
Bootstrap、中文版 | 简洁、直观、强悍的前端开发框架 | 英文文档、v3中文文档、v2中文文档、视频教程,主题和模板 |
jQuery UI | 为 jQuery 提供更丰富的功能 | 示例:Datepicker、Color Animation、Shake Effect |
功能 | ||
jQuery File Upload | jQuery 文件上传 | 英文文档 |
jQuery Cookie | 读取、写入和删除 cookie | 浏览器支持,文档 |
json2.js | json 操作库 | 已弃用,旧 IE 用 jQuery 的 parseJSON,HTML 5 用 JSON.parse |
Lightbox | 老牌图片浏览插件 推荐使用更强大的 Viewer.js | |
Swiper、中文版 | 最现代的移动触摸滑块(Most Modern Mobile Touch Slider) | 英文文档,中文文档,旧浏览器支持版本:2.x.x,Swiper 2 英文文档,中文文档 |
jquery-cropper | 图片裁剪 | |
FastClick | 用于消除手机浏览器上触摸事件触发之间的 300 毫秒延迟 | 用法,不应用的场景 |
PACE | 页面加载进度条 | 文档,IE8+ |
toastr | jQuery 通知 | 文档 |
Autosize | 一款小巧的,可自动调整 textarea 高度的独立脚本 | IE9+ |
X-editable | 允许您在页面上创建可编辑元素 | 文档,Demo |
select2 | 一款提供搜索过滤、自定义样式的下拉框插件 | |
jQuery Tags Input | 标签输入框 | 用法 |
Viewer.js | 图片浏览插件 | GitHub(viewerjs)、GitHub(jquery-viewer) jquery-viewer 是 viewerjs 的 jQuery 插件,即在 jQuery 环境中要同时引用这两个脚本。 |
PDF.js | A general-purpose, web standards-based platform for parsing and rendering PDFs. | |
编辑器 | ||
UEditor | 百度在线编辑器 | GitHub 下载、文档、ASP.NET 部署教程 |
日期时间 | ||
bootstrap-datepicker | Bootstrap 日期选择器 | Online Demo |
DateTimePicker | 日期时间选择 | |
MultiDatesPicker | 多日期选择 | |
FullCalendar | 日历日程事件工作表 | IE 9+, jQuery 2.0.0+ |
TimeTo | 计时、倒计时 | |
图表 | ||
D3.js | D3.js 是基于数据驱动文档工作方式的一款 JavaScript 函数库,主要用于网页作图、生成互动图形,是最流行的可视化库之一。 | |
Highcharts、中文版 | 兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库 | 文档 |
ECharts | 百度图表控件 | |
AntV | 来自蚂蚁金服的专业、简单、无限可能的可视化解决方案 G2 - 专业易用的可视化类库 G2-mobile - 移动端高性能可视化类库 G6 - 关系图可视化类库 | 流程图, 关系图, 可视化规范, 地图, 河流图, 力导图, 网络图, UML图, 业务流程图, 时序图 |
SyntaxHighlighter | 功能齐全的代码语法高亮插件(JS) | |
动态排名数据可视化 | 将历史数据排名转化为动态柱状图图表 开源代码,非插件,修改使用 | GitHub、视频教程、EV录屏、网页示例、视频效果 |
图标 | ||
Font Awesome | 完美的图标字体 | IE 8+,v3.2.1 支持 IE 7,进阶用法(定宽/边框/动画/旋转/叠加) |
Glyphicons | 图标字体 | 作为 Bootstrap 组件 |
Iconfont | 阿里巴巴矢量图标库 | 用户可以自定义下载多种格式的 icon,也可将图标转换为字体,便于前端工程师自由调整与调用 |
UI 框架 | ||
WeUI | 同微信原生视觉体验一致的基础样式库 | Demo、Wiki |
Apple UI Design Resources | 苹果用户界面设计资源 |
编者按:本文作者 Nick Babich 在文中介绍了几种 “提高” 加载速度的方法。
当我们设计产品的时候,我们没有办法模拟不同的加载速度。因此如果用户等待太长的时间才能看到内容,并不是我们特意的安排。
网速不稳定,尤其是当我们加载图片或音乐时,时间会较长。在这种情况下,我们不得不考虑在这种间隙向用户展示什么内容才能让他们感觉不枯燥。
加载动图(Spinner)效果不佳
加载 Spinner 并不是暗示加载或思考的正确方式。默认加载图标(例如 iOS 的加载动画效果是从中心点辐射的灰色线条)通常具有消极的含义。它们应用于多种操作系统功能之中,包括设备启动、连接到网络或者加载数据。
人们讨厌只看到加载 Spinner,但是却看不多进度或时间。让用户盯着一个下载进度条或者旋转圈会让跳出率提高。
不确定的等待时间比已知的、有限的等待时间让人觉得更长。你应该给你的用户一个清晰地等待时间。
进度条可以告诉用户这个过程需要花费多长时间,但是一般不太正确。你可以通过一些方法隐藏过程中的延迟,例如你可以在开始的时候让速度显示地快一点,在结尾的时候,显示速度慢一点。进度条不应该中断,否则用户就会认为这个 App 卡住了。
后台操作
在后台操作中包含行为有两个优点——用户可见;在用户真正发出请求时就会加载完毕。当程序在后台运营时,给用户呈现一些其他的内容。一个很好的案例是在 Instagram 中加载图片。用户一旦选择想要分享的图片,就开始加载。
在后台加载图片的过程中,Instagram 邀请用户添加标题和标签,当用户准备按 “分享” 键时,加载过程就完成了,这时候就可以立刻分享图片了。
仿真内容和 Placeholder(占位符)
如果你无法缩短加载时间,那么你应该试图让用户在等待中更高兴一点。可以利用这个时间显示一些临时的信息。为了提高用户的参与度,可以使用仿真内容作为文本和图片。
几点小建议:
1、加载屏幕不应该太亮。不需要太吸引眼球。Facebook 的灰色 Placeholder 就是一个很好的例子。当加载内容时使用模板元素,让用户熟悉将要加载的内容的整体结构。
2、如果要加载图片,你可以在 placeholder 中使用加载图片的主色调。Medium 的图片加载效果比较好。首先加载一个小型的模糊图片,然后转化成一个清晰的大图片。
使用 placeholder 和仿真内容并没有加快加载过程,但是在用户眼中加载速度好像变快了。
分散用户的注意力
为了不让用户在等待时感到枯燥,可以适当分散他们的注意力。你可以使用一些有趣的、始料未及的东西吸引用户的注意力,为 App 加载赢得充足的时间。
动画片可以分散访客的注意力,让他们忽略加载时间。
结论
用户讨厌等待,如果你让用户觉得他们没有等待,那么他们就会喜欢你的 App。一定要让用户觉得 App 的加载时间比他预计的短。
可以创建实现模板的用户控件,这是 ASP.NET 的一项功能,它允许将控件数据与其表示形式相分离。模板化控件不提供用户界面。编写它则是为了实现一个命名容器以及包含属性和方法可由宿主页访问的类。
用户控件的用户界面由页面开发人员在设计时提供。开发人员创建由用户控件定义的类型模板,然后可以向模板添加控件和标记。
创建模板用户控件
-
在 .ascx 文件中,添加要在其中显示模板的 ASP.NET PlaceHolder 控件。
-
在用户控件的代码中,实现 ITemplate 类型的属性。
-
将实现 INamingContainer 接口的服务器控件类定义为要在其中创建模板实例的容器。此容器叫做模板的命名容器。
说明: 此控件实质上成了用户控件的嵌套类,但这不是必需的。
-
将 TemplateContainerAttribute 应用于实现 ITemplate 的属性 (property),并将模板命名容器的类型作为参数传递给属性 (attribute) 的构造函数。
-
在控件的 Init 方法中,将以下步骤重复一次或多次:
-
创建命名容器类的一个实例。
-
在命名容器中创建该模板的一个实例。
-
将命名容器实例添加到 PlaceHolder 服务器控件的 Controls 属性。
说明: 从使用用户控件的页面的角度来看,模板化用户控件的语法与自定义模板化控件的语法相同。
-
下面的示例演示一个模板化用户控件和一个包含该控件的页面。该用户控件创建一个可在宿主页上声明为 <MessageTemplate> 的模板。该模板控件还公开两个可由宿主页在模板内访问的属性:Index 和 Message。
第一个示例显示模板化用户控件。第二个示例显示包含该用户控件的页面。
<%@ Control language="VB" ClassName="TemplatedUC" %> <%@ Import Namespace="System.ComponentModel" %> <script runat="server" > Private m_messageTemplate As ITemplate = Nothing <TemplateContainer(GetType(MessageContainer))> _ <PersistenceMode(PersistenceMode.InnerProperty)> Public Property _ MessageTemplate() As ITemplate Get Return m_messageTemplate End Get Set(ByVal value As ITemplate) m_messageTemplate = Value End Set End Property Sub Page_Init() If Not (MessageTemplate Is Nothing) Then Dim i As Integer Dim fruits() As String = _ {"apple", "orange", "banana", "pineapple"} For i = 0 To 3 Dim container As New MessageContainer(i, fruits(i)) MessageTemplate.InstantiateIn(container) PlaceHolder1.Controls.Add(container) Next i End If End Sub Public Class MessageContainer Inherits Control Implements INamingContainer Private m_index As Integer Private m_message As String Friend Sub New(ByVal i As Integer, ByVal msg As String) Me.Index = i Me.Message = msg End Sub Public Property Index() As Integer Get Return m_index End Get Set(ByVal value As Integer) m_index = value End Set End Property Public Property Message() As String Get Return m_message End Get Set(ByVal value As String) m_message = value End Set End Property End Class </script> <asp:Placeholder runat="server" ID="PlaceHolder1" />
<%@ Control language="C#" ClassName="TemplatedUC" %> <%@ Import Namespace="System.ComponentModel" %> <script runat="server"> private ITemplate messageTemplate = null; [ TemplateContainer(typeof(MessageContainer)) ] [ PersistenceMode(PersistenceMode.InnerProperty) ] public ITemplate MessageTemplate { get { return messageTemplate; } set { messageTemplate = value; } } void Page_Init() { if (messageTemplate != null) { String[] fruits = {"apple", "orange", "banana", "pineapple" }; for (int i=0; i<4; i++) { MessageContainer container = new MessageContainer(i, fruits[i]); messageTemplate.InstantiateIn(container); PlaceHolder1.Controls.Add(container); } } } public class MessageContainer: Control, INamingContainer { private int m_index; private String m_message; internal MessageContainer(int index, String message) { m_index = index; m_message = message; } public int Index { get { return m_index; } } public String Message { get { return m_message; } } } </script> <asp:Placeholder runat="server" ID="PlaceHolder1" />
<%@ Page Language="VB" %> <%@ Register TagPrefix="uc" tagname="TemplateTest" Src="TemplatedUC.ascx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html > <script runat="server"> Sub Page_Load() DataBind() End Sub </script> <head> <title>Templated User Control Test</title> </head> <body> <h1>Testing Templated User Control</h1> <form id="Form1" runat="server"> <uc:TemplateTest runat="server"> <MessageTemplate> Index: <asp:Label runat="server" ID="Label1" Text='<%# Container.Index %>' /> <br /> Message: <asp:Label runat="server" ID="Label2" Text='<%# Container.Message %>' /> <hr /> </MessageTemplate> </uc:TemplateTest> </form> </body> </html>
<%@ Page Language="C#" %> <%@ Register TagPrefix="uc" tagname="TemplateTest" Src="TemplatedUC.ascx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html > <script runat="server"> protected void Page_Load() { DataBind(); } </script> <head> <title>Templated User Control Test</title> </head> <body> <h1>Testing Templated User Control</h1> <form id="Form1" runat="server"> <uc:TemplateTest runat="server"> <MessageTemplate> Index: <asp:Label runat="server" ID="Label1" Text='<%# Container.Index %>' /> <br /> Message: <asp:Label runat="server" ID="Label2" Text='<%# Container.Message %>' /> <hr /> </MessageTemplate> </uc:TemplateTest> </form> </body> </html>
安装ASP.NET AJAX
安装Toolkit:
下载解压AjaxControlToolkit.zip移至
C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\AjaxControlToolkit
安装模板C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\AjaxControlToolkit\AjaxControlExtender\AjaxControlExtender.vsi
若安装失败,手工建立以下文件夹:
\My Documents\Visual Studio 2005\Templates\ItemTemplates\Visual C#
\My Documents\Visual Studio 2005\Templates\ItemTemplates\Visual Basic
\My Documents\Visual Studio 2005\Templates\ProjectTemplates\Visual C#
\My Documents\Visual Studio 2005\Templates\ProjectTemplates\Visual Basic
把SampleWebSite\Bin下的AjaxControlToolkit.dll和AjaxControlToolkit.pdb
复制至Binaries下。
打开VS,添加选项卡AjaxControlToolkit,添加项浏览至Binaries\AjaxControlToolkit.dll