HTML頁面功能的使用（Webserver）

TML頁面功能的使用（Webserver）:

通過SIMATIC HMI 面板集成的HTML頁面功能將HMI設(shè)備組態(tài)為HTTP服務(wù)器，實現(xiàn)PC端與精智面板之間的文件傳遞等功能。

1. 功能組態(tài)

需注意：HTML頁面功能僅支持精智面板（Comfort Panel）和二代移動面板（2nd Mobile Panel）。

在觸摸屏項目"運(yùn)行系統(tǒng)設(shè)置"的“服務(wù)”中激活HTML頁面功能:

2. 功能設(shè)置

把要監(jiān)控的數(shù)據(jù)在觸摸屏變量表里找到屬性勾選優(yōu)良生產(chǎn)規(guī)范;

下載項目至實際硬件后，在觸摸屏控制面板的“WinCC Internet Settings”中會增加"Web Server"選項; win+c 可以進(jìn)入觸摸屏設(shè)置;

在"Tag authenticate"組中確定訪問服務(wù)器操作設(shè)備變量的驗證方式，“No authentication”為無需驗證，“Authentication required”為訪問需要密碼。

在“Tag acces”組中確定訪問服務(wù)器操作設(shè)備變量的方式，“Read/write”為讀取訪問和寫訪問，“Read Only”為讀取訪問。

點擊“User Administration”按鈕進(jìn)入“UserDatabase-Edit”界面，如下圖所示。自行設(shè)置默認(rèn)用戶“Administrator”的密碼和確認(rèn)密碼，密碼和確認(rèn)密碼必須保持一致。如果需要登錄新的用戶，可以點擊"New"按鈕新建用戶，同時輸入用戶名和密碼后，點擊“Apply”確認(rèn)設(shè)置。

3. 功能使用

在PC端使用瀏覽器進(jìn)行訪問，在瀏覽器地址欄中輸入https://觸摸屏的IP地址，例如：https://192.168.101.120。輸入設(shè)置的用戶名和密碼。需注意：用戶名是區(qū)分大小寫的。如果需要瀏覽外部存儲介質(zhì)的文件，例如下載或者上傳文件，點擊“File Browser”就可以看到存儲介質(zhì)。

簡介】

拖放是一種常見的特性, 屬于html5標(biāo)準(zhǔn)的一部分, 即抓取對象以后拖動到另一個位置, 在html5中, 任何元素都可被設(shè)置拖放。首先, 我們要給需要拖動的HTML元素啟用拖動功能, 設(shè)置屬性draggable="true",

<div draggable="true"></div>

提示：a標(biāo)簽和img標(biāo)簽?zāi)J(rèn)是啟用該屬性的, 可不需要設(shè)置draggable屬性。

draggable有三個值, 如下所示：

draggable = true(元素可以被拖動)

draggable = false(元素不能被拖動)

draggable = auto(瀏覽器可以自主決定某個元素是否可以被拖動)

【用法】

當(dāng)我們用鼠標(biāo)拖拽目標(biāo)元素過程中會觸發(fā)的事件：

ondragstart：用戶按下鼠標(biāo)開始拖動時觸發(fā)

ondrag：用戶正在拖動時反復(fù)觸發(fā)

ondragend：用戶結(jié)束拖動后觸發(fā)

<img id="imgs" ondragstart="startFun()" ondrag="ondragFun()" ondragend="ondragendFun()" src="../img/a.png"/>

當(dāng)拖動元素進(jìn)入目標(biāo)容器內(nèi)觸發(fā)的事件：

ondragenter：鼠標(biāo)拖動對象進(jìn)入釋放區(qū)時觸發(fā)

ondragover：被拖動物體進(jìn)入目標(biāo)容器內(nèi)移動時反復(fù)觸發(fā)

ondragleave：拖動對象在釋放區(qū)沒有釋放就離開容器時觸發(fā)

ondrop：被拖動物體在目標(biāo)容器內(nèi)釋放時觸發(fā)

ondragenter和ondragover事件的默認(rèn)行為是拒絕接受任何被拖放的項目, 所以我們必須要做的最重要的事情就是防止這種默認(rèn)行為的發(fā)生。

因此, 我們只需要在這兩個事件調(diào)用的函數(shù)中傳入event對象, 使用event.preventDefault()就可取消這種默認(rèn)行為；舉個例子, 在drop事件時, Firefox瀏覽器會關(guān)閉網(wǎng)頁, 轉(zhuǎn)而顯示被拖動圖片img元素src所引用的地址。

取消元素默認(rèn)行為：

function ondragenterFun(e){
    e.preventDefault();
}
function ondragoverFun(e){
    e.preventDefault();
}

在event對象中, 我們會使用dataTransfer屬性來獲取DataTransfer對象, 在DataTransfer對象中有我們操作數(shù)據(jù)的屬性和方法, 具體如下：

datatransfer：轉(zhuǎn)移釋放元素的數(shù)據(jù)到釋放區(qū), 返回Datatransfer對象

event.dataTransfer //返回DataTransfer對象

DataTransfer對象的屬性：

files：處理從操作系統(tǒng)拖動并釋放到釋放區(qū)的文件；

types：返回一個字符串?dāng)?shù)組, 該對象包含了dataTransfer對象中數(shù)據(jù)的所有類型；

items：返回DataTransferItems對象, 該對象代表了拖動數(shù)據(jù)；

dropEffect：設(shè)置拖放目標(biāo)允許發(fā)生的拖放行為, 如果此處設(shè)置的拖放行為不在effectAllowed屬性設(shè)置的可拖放行為內(nèi), 拖放操作將會失敗。該屬性值只允許為"null"、"copy"、"link"或"move"；

effectAllowed：設(shè)置拖動元素允許發(fā)生的拖動行為, 該屬性值可為"none"、"copy"、"copyLink"、"copyMove"、"link"、"linkMove"、"move"、"all"或"uninitialized"；

DataTransfer對象的方法：

setData( format , data )：將指定格式的數(shù)據(jù)賦值給dataTransfer對象，參數(shù)format定義數(shù)據(jù)的格式也就是數(shù)據(jù)的類型，data為待賦值的數(shù)據(jù)。

getData( format )：從dataTransfer對象中獲取指定格式的數(shù)據(jù)，format代表數(shù)據(jù)格式，data為數(shù)據(jù)。

clearData( [format] )：從dataTransfer對象中刪除指定格式的數(shù)據(jù)，參數(shù)可選，若不給參數(shù)，將刪除對象中所有的數(shù)據(jù)。

setDragImage(el, x, y)：設(shè)置拖放操作的圖標(biāo)，其中el代表自定義圖標(biāo)，x代表圖標(biāo)與鼠標(biāo)在水平方向上的距離，y代表圖標(biāo)與鼠標(biāo)在垂直方向上的距離。

了解了H5拖動使用的api以后我們接下來看一個綜合的案例, 功能如下：

1)、實現(xiàn)圖片拖動功能；

2)、實現(xiàn)圖片復(fù)制功能；

3)、過濾不能拖動的元素；

4)、實現(xiàn)拖動本地圖片到瀏覽器指定位置；

公共css部分：

<style>
#dropIn{
border:1px solid #AAAAAA;
height:100px;
margin-bottom: 10px;
padding: 10px;
}
#dropIn>img{
margin-right: 10px;
border:2px solid deepskyblue;
}
img{
width:100px;
border-radius: 10px;
border:2px solid red;
}
</style>

html部分：

<body>
<div id="dropIn"></div> <!--釋放區(qū)-->
<img id="drop1" src="img/a.png" alt="" />
<!--拖動的圖片元素-->
</body>

js部分：

<script type="text/javascript">
var darggID;
function getId(el){
    return document.getElementById(el)
}
var dropId1 = getId("drop1");
var dropInId = getId("dropIn");
//取消事件默認(rèn)行為
dropInId.ondragenter = cancelDefault;
dropInId.ondragover = cancelDefault; //綁定拖動元素釋放時觸發(fā)的事件
dropInId.ondrop = drop; //綁定
dropId1.ondragstart = startFun;
function cancelDefault(ev){ //取消默認(rèn)行為
    ev.preventDefault();
}
function startFun(ev){
    darggID = ev.target.id;
    //獲取被拖動元素的id
    //從源對象上的事件處理中保存數(shù)據(jù)，數(shù)據(jù)類型為"Text"
    ev.dataTransfer.setData("Text",darggID);
}
function drop(ev){
    ev.preventDefault();
    // 從目標(biāo)對象上的事件處理中讀取"Text"類型數(shù)據(jù)
    var data=ev.dataTransfer.getData("Text");
    // 插入到目標(biāo)對象中
    ev.target.appendChild(document.getElementById(data));
}
</script>

接下來我們添加兩張圖, "drop2"是實現(xiàn)復(fù)制的圖片, "drop3"是既不能復(fù)制也不能拖動的圖片；

<img id="drop2" src="img/b.png" alt="" /><img id="drop3" src="img/c.png" alt="" />

添加js代碼：

//獲取頁面元素
var dropId2 = getId("drop2");
var dropId3 = getId("drop3");
//綁定事件
dropId2.ondragstart = startFun;dropId3.ondragstart = startFun;
//修改drop函數(shù)為
function drop(ev){
    ev.preventDefault();
    // 從目標(biāo)對象上的事件處理中讀取"Text"類型數(shù)據(jù)
    var data=ev.dataTransfer.getData("Text");
    if(data=='drop1'){
    //移動
        ev.target.appendChild(document.getElementById(data));
    }
    if(data=='drop2'){//復(fù)制
        var nreEl=document.getElementById(darggID).cloneNode(false);
        getId("dropIn").appendChild(nreEl);
    }
    if(data=='drop3'){//過濾drop3，drop3不做任何操作
        alert('過濾drop3')
    }
}

接下來我們實現(xiàn)拖動本地圖片到瀏覽器, 我們就將圖片拖動到id為"dropIn"的這個div中；添加js:

/*document 監(jiān)聽drop 并阻止瀏覽器打開客戶端的圖片*/
document.ondragover = function (e) {
    //只有在ondragover中阻止默認(rèn)行為
    e.preventDefault();
};
document.ondrop = function (e) {
    //阻止 document.ondrop的默認(rèn)行為
    e.preventDefault();
};
//dropIn是div的id
dropIn.ondrop = function (e) {
    var list = e.dataTransfer.files;
    for (var i = 0; i < list.length; i++) {
    var f = list[i];
        reader(f);
    }
};
function reader(f) {
    var reader = new FileReader();
    //讀取數(shù)據(jù)
    reader.readAsDataURL(f);
    reader.onload = function () {
    var img = new Image();
    img.src = reader.result;
    dropIn.appendChild(img);
    }
}

【瀏覽器支持】

目前只有Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari5支持拖放，在 Safari5.1.2 中不支持拖放。

最后再和大家分享一個技巧, 這種拖動行為還能跨瀏覽器工作, 這里說的跨瀏覽器不是瀏覽器之間的跨窗口, 而是可以從Chrome瀏覽器拖動到Firefox瀏覽器, 因為拖放功能的支持是集成在操作系統(tǒng)里面的, 有著相同的特性。

在的移動端頁面中，很多網(wǎng)站都用到了側(cè)邊切換菜單欄功能，針對于該功能，利用CSS3的知識，寫了一個實現(xiàn)側(cè)滑的效果。

效果展示如下：

HTML:首先寫好側(cè)邊的布局。然后不是側(cè)邊的內(nèi)容塊最好用一個內(nèi)容塊包圍住。

CSS樣式

給側(cè)邊菜單定位，起始位置為left:-50%,當(dāng)點擊菜單的展開按鈕，側(cè)邊菜單就加上open類目，讓left:值為0，即展開切換。同理。main也一樣。

JQ代碼

當(dāng)點擊菜單展開按鈕定義類名為 f-lei，側(cè)邊菜單切換添加刪除類open, 主內(nèi)容切換添加刪除類show。當(dāng)側(cè)邊展開時，點擊展開的剩余背景能收縮展開的菜單欄。

在線咨詢

上一篇：掌握 onmouseover 事件：打造動態(tài) HTML 體驗
下一篇：怎么把Excel表格轉(zhuǎn)換成HTML格式？Excel轉(zhuǎn)HTML

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML頁面功能的使用（Webserver）

您的項目需求