整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
T之家3月31日消息 據(jù)Chromium官方博客，在過(guò)去的一年中，Google Chrome團(tuán)隊(duì)和微軟Edge團(tuán)隊(duì)合作，“對(duì)Chromium瀏覽器中的內(nèi)置表單控件進(jìn)行了主體化和改進(jìn)”，改善了按鈕、下拉菜單、復(fù)選框等HTML控件的UI及體驗(yàn)。
另個(gè)團(tuán)隊(duì)致力于“一致且易于感知”的新UI，采用新主題的HTML控件在設(shè)計(jì)上更加現(xiàn)代及平面化。
重新設(shè)計(jì)前 vs. 重新設(shè)計(jì)后
除了改進(jìn)默認(rèn)樣式，兩個(gè)團(tuán)隊(duì)還調(diào)整了表單控件的可訪問(wèn)性以及增強(qiáng)對(duì)觸摸的支持，比如采用自適應(yīng)背景、更加清晰的“對(duì)焦環(huán)”，增加了適配多顯示器的點(diǎn)擊目標(biāo)大小，以及改進(jìn)了拾色器等。
IT之家注意到目前這些改進(jìn)在Windows版的Edge上已經(jīng)可用，在Chrome 81上需要開(kāi)啟以下flag標(biāo)記：
訪問(wèn)chrome://flags/#form-controls-refresh；
下拉菜單改為Enable；
重啟瀏覽器。
重新設(shè)計(jì)的控件將于5月中旬在macOS、Windows和Chrome OS版本的Chrome上可用，晚些時(shí)候Android版也將進(jìn)行類似的改進(jìn)。
圖1
一、開(kāi)始吧，我們先做一個(gè)盒子drop，它以后要裝的是按鈕和下拉列表。
圖2
二、在盒子drop里面做一個(gè)按鈕dropbt。
圖3
圖4
三、按鈕有點(diǎn)丑了，于是我們給按鈕加點(diǎn)樣式。
圖5
圖6
四、下面我們做出下拉列表，它們是一串鏈接，我們用一個(gè)盒子dropbox裝著。
圖7
圖8
五、列表是橫著的，而且不怎么好看，我們先改超鏈接a的樣式。
圖9
圖10
六、菜單列表好看許多了，我們給列表盒子dropbox加點(diǎn)樣式，比如陰影。
圖11
圖12
七、再好看的菜單列表一開(kāi)始也是要先隱藏的。
圖13
圖14
八、我們讓鼠標(biāo)移到按鈕上時(shí)，按鈕顏色變淺。
圖15
圖16
九、現(xiàn)在可以設(shè)置點(diǎn)擊后，下拉菜單出現(xiàn)了。
圖17
圖18
十、下拉菜單出現(xiàn)了，但你會(huì)發(fā)現(xiàn)鼠標(biāo)在右側(cè)時(shí)，菜單也會(huì)彈出來(lái)，我們改一下樣式，解決這個(gè)問(wèn)題，再次移過(guò)去的時(shí)候，你會(huì)發(fā)現(xiàn)只有在按鈕位置才會(huì)彈出菜單了。
圖19
十一、完善一下，當(dāng)鼠標(biāo)移動(dòng)菜單列表時(shí)，背景色改變。
圖20
圖21
豬腳本（原飛豬腳本）以按鍵精靈教學(xué)為主,涉及UiBot，Python,Lua等腳本編程語(yǔ)言,教學(xué)包括全自動(dòng)辦公腳本,游戲輔助腳本,引流腳本,網(wǎng)頁(yè)腳本,安卓腳本,IOS腳本,注冊(cè)腳本,點(diǎn)贊腳本,閱讀腳本以及網(wǎng)賺腳本等各個(gè)領(lǐng)域。想學(xué)習(xí)按鍵精靈的朋友可以添加金豬腳本粉絲交流群:554127455 學(xué)習(xí)路上不再孤單,金豬腳本伴你一同成長(zhǎng).
1.什么是網(wǎng)頁(yè)元素特征字符串？
請(qǐng)參考網(wǎng)頁(yè)特征字符串詳解；
2.Html系列命令
2.1.HtmlSelect命令
1）HtmlSelect命令只能夠根據(jù)Select項(xiàng)的值來(lái)進(jìn)行選擇，注意這里不是顯示在Select項(xiàng)上的文字，而是該項(xiàng)的value。
一個(gè)典型的下拉框HTML代碼如下：
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
</select>
這里如果要選擇上海，需要選擇值為2的項(xiàng)；
2）級(jí)聯(lián)的下拉列表組合。
在有的網(wǎng)頁(yè)中，會(huì)有幾個(gè)級(jí)聯(lián)的下拉列表，后一個(gè)下拉框會(huì)隨前一個(gè)框的值變化而發(fā)生變化，典型的有注冊(cè)頁(yè)面上的省份城市選擇，HtmlSelect命令能夠觸發(fā)Onchange事件，會(huì)導(dǎo)致后一個(gè)下拉框值發(fā)生變化，但是如果執(zhí)行腳本太快，而導(dǎo)致后一個(gè)未能選中正確的值，可以在前一個(gè)HtmlSelect后加上適當(dāng)?shù)难訒r(shí)；
3）多選表單中的列表控件；有的列表支持多選，在有一些個(gè)求職網(wǎng)站中，職業(yè)是可以多選的，這時(shí)候可以用%將多個(gè)需要選擇的值連接起來(lái)傳遞給HtmlSelect命令實(shí)現(xiàn)多選；
2.2.HtmlExists命令
HtmlExists命令，能夠判斷指定特征的元素是否存在，并能夠返回具備該特征的元素的個(gè)數(shù)。這個(gè)命令能夠用來(lái)判斷某個(gè)元素是否存在，如果為0證明不存在；
2.3.HtmlGet命令
HtmlGet命令比較復(fù)雜，但是功能也非常強(qiáng)大，該命令具備兩個(gè)參數(shù)，第一個(gè)參數(shù)為獲取類型，目前支持的值如下所示：
序號(hào) 值 適用對(duì)象
1 text 得到指定元素的文本值，對(duì)應(yīng)DOM屬性innerText
2 html 得到指定元素內(nèi)部的HTML代碼，對(duì)應(yīng)DOM屬性innerHTML
3 outerHtml 得到元素整體的HTML代碼，對(duì)應(yīng)DOM屬性的outerHTML
4 value 得到元素的Value值，用于獲取表單元素內(nèi)部的值
5 src 得到圖像元素的src屬性，用于IMG標(biāo)簽對(duì)象
6 href 得到鏈接元素的鏈接地址，用于A標(biāo)簽
7 …其他名稱 其他屬性，如果您使用的是合法的屬性名稱，就能夠返回對(duì)應(yīng)的值。如何才是合法的屬性？請(qǐng)參閱HTML標(biāo)準(zhǔn)。
第二個(gè)參數(shù)為特征字符串，如果匹配多個(gè)，只能返回第一個(gè)元素的值；
例如，獲得淘寶貨物價(jià)格：
Plugin price=Web.HtmlGet("text","id:id_Price")
獲取某個(gè)表單文本的值
Plugin email=Web.HtmlGet("value","name:Email")
2.4.RunJS命令
RunJS命令提供了直接運(yùn)行Javascript的功能，如果您對(duì)JS非常熟悉，就能夠極大的擴(kuò)展WQM的功能。
RunJS命令支持兩中執(zhí)行方式，第一個(gè)參數(shù)設(shè)置為0時(shí)，能夠執(zhí)行一段沒(méi)有返回值的Javascript，
例如：
RunJS(0,"alert('hello');")
第一個(gè)參數(shù)設(shè)置為1時(shí)，能執(zhí)行一段js并返回由return語(yǔ)句返回的值，返回值為字符串類型；
例如：返回Html文檔的title；
RunJS(1,"var t=document.title;return t;")
如果您分析到網(wǎng)頁(yè)中某個(gè)按鈕實(shí)際上就是執(zhí)行了一個(gè)函數(shù)，例如
<input type="Button" … />
您就可以直接調(diào)用
RunJS(0,"dosomething();")
JQuery的支持，網(wǎng)頁(yè)按鍵精靈集成了Jquery1.3.2，為了不與其他JQ的庫(kù)發(fā)生沖突，使用了wqmjq來(lái)代替$操作符，如果您需要直接使用JQ來(lái)操作網(wǎng)頁(yè)，可使用wqmjq來(lái)執(zhí)行Jquery語(yǔ)句：
RunJS(0,"wqmjq('#test').click();")
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
