第七讲：ViewPort和TabPanel
Panel控件的使用
Panel控件的使用在Visual Studio中，我们可以通过拖拽和放置的方式将Panel控件添加到窗体上。
Panel控件具有一些常用的属性，下面我将说明几个常用的属性及其用法。
1. BackColor：设置Panel控件的背景颜色。
```panel1.BackColor = Color.LightGray;```2. BorderStyle：设置Panel控件的边框样式。
```panel1.BorderStyle = BorderStyle.FixedSingle;```3. Padding：设置Panel控件的内边距，即控件与边框的距离。
```panel1.Padding = new Padding(10);```4. AutoScroll：设置Panel控件是否自动显示滚动条。
```panel1.AutoScroll = true;5. Dock：设置Panel控件在父容器内的停靠方式。
```panel1.Dock = DockStyle.Fill;```6. Controls：通过该属性可以访问Panel控件中包含的其他控件。
```Button button1 = new Button(;button1.Text = "Button";panel1.Controls.Add(button1);```1.方法- BringToFront：将Panel控件移动到Z顺序的前面。
```panel1.BringToFront(;```- SendToBack：将Panel控件移动到Z顺序的后面。
```panel1.SendToBack(;2.事件- Click：当用户单击Panel控件时发生。
```panel1.Click += Panel_Click;private void Panel_Click(object sender, EventArgs e) MessageBox.Show("Panel被点击了！");```- MouseEnter：当鼠标进入Panel控件时发生。
Maya常用快捷键
Maya常用快捷键一、主用户界面快捷键主用户界面命令快捷键Numeric Expression Evaluator（数字表达式求值）注：在用快捷键激活此命令之前，光标一定要在数字输入框中，这样才可以调出数字表达式求值窗口，且此快捷键不可以自定义。
CTRL+NAdaptive Degradation Toggle（显示自适应标记开关） O（字母）Lock User Interface Toggle（锁定用户界面开关） ALT+0（数字）Align（对齐） ALT+ANormal Align（法线对齐） ALT+NPlace Highlight（放置高光） CTRL+HSpacing Tool（间距工具） SHIFT+IAngle Snap Toggle（角度捕捉开关） ASnap Percent Toggle（百分比捕捉开关） SHIFT+CTRL+PSnap Toggle（捕捉开关） SSnaps Cycle（循环捕捉） ALT+SAnimate Mode ToggleAuto Key Toggle（自动添加关键帧动画模式开关） NGo to End Frame（到结束帧） ENDGo to Start Frame（到开始帧） HOMEBackup Time One Unit（向前移动一帧），Forward Time One Unit（向后移动一帧） .Set Key Mode（设置关键帧模式） 'Set Key（设置关键帧） KPlay Animation（播放动画） /Sound Toggle（声音开关） \Background Lock Toggle（背景锁定开关） ALT+CTRL+BBottom View（底视图） BCamera View（摄影机视图） CFront View（前视图） FLeft View（左视图） LDisable Viewport（非活动视图） DIsometric User View（用户视图） UPerspective User View（透视图） PTop View（顶视图） TSpot/Directional Light View（聚光灯/平行光灯视图） SHIFT+4Delete Objects（删除物体） DELETEOpen File（打开文件） CTRL+O（字母）New Scene（新建场景） CTRL+NSave File（存储文件） CTRL+SHold（暂存） ALT+CTRL+HFetch（恢复至最后一次暂存状态） ALT+CTRL+FExpert Mode（专家模式） CTRL+XUndo Scene Operation（撤消场景操作） CTRL+ZRedo Scene Operation（重做场景操作） CTRL+YSmart Select（选择模式） Q注：当选择按钮被激活后再按Q键为循环选择Fence Selection Region（围栏式选择区域）方式。
什么是Viewport
什么是Viewport什么是Viewport⼿机浏览器是把页⾯放在⼀个虚拟的“窗⼝”（viewport）中，通常这个虚拟的“窗⼝”（viewport）⽐屏幕宽，这样就不⽤把每个⽹页挤到很⼩的窗⼝中（这样会破坏没有针对⼿机浏览器优化的⽹页的布局），⽤户可以通过平移和缩放来看⽹页的不同部分。
移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让⽹页开发者来控制 viewport 的⼤⼩和缩放，其他⼿机浏览器也基本⽀持。
Viewport 基础⼀个常⽤的针对移动⽹页优化过的页⾯的 viewport meta 标签⼤致如下：<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>width：控制 viewport 的⼤⼩，可以指定的⼀个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的CSS 的像素）。
height：和 width 相对应，指定⾼度。
initial-scale：初始缩放⽐例，也即是当页⾯第⼀次 load 的时候缩放⽐例。
maximum-scale：允许⽤户缩放到的最⼤⽐例。
minimum-scale：允许⽤户缩放到的最⼩⽐例。
user-scalable：⽤户是否可以⼿动缩放关于viewport的⼀些问题viewport并⾮只是ios上的独有属性，在android、winphone上同样也有viewport。
它们要解决的问题是相同的，即⽆视设备的真实分辨率，直接通过dpi，在物理尺⼨和浏览器之间重设分辨率，这个分辨率和设备的分辨率⽆关。
⽐如，你拿个3.5⼨-320 * 480的iphone3 gs、3.5⼨-640 * 960的iphone4或者9.7⼨-1024*768的ipad2，虽然设备的分辨率不同,物理尺⼨也不同，但你可以通过设置viewport让它们在浏览器⾥有相同的分辨率。
详解VC++中的窗口与视口
详解VC++中的窗口与视口作者：郝婕来源：《创新科技》 2013年第5期郝婕（湖北工业大学，湖北武汉430068）在VC++的学习中，窗口（Window）与视口（Viewport）一向是初学者较难理解的难点，也是容易混淆的地方，本文从多个方面讲述VC++中窗口与视口的异同，以方便读者更准确，更全面的掌握窗口与视口的相关知识，为计算机绘图带来便利。
基于VC++的GDI常用坐标系统数据显示和图形绘制都需要在相应的坐标系中才能精确完成。
在计算机绘图中，常用的坐标系分为设备坐标和逻辑坐标两种。
1.设备坐标设备坐标是与设备高度相关的坐标，在VC++中的设备坐标系统中，单位用的是像素点，X值从左到右增大，Y值从上到下增大。
为满足各种不同需要，在VC++中又细分了以下3种设备坐标（1）全窗口坐标。
主要包括Windows程序中的窗口、滚动条、窗口框、标题条、菜单等。
在将逻辑单位转换成窗口坐标的过程中，可以通过GetWindowDC函数获取窗口设备环境。
（2）屏幕坐标。
范围包括整个显示器屏幕，屏幕的左上角为（0，0）。
屏幕坐标和全窗口坐标包括的对象是不一样的，屏幕坐标包含的对象是硬件外部设备，全窗口坐标包含的对象是Windows程序软件。
（3）客户区域坐标。
指Windows 应用程序的客户区域，客户区域的左上角为（0，0）。
屏幕区域坐标和客户区域坐标相互转换的函数为ScreenToClien和ClientToScreen。
2.逻辑坐标逻辑坐标不依赖于于设备，即它与设备的类型无关，也与设备具体的点阵密度大小无关。
在逻辑坐标中使用逻辑单位，计算机绘图中GDI函数LineTo在画出直线的时候，用户是不需要考虑输出设备的相关参数的。
窗口和视口数据显示和图形绘制并不是直接在屏幕上进行的，而是首先将图形绘制到一个具有逻辑坐标系的虚拟窗口中，然后再根据预先设置好的映射模式，将虚拟窗口中的图形或图像映射到屏幕或打印机等设备中。
这个虚拟的窗口被称作窗口（window）。
viewport 适配方案
viewport 适配方案在移动设备上进行网页开发时，一个重要的考虑因素就是如何适配不同尺寸的屏幕。
为了解决这个问题，我们可以使用viewport适配方案。
本文将介绍viewport适配方案的原理和实现方法。
一、viewport的概念viewport是一种虚拟的可视区域，用来显示网页内容，它的尺寸可以根据设备的屏幕尺寸来动态调整。
在移动设备上，默认的viewport宽度是980px，这样就导致了在较小屏幕上显示时，页面会缩小，文字和元素会变得很小，不便于用户阅读和操作。
二、viewport适配方案的原理viewport适配方案的核心是通过meta标签来改变viewport的宽度。
通过在页面的<head>标签中添加如下的meta标签，可以设置viewport的初始尺寸和缩放比例：```html<meta name="viewport" content="width=device-width, initial-scale=1.0">```其中，width=device-width表示将viewport的宽度设置为设备的宽度，initial-scale=1.0表示初始的缩放比例为1.0，即不进行缩放。
三、实现viewport适配方案为了实现viewport适配方案，我们需要在CSS中做一些调整。
首先，我们要将所有元素的宽度设置为相对单位，比如百分比或者rem。
这样，在不同屏幕尺寸下，元素的宽度会自适应调整。
另外，我们还需要对字体大小进行适配。
可以使用媒体查询来设置不同屏幕尺寸下的字体大小，或者使用rem单位来设置字体大小。
rem单位是相对于根元素（即<html>标签）的字体大小进行计算的，这样可以实现字体大小的适配。
除了设置元素宽度和字体大小外，我们还可以使用CSS媒体查询来对不同屏幕尺寸应用不同的样式。
这样，可以根据屏幕尺寸的不同，展示不同的布局和样式，从而提供更好的用户体验。
viewport 适配方案
viewport 适配方案移动设备的兴起使得网页设计和开发变得更加复杂，因为不同设备有不同的屏幕尺寸和分辨率。
为了确保网站在各种设备上有良好的显示效果，开发人员需要采取一种适配方案。
其中，viewport 适配方案是一种常见且有效的解决方案。
什么是viewport？在移动设备上，viewport是用户所能见到的页面区域。
通常，viewport的宽度比设备的屏幕宽度要小。
这是因为在移动设备上，页面可能难以在整个屏幕上显示完全，需要用户通过滚动来浏览整个页面。
为什么需要viewport适配方案？不同设备具有不同的viewport宽度和设备像素比（device pixel ratio，简称DPR），使得页面在不同设备上的显示效果有差异。
如果不对页面进行适配，可能会导致页面在某些设备上出现排版错乱、字体模糊等问题。
因此，viewport适配方案的出现，就是为了解决这些兼容性问题。
常见的viewport适配方案：1. 固定宽度方案：通过设置viewport的宽度为固定值，如320px、375px等，来适配不同设备的屏幕宽度。
这种方案适用于不需要响应式布局的简单网站，但对于复杂的网站来说，可能无法满足不同设备的需求。
2. 百分比方案：通过设置viewport的宽度为百分比值，如100%，来自动适配不同设备的屏幕宽度。
这种方案可以实现简单的响应式布局，但在处理特定设备和特定样式时可能不够灵活。
3. rem单位方案：rem（root em）是相对根元素（html）字体大小（font-size）的单位。
通过设置根元素的字体大小，来间接控制页面元素的尺寸。
这种方案可以根据设备的屏幕大小和字体大小进行自适应，适用于不同尺寸的设备。
4. 使用meta标签：在HTML的头部使用meta标签来设置viewport的属性。
例如：<meta name="viewport" content="width=device-width, initial-scale=1.0">。
qt viewport 视口概念
qt viewport 视口概念Qt是一款功能强大的跨平台开发框架，提供了一系列用于创建图形用户界面（GUI）的工具和框架。
其中的viewport视口是在Qt中经常被用到的功能，是Qt GUI程序中一个非常重要的概念。
下面就来详细介绍一下。
1. 什么是Qt视口概念？QT中的视口（Viewport）是Qt GUI程序中用来显示内容的部件的一个属性，是指一个矩形区域，用来描述由一个窗口中可以看到的一部分。
也可以说，Qt中的Viewport就是一个可视区域，用于限定你看到的内容并进行自动滚动等操作。
2. 如何设置视口？以QTextEdit类为例，我们可以通过setViewportMargins方法来设置视口。
下面是一个简要的示例：```pythonfrom PyQt5.QtWidgets import QApplication, QTextEdit, QVBoxLayout, QWidgetapp = QApplication([])window = QWidget()# 创建文本编辑框editor = QTextEdit()layout = QVBoxLayout(window)layout.addWidget(editor)# 设置视口大小editor.setViewportMargins(10, 10, 10, 10)window.show()app.exec()```代码中，我们通过setViewportMargins方法来设置编辑框的视口大小。
注意：在setViewportMargins中，参数顺序分别代表顶部、右侧、底部、左侧多余空白的大小。
3. Qt视口的自动滚动操作除了设置视口大小之外，Qt中的视口还具有自动滚动的功能。
当视图（View）对象得到焦点时，视口会跟随视图滚动。
而当不再获得焦点时，则不再滚动。
我们也可以使用QAbstractScrollArea类中的scrollContentsBy函数对视口进行滚动控制。
CSS——viewport视口及设置
CSS——viewport视⼝及设置
⼀、viewport视⼝
在移动端，viewport视⼝就是浏览器显⽰页⾯内容的屏幕区域。
viewport视⼝有两种视⼝，分别是 visual viewport(可视视⼝)和layout viewport(布局视⼝)： （1）visual viewport固定⼤⼩跟屏幕⼤⼩相同，在上⾯；
（2）layout viewport可改变⼤⼩，在下⾯。
layout viewport默认⼤⼩为980像素，可通过document.documentElement.clientWidth获取
现代⽹页需要把layout viewport设置成visual viewport同等⼤⼩，⽅便⽹页制作。
⼆、viewport设置
通过meta标签进⾏设置，name属性指定viewport值，content属性进⾏视⼝配置
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" /> 取值：
width 设置layout viewport宽度的特定值，device-width表⽰设备宽。
height 设置layout viewport⾼度特定值，⼀般不进⾏设置。
initial-scale 设置页⾯的初始缩放
minimum-scale 设置页⾯的最⼩缩放
maximum-scale 设置页⾯的最⼤缩放
user-scalable 设置页⾯能否进⾏缩放。
进阶篇(5)-ExtJs中的TabPanel组件详解
ExtJs版国讯教育通用智能OA办公平台
进阶篇(5)-ExtJs中的TabPanel组件详解
讲师：风舞烟
TabPanel组件简介 简单代码示例 使用iframe作为tab的标签页内容 动态添加tabpanel的标签页 为tabpanel标签页添加右键菜单
Html代码： <div> <a href="javascript:void(0)" onclick="parent.frames['mainFrame'].location='http://w '">换成博客园</a> <iframe id="mainFrame" name="mainFrame" src="" frameborder="0" height="500px" width="100%" ></iframe> </div>
js代码: Ext.onReady(function(){ var tabsDemo=new Ext.TabPanel({ renderTo:Ext.getBody(), activeTab:0, height:700,//当用viewport布局时,这个height可以省去 frame:true, items:[{ contentEl:"mainFrame", tabTip:"fengjian", title:"加载页面的标签页", closable:true }] }); });
2021年webappmobileweb开发入门
web appmobile web开发入门泽思网络上海APP开发商webapp/mobileweb开发入门基础知识篇摘自webkitwebApp开发技术要点总结viewport也就是可视区域。
对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。
由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;实际上我们可以操作的属性有4个width-//viewport的宽度（范围从200到10,000，默认为980像素）height-//viewport的高度（范围从223到10,000）initial-scale-//初始的缩放比例（范围从>0到10）minimum-scale-//允许用户缩放到的最小比例maximum-scale-//允许用户缩放到的最大比例user-scalable-//用户是否可以手动缩(no,yes)那么到底这些设置如何让Safari知道？其实很简单，就一个meta，形如//编码//离线应用的另一个技巧泽思网络上海APP开发商//隐藏状态栏//指定的iphone中safari顶端的状态条的样式//告诉设备忽略将页面中的数字识别为电话号码在设置了initial-scale=1之后，我们终于可以以1:1的比例进行页面设计了。
关于viewport，还有一个很重要的概念是iphone的safari浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”，是根本没有这个功能。
iphone的safari浏览器实际上从一开始就完整显示了这个网页，然后用viewport查看其中的一部分。
当你用手指拖动时，其实拖的不是页面，而是viewport。
浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样。
(请参考指尖的下JS系列文章)更多内容→发表于MobileWeb|标签:MobileWeb、webapp|2条回复webapp水平垂直滚动demo发表于201*年08月19日3先放个访问地址（请使用android/水果系列移动设备访问）用爪机可以直接扫这个二维码demo介绍泽思网络上海APP开发商横向滚动，置顶固定菜单；纵向滚动，支持滚动条；横屏竖屏宽度自适应；载入自动隐藏地址栏；锁定viewport；滚动条在用户触屏的时候才显示，非触屏状态隐藏；锁定滚动方向，横向的时候不能竖向；（感谢qbaty协助优化体验）。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
title:'tab标签页'+index,
html :'tab标签页'+index+'内容',
closable :true//允许关闭
})
tabPanel.setActiveTab(tabPage);//设置当前tab页
}
});
ViewPort和TabPanel的综合例子。
<divclass='x-tab'title='tab标签页4'>tab标签页4内容</div>
</div>
<divclass='x-tab'title='tab标签页5'>tab标签页5内容</div>
</body>
</html>
Ext.onReady(function(){
vartabPanel =newExt.TabPanel({
applyTo:'hello'
});
});
示例四：动态添加选项页
Ext.onReady(function(){
vartabPanel =newExt.TabPanel({
height : 350,
width : 400,
activeTab : 0,//默认激活第一个tab页
animScroll :true,//使用动画滚动效果
<divclass='x-hide-display'title='tab标签页4'id="div4">tab标签页4内容</div>
</div>
<divclass='x-hide-display'title='tab标签页5'id="div5">tab标签页5内容</div>
</body>
</html>
{title:'tab标签页3',html :'tab标签页3内容'},
{title:'tab标签页4',html :'tab标签页4内容'},
{title:'tab标签页5',html :'tab标签页5内容'}
]
});
});
示例二：转换div为选项页
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
height : 150,
width : 300,
autoTabs :true,//自动扫描页面中的div然后将其转换为标签页
deferredRender :false,//不进行延时渲染
activeTab : 0,//默认激活第一个tab页
animScroll :true,//使用动画滚动效果
enableTabScroll :true,//tab标签超宽时自动出现滚动按钮
vartabPage = tabPanel.add({//动态添加tab页
title:'tab标签页'+index,
html :'tab标签页'+index+'内容',
closable :true//允许关闭
})
tabPanel.setActiveTab(tabPage);//设置当前tab页
}
});
{title:'tab标签页5',html :'tab标签页5内容'}
],
buttons : [
{
text :'添加标签页',
handler :addTabPage
}
],listeners:{
"contextmenu":function(tabPanel,myitem,e){
varmenu =newExt.menu.Menu([
<htmlxmlns="/1999/xhtml">
<head>
<title>TestPanel</title>
<scripttype="text/javascript"src="../Ext/adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="../Ext/ext-all-debug.js"></script>
Ext.onReady(function(){
vartabPanel =newExt.TabPanel({
height : 150,
width : 300,
activeTab : 0,//默认激活第一个tab页
animScroll :true,//使用动画滚动效果
enableTabScroll :true,//tab标签超宽时自动出现滚动按钮
animScroll:true,//使用动画滚动效果
enableTabScroll :true,//tab标签超宽时自动出现滚动按钮
applyTo:'hello',
items: [
{title:'tab标签页1',html :'tab标签页1内容'},
{title:'tab标签页2',html :'tab标签页2内容'},
enableTabScroll :true,//tab标签超宽时自动出现滚动按钮
applyTo:'hello',
items: [
{title:'tab标签页1',html :'tab标签页1内容'},
{title:'tab标签页2',html :'tab标签页2内容'},
{title:'tab标签页3',html :'tab标签页3内容'},
<scripttype="text/javascript"src="TabPanel2.js"></script>
<linkrel="stylesheet"type="text/css"href="../Ext/resources/css/ext-all.css"></link>
</head>
<body>
<scripttype="text/javascript"src="TabPanel4.js"></script>
<linkrel="stylesheet"type="text/css"href="../Ext/resources/css/ext-all.css"></link>
</head>
<body>
},
{
title:"panel2",
html:"panel2文本内容"
}
]
});
});
示例三：使用border布局。
Ext.onReady(function(){
newExt.Viewport({
title :'ViewPort',
layout:'border',//表格布局
items: [
{
title:'north Panel',
{title:'tab标签页4',html :'tab标签页4内容'},
{title:'tab标签页5',html :'tab标签页5内容'}
],
buttons : [
{
text :'添加标签页',
handler :addTabPage
}
]
});
functionaddTabPage(){
varindex = tabPanel.items.length + 1;
ViewPort代表整个浏览器显示区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort实例。
示例一：显示单个Panel
Ext.onReady(function(){
newExt.Viewport({
title :'ViewPort',
layout:"fit",
applyTo:'hello',
items: [
{title:'div1内容',contentEl:"div1"},
{title:'div2内容',contentEl:"div2"},
{title:'div3内容',contentEl:"div3"},