HTML頁(yè)面功能的使用（Webserver）

TML頁(yè)面功能的使用（Webserver）:

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

1. 功能組態(tài)

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

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

2. 功能設(shè)置

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

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

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

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

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

3. 功能使用

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

簡(jiǎn)介】

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

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

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

draggable有三個(gè)值, 如下所示：

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

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

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

【用法】

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

ondragstart：用戶(hù)按下鼠標(biāo)開(kāi)始拖動(dòng)時(shí)觸發(fā)

ondrag：用戶(hù)正在拖動(dòng)時(shí)反復(fù)觸發(fā)

ondragend：用戶(hù)結(jié)束拖動(dòng)后觸發(fā)

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

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

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

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

ondragleave：拖動(dòng)對(duì)象在釋放區(qū)沒(méi)有釋放就離開(kāi)容器時(shí)觸發(fā)

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

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

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

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

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

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

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

event.dataTransfer //返回DataTransfer對(duì)象

DataTransfer對(duì)象的屬性：

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

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

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

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

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

DataTransfer對(duì)象的方法：

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

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

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

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

了解了H5拖動(dòng)使用的api以后我們接下來(lái)看一個(gè)綜合的案例, 功能如下：

1)、實(shí)現(xiàn)圖片拖動(dòng)功能；

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

3)、過(guò)濾不能拖動(dòng)的元素；

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

公共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="" />
<!--拖動(dòng)的圖片元素-->
</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; //綁定拖動(dòng)元素釋放時(shí)觸發(fā)的事件
dropInId.ondrop = drop; //綁定
dropId1.ondragstart = startFun;
function cancelDefault(ev){ //取消默認(rèn)行為
    ev.preventDefault();
}
function startFun(ev){
    darggID = ev.target.id;
    //獲取被拖動(dòng)元素的id
    //從源對(duì)象上的事件處理中保存數(shù)據(jù)，數(shù)據(jù)類(lèi)型為"Text"
    ev.dataTransfer.setData("Text",darggID);
}
function drop(ev){
    ev.preventDefault();
    // 從目標(biāo)對(duì)象上的事件處理中讀取"Text"類(lèi)型數(shù)據(jù)
    var data=ev.dataTransfer.getData("Text");
    // 插入到目標(biāo)對(duì)象中
    ev.target.appendChild(document.getElementById(data));
}
</script>

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

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

添加js代碼：

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

接下來(lái)我們實(shí)現(xiàn)拖動(dòng)本地圖片到瀏覽器, 我們就將圖片拖動(dòng)到id為"dropIn"的這個(gè)div中；添加js:

/*document 監(jiān)聽(tīng)drop 并阻止瀏覽器打開(kāi)客戶(hù)端的圖片*/
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 中不支持拖放。

最后再和大家分享一個(gè)技巧, 這種拖動(dòng)行為還能跨瀏覽器工作, 這里說(shuō)的跨瀏覽器不是瀏覽器之間的跨窗口, 而是可以從Chrome瀏覽器拖動(dòng)到Firefox瀏覽器, 因?yàn)橥戏殴δ艿闹С质羌稍诓僮飨到y(tǒng)里面的, 有著相同的特性。

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

效果展示如下：

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

CSS樣式

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

JQ代碼

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

在線咨詢(xún)

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

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

HTML頁(yè)面功能的使用（Webserver）

您的項(xiàng)目需求