轉(zhuǎn)帖|行業(yè)資訊|編輯:郝浩|2015-12-29 12:01:22.000|閱讀 1021 次
概述:Axure應用實例電商網(wǎng)站的搜索框,對商品、店鋪和賣家進行搜索。切換下拉框中的內(nèi)容時,切換到不同的搜索輸入框,樣式也相應改變,下面通過設(shè)置下拉列表框“選中項于”邏輯條件,實現(xiàn)上述交互效果。Axure選中項值用例條件,設(shè)置選中項值的基本邏輯表達式為:如果“選中項值”等于“值”,那么執(zhí)行動作,選中項值對應部件:下拉列表框
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
電商網(wǎng)站的搜索框,對商品、店鋪和賣家進行搜索。切換下拉框中的內(nèi)容時,切換到不同的搜索輸入框,樣式也相應改變,下面通過設(shè)置下拉列表框“選中項于”邏輯條件,實現(xiàn)上述交互效果。
設(shè)置選中項值的基本邏輯表達式為:如果“選中項值”等于“值”,那么執(zhí)行動作
選中項值對應部件:下拉列表框
邏輯條件設(shè)置靈活,分別可以設(shè)為:
-值1:選中項值:可以設(shè)置部件
-運算符號:可以設(shè)置為:等于、不等于、小于、大于、小于或等于、大于或等于、包含、不包含、是、不是
-值2:可以設(shè)置為值、變量值、部件值、變量及部件值長度、動態(tài)面板狀態(tài)
拖入一個下拉列表框,雙擊“下拉列表框”,打開編輯選項窗口,點擊“+”號,添加3個列表值:商品、店鋪、賣家,在部件交互和注釋命名名稱為:搜索條件。
拖入2個矩形到編輯頁面,設(shè)置矩形大小:h:35,一個放到最下面,做為搜索框的背景,另一個做為搜索按鈕,編輯矩形文本為:搜索。設(shè)置2個矩形邊框顏色:紅色;搜索按鈕填充顏色:紅色
拖一個文本框(單行)到編輯頁面,設(shè)置位置與大小:w:407 h:31;將文本框放到下拉列表框的后面。在部件屬性和樣式窗口:勾選隱藏邊框。設(shè)置提示文字為:請搜索商品名稱;部件交互和注釋窗口,設(shè)置部件名稱為:商品。
選中步驟2-3中制作的部件,右鍵快捷菜單選擇:轉(zhuǎn)換為動態(tài)面板
雙擊動態(tài)面板,點擊“新增”按鈕,添加2個狀態(tài),編輯3個狀態(tài)名稱為:商品、店鋪、賣家,點擊“編輯全部狀態(tài)”按鈕,打開3個狀態(tài)的編輯頁面
復制“商品”編輯狀態(tài)中的部件,分別粘貼到“店鋪”、“賣家”編輯頁面中,修改矩形的邊線及填充顏色,文本框(單行)中的提示文本
選中“搜索條件”下拉列表框,雙擊“選項改變時”事件,打開用例編輯器,編輯用例1:
用例1:
第一步:用例說明,點擊“編輯條件”按鈕,打開條件生成器,編輯邏輯條件為:如果搜索條件選中項等于: “商品”
第二步:點擊新增動作,選擇“設(shè)置面板狀態(tài)”動作
第四步:勾選區(qū)域前復選框,設(shè)置選擇狀態(tài)為:商品
點擊“確定”,關(guān)閉用例編輯器
繼續(xù)雙擊“選項改變時”事件,重復步驟6,添加用例2、用例3:
用例2:第一步邏輯條件設(shè)置,設(shè)置邏輯條件為:如果搜索條件選中項等于: “店鋪”;第四步,設(shè)置選擇狀態(tài)為:店鋪
用例3:第一步邏輯條件設(shè)置,設(shè)置邏輯條件為:如果搜索條件選中項等于: “賣家”;第四步,設(shè)置選擇狀態(tài)為:賣家
生成原型,查看效果
本文轉(zhuǎn)載自
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn