Axure7.0教程(三)中繼器的使用(3)
本教程案例下載:axure7.0教程_小樓作品(三)中繼器的使用(3)?
在上一節教程axure7.0教程(一)中繼器的使用(1)和axure7.0教程(二)中繼器的使用(2)中我們分別講解了增、刪兩個功能,那在今天的教程中我們來講一下簡單的修改功能:
比如,我們覺得商品的價格是應該可以修改的,那么我們在中繼器中主頁中添加一個修改的按鈕(動態面板,點擊之后變成保存)和一個用來修改價格的輸入框,并設置中繼器的事件來實現這個效果。
怎么做呢?步驟也非常的簡單,我們把按鈕拖進中繼器的主頁中適當的位置,然后轉化成動態面板,并且在動態面板中增加一個狀態叫保存,增加這個狀態的時候,我們不用像axure6.5那樣,新增一個狀態然后添加按鈕,修改文字,在axure7.0中,可以直接復制選中的狀態為新狀態,你只需要修改新狀態的名字和里面的文字就可以了。然后我們分別設置著兩個狀態中按鈕的事件(onclick):
修改按鈕事件:修改按鈕事件,要負責把隱藏的文本框顯示出來,并且把所在的動態面板轉換成保存的狀態;本來沒什么好說的,但是目前7.0.3113版本中存在bug,我們要在顯示中繼器交互的onload事件中多加一個隱藏文本框的事件,否則丫的不給你隱藏!順便提一下,如果你隱藏的是動態面板,那就要在顯示動態面板的事件前,多加一個隱藏動態面板的事件,否則丫的不給你顯示,要點三下才能顯示!
另外,特意提到的是,在axure7.0中,元件都可以隱藏(這個功能在右鍵中取消了,新的位置在元件坐標值編輯框的左面,眼睛形狀的圖標)和移動,一般情況下無需再轉換成動態面板了。
保存按鈕事件:這是要重點說的了,在報存按鈕的onclick事件中,我們要添加以下事件,來實現修改原有數據的效果。
事件1:像刪除功能的實現一樣,我們需要先把保存按鈕添加到中繼器的項目中,這樣才能夠在每個模塊中,對該模塊的數據進行操作,這是一對一的;
事件2:然后我們設置編輯選定項目,選定中繼器后,在屬性中選擇中繼器中價格的項目名,并把新價格文本框中的值,賦給這個屬性。
附:通過局部變量獲取文本框的文字賦給屬性
事件三:從中繼器中刪除選定的項目;與上一篇教程刪除中的操作不同,這個刪除選定的項目,是指從中繼器中解除我們在事件1中做的綁定。而不像上一篇教程中刪除按鈕并且刪除關聯的一行數據;在選擇事件時,要記住選擇中繼器事件中的第3個,而不是第5個。
那么,為什么這么做呢?你可以在中繼器中多添加幾行數據,在保存onclick事件中不設置本事件,然后生成原型試一下,你會發現,你的每一次修改其他模塊中的價格都會跟著變動。
好了,這個效果講解完畢,接下來,就是見證奇跡的時刻!你做對了么?
作者:小樓
講得好復雜
沒看明白!
不倫不類,不懂得教人