原型設(shè)計(jì)工具Axure RP入門教程（九）：滑塊控制教程

向移動動作添加邊界

• 單擊移動操作底部的更多選項(xiàng)。
• 在邊界下，單擊添加邊界。

左邊界

• 新出現(xiàn)的邊界行，請?jiān)诘谝粋€下拉列表中選擇向左。（這是指動態(tài)面板左邊緣的X值）
• 在中間的下拉列表中，選擇大于或等于。
• 單擊第三個字段右側(cè)的fx圖標(biāo)以打開編輯值對話框。
• 在對話框底部，單擊添加本地變量。
• 在新的本地變量行的第一個字段中，將變量命名為LineWidget。在第二個字段中，選擇小部件。在第三個中，選擇line小部件。（此局部變量整體上是指行小部件）
• 在對話框的上部字段中，輸入：[[LineWidget.left]]（此括號表示的是線控件左邊緣的X值）
• 單擊確定關(guān)閉編輯值對話框。

創(chuàng)建好的邊界，左-大于或等于-[[LineWidget.left]]，這意味著動態(tài)面板的左邊界只能移動到X值，該值大于或等于該行的X值 小部件的左邊界。換句話說，它不能在頁面上移動到行控件左邊緣界以外的任何地方。

右邊界

• 再次單擊添加邊界。在出現(xiàn)的新邊界行中，在第一個下拉列表中選擇右鍵。（這是指動態(tài)面板右邊緣的X值）
• 在中間的下拉列表中，選擇小于或等于。
• 單擊第三個字段右側(cè)的fx圖標(biāo)以打開編輯值對話框。
• 在對話框底部，單擊添加本地變量。
• 在新的本地變量行的第一個字段中，將變量命名為LineWidget。在第二個字段中，選擇小部件。 在第三個中，選擇line小部件。（此局部變量整體上是指行小部件）
• 在對話框的上方字段中，輸入：[[LineWidget.right]]（此括號表示的是行控件右邊緣的X值。）
• 單擊確定關(guān)閉編輯值對話框。

創(chuàng)建好的邊界，右-小于或等于-[[LineWidget.right]]，這意味著動態(tài)面板的右邊緣只能移動到小于或等于該線的X值的X值 小部件的右邊緣。換句話說，它在頁面上的右移不能超過行控件的右邊緣。

預(yù)覽互動

預(yù)覽頁面并向左和向右拖動圓圈。 現(xiàn)在，它只能沿著線控件定義的路徑移動，并且您不應(yīng)將其拖動到線控件的左右邊緣之外。

附加信息和提示

垂直滑塊

要構(gòu)建垂直滑塊，請按照上述步驟進(jìn)行以下更改：

• 使用垂直線代替水平線。 
• 在移動動作的下拉列表中，選擇拖動。在Web瀏覽器中拖動時(shí)，這將使動態(tài)面板沿Y（垂直）軸跟隨光標(biāo)。
• 對于移動動作邊界，請使用：

top — is greater than or equals — [[LineWidget.top]]
bottom — is less than or equals — [[LineWidget.bottom]]

關(guān)注慧聚IT微信公眾號???，了解產(chǎn)品的最新動態(tài)及最新資訊。