Axure常用交互效果製作
將提示信息放置於文本框內是一種常見的交互方式,小編為大家收集整理了關於Axure常用交互效果,以方便大家參考。
1.帶提示的文本框
將提示信息放置於文本框內是一種常見的交互方式。當文本框獲得焦點時,提示文字消失。當文本框失去焦點時,提示文字重新顯示出來。現在就讓我們看下這種控件的製作方法。
第一步:
從widget庫中拖出text field控件。雙擊控件在其中輸入提示文字。然後在widget properties面板裏,為該text field寫入標籤:“find people”。
第二步:
雙擊widget properties面板裏的,然後在打開的case editor中,點擊Set Variable/Widgets value(s)之後點擊Open Set Value Editor。 設置如下圖所示:
點擊“OK”保存設置退出Set Value Editor和Case Editor。
第三步:
雙擊widget properties面板裏的,然後在打開的case editor中,點擊Add Condition,在Condition Builder裏設置如下:
(該步驟的目的是,當用户在text field裏面輸入值之後,text field失去焦點時顯示用户輸入的`值,而不再顯示提示文字。)
點擊“OK”保存設置並退出Condition Editor,然後再Case Editor中,點擊Set Variable/Widgets value(s)之後點擊Open Set Value Editor。 設置如下圖所示:
點擊”OK”保存設置退出Set Value Editor和Case Editor。
至此帶提示的文本框的製作就結束了,按“F5”可在瀏覽器中查看效果~
2.拖拽
在設計中應用拖拽,可以直觀有趣的替代移動、複製、添加、刪除等操作。在Axure中,拖拽效果的實現相對複雜。具體如下:
第一步:
從widget 庫中拖出一個矩形,雙擊添加文字“拖拽物”。在矩形上點擊右鍵,選擇Convert – Convert to Dynamic Panel。然後在widget properties面板裏,為該矩形寫入標籤:“拖拽物”。
第二步:
選中該矩形,在軟件右側區域中的“組件屬性(Widgets Properties)”中選擇“交互(Interactions)”面板,雙擊“OnDragStart”, 在Case Editor中設置如下:
點擊“OK”後保存設置並退出Case Editor。該步驟是為了保證在有多個拖拽物存在的時候,被拖動的拖拽物總是在最前面,不會被其他的拖拽物所遮擋。
點擊“OK”後保存設置並退出Case Editor。
第三步:
雙擊“OnDrag”, 在Case Editor中設置如下:
注意此處在右下角的Move下拉菜單中默認是“with drag”,也就是説拖拽物會完全跟隨鼠標移動。如果是選擇“with drag x”,則是跟隨鼠標x軸(水平)移動,垂直方向位置不變。如果是選擇“with drag y”,則是跟隨鼠標y軸(處置)移動,水平方向位置不變。
第四步:
雙擊“OnDragDrop”, 在Case Editor中設置如下:
注意此處在右下角的Move下拉菜單中默認是“to x,y beofore drag”,也就是説拖拽物在鼠標左鍵鬆開的時候,會回到起始位置。如果此處選擇“with drag x”,則拖拽物停留於鼠標x軸座標處。如果是選擇“with drag y”,則拖拽物停留於鼠標的y軸座標處。
點擊“OK”後保存設置並退出Case Editor。
至此最簡單的拖拽效果就已經實現了。按“F5”可在瀏覽器中查看效果。
哈,這次就先分享這麼多,希望大家能通過這兩個小小的例子,能夠更加熟悉Axure中Case Editor、Condition Builder和Set Value Editor的使用方法。如果有什麼問題,歡迎大家交流指正~
-
asp.net 操作INI文件讀寫類實例代碼
操作INI文件讀寫類實例代碼複製代碼代碼如下:usingSystem;usingropServices;using;using;namespaceCommon{//////INI文件讀寫類。///publicclassINIFile{publicstringpath;publicINIFile(stringINIPath){path=INIPath;}[DllImport("kernel32")]privatestaticex...
-
學習JavaScript的7個理由
為什麼要學習JavaScript?學習JavaScript對我們的工作有什麼幫助麼?下面YJBYS小編為大家講解!需求我之所以這樣説的主要原因是,隨着JavaScript的日漸成熟,以及方案變得越來越可行,我們對JavaScript程序員的需求正在持續增長。JavaScript在需求比例上已經超過了C#,僅...
-
JavaScript 函數表達式
JavaScript中創建函數主要有兩種方法:函數聲明和函數表達式。這兩種方式都有不同的適用場景。這篇筆記主要關注的是函數表達式的幾大特點以及它的使用場景,下面一一描述。主要特點可選的函數名稱函數名稱是函數聲明的必需組成部分,這個函數名稱相當於一個變量,新定...
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...