次我們來講解一個在動態面板里面切換標簽的效果。

一、準備元件

1.首先打開一下Axure新建文件，拖取一個矩形，設置長度：375 px ，高度：50 px ；

2.然后輸入文本標簽，這里的字體大小我們給它設置為14 px ，先把它置灰，這里我的字體色值為 #999999 ；

3.最后我們加一個小黑條，脫出一個矩形，設置長度：40 px ，高度：2 px 。給它名為小黑條。

以上樣式我是按照常規移動端尺寸做的，不用說每個尺寸都跟我一樣，只要保存美觀即可。

好的，完成之前我們會得到以下的樣子：

二、設置文本的交互樣式

1.我們點擊全選所有文本 – 右鍵選擇交互樣式 – 選擇選中一項 – 把字體顏色設置為 #333333，然后點擊確定；

2.第二步還是選擇所有文本 – 右鍵選擇設置選項組名稱 – 命名“標簽切換”（這里可隨意命名）；

3.因為小黑條在標題一的底部，我們需要單選標題一 – 設置為默認選中狀態；

這時候我們的前提條件就做好了，可以準備下一步了。

三、設置交互效果

1.點擊交互效果 “鼠標點擊時” ，設置該元件為 “true” （選中） ；

2.點擊移動，選擇小黑條，設置移動為絕對位置，X軸為 [[This+2]] , Y 軸為 [[This+28]] ，動畫為線性，時間為250毫秒，點擊確定;

3.復制標題一的動態效果，粘貼到所有文本，這時切換標簽的效果就完成了。

已完成的小伙伴，可以點擊預覽嘗試一下自己做的效果，感受一下自己做出來的成果！

四、進階

已完成以上步驟的小伙伴們，可以嘗試一下進階效果。咱們的標題是《動態面板：切換標簽》，咱們是不是還沒有用到動態面板呢？

下面來嘗試著做吧！

1.我們把文本再新增出 n 個（記得不要復制第一個默認為選中狀態的標題一），讓他超出 375 px 的長度，同時矩形需要跟上；

2.然后我們全選所有元件，右鍵點擊“轉換為動態面板”，然后我們給這個動態面板命名為“移動面板”；

3.然后我們再在這個基礎上給它再加一個動態面板，命名為“固定面板”，給他設置一個固定寬度為 375 px ，然后可以看到以下樣式；

4.這時候我們打開固定面板，按照 375 px 的寬度定一個中心點，拉一個標尺;

5.以下的意思是點擊標題一、二、三，新增一個條件為：移動“移動面板”至 X 軸為 0 ，Y 軸為 0 ；但到標題四時， X 軸需要到中心點的地方，X 軸會變成 -42 ，Y 軸保持不變。以此類推…（看以下第一張圖）下一個是 -105 px 、 -168 px 、 -212 px 、 -212 px 、 -212 px （后面三個都為 -212 px 的原因是： “移動面板” 的移動不能少于固定面板右側的藍色線，看以下第二張圖）;

6.看一下設置移動“移動面板”的設置樣式（效果做在文本里）；

7.按照上面 “5” 的規則，把其他文本都加上移動“移動面板”的效果;

8.所有步驟完成了之后，可得到該效果（騰訊視頻鏈接）：

https://v.qq.com/x/page/c1342lfqgss.html?start=1

本文由 @李桂東 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自網絡

言

這里需要使用 document.execCommand() API，執行一個對當前文檔，當前選擇或者給出范圍的命令，來處理 HTML 數據，用于實現復制功能。

document.execCommand()

【語法】

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

【返回值】

布爾值 ，如果是 false 則表示操作不被支持或未被啟用。

注意：在調用一個命令前，不要嘗試使用返回值去校驗瀏覽器的兼容性。

【參數】

aCommandName：一個 DOMString ，命令的名稱。可用命令列表請參閱命令 （我們用 “copy” 命令）。

aShowDefaultUI：一個 Boolean， 是否展示用戶界面，一般為 false（Mozilla 沒有實現）。

aValueArgument：一些命令（例如 insertImage）需要額外的參數（insertImage 需要提供插入 image 的 url），默認為 null。

實現

通過了解 document.execCommand() API，或許你已經有了思路。

【HTML】

<input type="text" id="input" value="hello">
<button id="button" onclick="copy()">點擊復制</button>

【JavaScript】

// 實現復制到剪貼板功能函數
function copy(){

  // 獲取輸入框元素
  let input = document.getElementById('input')

  // 選中元素中的文本（必須可編輯）
  input.select()

  // 檢測復制命令返回值（是否可用）
  if(document.execCommand('copy')){
    document.execCommand('copy')//執行復制到剪貼板
    window.alert('已復制！')//反饋信息
  }
  
  // 無法復制（不可用）
  else{
    window.alert('復制失敗！')//反饋信息
  }
}

當一個HTML文檔切換到設計模式時，document暴露 execCommand 方法，該方法允許運行命令來操縱可編輯內容區域的元素。

大多數命令影響document的 selection（粗體，斜體等），當其他命令插入新元素（添加鏈接）或影響整行（縮進）。當使用contentEditable時，調用 execCommand() 將影響當前活動的可編輯元素。

語法

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

返回值

一個 Boolean ，如果是 false 則表示操作不被支持或未被啟用。

注意：在調用一個命令前，不要嘗試使用返回值去校驗瀏覽器的兼容性

參數

aCommandName

一個 DOMString ，命令的名稱。可用命令列表請參閱 命令 。

aShowDefaultUI

一個 Boolean， 是否展示用戶界面，一般為 false。Mozilla 沒有實現。

aValueArgument

一些命令（例如insertImage）需要額外的參數（insertImage需要提供插入image的url），默認為null。

命令

backColor

修改文檔的背景顏色。在styleWithCss模式下，則只影響容器元素的背景顏色。這需要一個<color> 類型的字符串值作為參數傳入。注意，IE瀏覽器用這個設置文字的背景顏色。

bold

開啟或關閉選中文字或插入點的粗體字效果。IE瀏覽器使用 <strong>標簽，而不是<b>標簽。

ClearAuthenticationCache

清除緩存中的所有身份驗證憑據。

contentReadOnly

通過傳入一個布爾類型的參數來使能文檔內容的可編輯性。(IE瀏覽器不支持)

copy

拷貝當前選中內容到剪貼板。啟用這個功能的條件因瀏覽器不同而不同，而且不同時期，其啟用條件也不盡相同。使用之前請檢查瀏覽器兼容表，以確定是否可用。

createLink

將選中內容創建為一個錨鏈接。這個命令需要一個hrefURI字符串作為參數值傳入。URI必須包含至少一個字符，例如一個空格。（瀏覽器會創建一個空鏈接）

cut

剪貼當前選中的文字并復制到剪貼板。啟用這個功能的條件因瀏覽器不同而不同，而且不同時期，其啟用條件也不盡相同。使用之前請檢查瀏覽器兼容表，以確定是否可用。

decreaseFontSize

給選中文字加上 <small> 標簽，或在選中點插入該標簽。(IE瀏覽器不支持)

defaultParagraphSeparator

更改在可編輯文本區域中創建新段落時使用的段落分隔符。有關更多詳細信息，請參閱標記生成的差異。

delete

刪除選中部分.

enableAbsolutePositionEditor

啟用或禁用允許移動絕對定位元素的抓取器。Firefox 63 Beta/Dev Edition 默認禁用此功能(bug 1449564)。

enableInlineTableEditing

啟用或禁用表格行和列插入和刪除控件。(IE瀏覽器不支持)

enableObjectResizing

啟用或禁用圖像和其他對象的大小可調整大小手柄。(IE瀏覽器不支持)

fontName

在插入點或者選中文字部分修改字體名稱. 需要提供一個字體名稱字符串 (例如："Arial")作為參數。

fontSize

在插入點或者選中文字部分修改字體大小. 需要提供一個HTML字體尺寸 (1-7) 作為參數。

foreColor

在插入點或者選中文字部分修改字體顏色. 需要提供一個顏色值字符串作為參數。

formatBlock

添加一個HTML塊式標簽在包含當前選擇的行, 如果已經存在了，更換包含該行的塊元素 (在 Firefox中, BLOCKQUOTE 是一個例外 -它將包含任何包含塊元素). 需要提供一個標簽名稱字符串作為參數。幾乎所有的塊樣式標簽都可以使用(例如. "H1", "P", "DL", "BLOCKQUOTE"). (IE瀏覽器僅僅支持標題標簽 H1 - H6, ADDRESS, 和 PRE,使用時還必須包含標簽分隔符 < >, 例如 "<H1>".)

forwardDelete

刪除光標所在位置的字符。 和按下刪除鍵一樣。

heading

添加一個標題標簽在光標處或者所選文字上。 需要提供標簽名稱字符串作為參數 (例如. "H1", "H6"). (IE 和 Safari不支持)

hiliteColor

更改選擇或插入點的背景顏色。需要一個顏色值字符串作為值參數傳遞。 UseCSS 必須開啟此功能。(IE瀏覽器不支持)

increaseFontSize

在選擇或插入點周圍添加一個BIG標簽。(IE瀏覽器不支持)

indent

縮進選擇或插入點所在的行， 在 Firefox 中, 如果選擇多行，但是這些行存在不同級別的縮進, 只有縮進最少的行被縮進。

insertBrOnReturn

控制當按下Enter鍵時，是插入 br 標簽還是把當前塊元素變成兩個。(IE瀏覽器不支持)

insertHorizontalRule

在插入點插入一個水平線（刪除選中的部分）

insertHTML

在插入點插入一個HTML字符串（刪除選中的部分）。需要一個個HTML字符串作為參數。(IE瀏覽器不支持)

insertImage

在插入點插入一張圖片（刪除選中的部分）。需要一個 URL 字符串作為參數。這個 URL 圖片地址至少包含一個字符。空白字符也可以（IE會創建一個鏈接其值為null）

insertOrderedList

在插入點或者選中文字上創建一個有序列表

insertUnorderedList

在插入點或者選中文字上創建一個無序列表。

insertParagraph

在選擇或當前行周圍插入一個段落。(IE會在插入點插入一個段落并刪除選中的部分.)

insertText

在光標插入位置插入文本內容或者覆蓋所選的文本內容。

italic

在光標插入點開啟或關閉斜體字。 (Internet Explorer 使用 EM 標簽，而不是 I )

justifyCenter

對光標插入位置或者所選內容進行文字居中。

justifyFull

對光標插入位置或者所選內容進行文本對齊。

justifyLeft

對光標插入位置或者所選內容進行左對齊。

justifyRight

對光標插入位置或者所選內容進行右對齊。

outdent

對光標插入行或者所選行內容減少縮進量。

paste

在光標位置粘貼剪貼板的內容，如果有被選中的內容，會被替換。剪貼板功能必須在 user.js 配置文件中啟用。參閱 [1].

redo

重做被撤銷的操作。

removeFormat

對所選內容去除所有格式

selectAll

選中編輯區里的全部內容。

strikeThrough

在光標插入點開啟或關閉刪除線。

subscript

在光標插入點開啟或關閉下角標。

superscript

在光標插入點開啟或關閉上角標。

underline

在光標插入點開啟或關閉下劃線。

undo

撤銷最近執行的命令。

unlink

去除所選的錨鏈接的<a>標簽

useCSS

切換使用 HTML tags 還是 CSS 來生成標記. 要求一個布爾值 true/false 作為參數。注: 這個屬性是邏輯上的倒退 (例如. use false to use CSS, true to use HTML).(IE不支持)
該屬性已經廢棄，使用 styleWithCSS 代替。

styleWithCSS

用這個取代 useCSS 命令。 參數如預期的那樣工作, i.e. true modifies/generates 風格的標記屬性, false 生成格式化元素。

示和隱藏圖片

點擊顯示和隱藏按鈕分別控制圖片的顯示和隱藏。

框架繪制，顯示按鈕、隱藏按鈕、div標簽：

<input type="button" value="顯示" id="btn1">
<input type="button" value="隱藏" id="btn2">
<div id="box"></div>

添加樣式：按鈕居中，div設置寬高和背景圖片，display:block; 代表顯示圖片；display:none; 代表顯示圖片。

<style>
    body{
        text-align: center;
    }

    input{
        margin: 10px;
    }

    #box{
        height: 400px;
        width: 500px;
        background: url(./images/001.jpg) no-repeat;
        background-size: cover;
        margin: auto;
        display: block;
    }
</style>

獲取對象：

let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");
let box = document.getElementById("box");

當按鈕點擊切換顯示狀態：

console.log(box.style.display, typeof(box.style.display));
btn1.onclick = function(){
    box.style.display = "block";
}

btn2.onclick = function(){
    console.log(box.style.display, typeof(box.style.display));
    box.style.display = "none";
}

切換背景圖像

按下UP向上跳躍：

按下DOWN落地：