Axure8.0|動態(tài)面板內(nèi)容簡單切換技巧
無論做web段還是移動端,常常會用到動態(tài)面板固定在某個區(qū)域來變換內(nèi)容,達(dá)到節(jié)省空間的作用,今天分享的就是如何實(shí)現(xiàn)這種方式。
預(yù)覽效果:
一、元件準(zhǔn)備
以IT/互聯(lián)網(wǎng)、設(shè)計創(chuàng)作、職場金融這三組為例,所涉及到的元件分別為it1(小豎條矩形)、it(標(biāo)識”IT/互聯(lián)網(wǎng)”矩形)、 design1(小豎條矩形)、design(標(biāo)識“設(shè)計創(chuàng)作”矩形)、 finance1(小豎條矩形)、finance(標(biāo)識“職場/金融”矩形)以及最后的動態(tài)面板neirong(分為三組,名稱分別對應(yīng)it、design、finance)。
注:小豎條矩形默認(rèn)顏色是灰色的,這里填充顏色只是為了看清楚。
二、添加事件
1,將三個小豎條矩形設(shè)置選項(xiàng)組,名稱為“標(biāo)記”,并且分別添加選中事件:填充顏色 #2CC27B。
2,將三個矩形設(shè)置選項(xiàng)組,名稱為“課程”,并且分別添加選中事件:填充顏色 白色。
釋:這里設(shè)置選項(xiàng)組的目的是為了當(dāng)點(diǎn)擊其中一個為選中時,其他兩個就會變?yōu)椴贿x中。
3,鼠標(biāo)單擊 “it(IT/互聯(lián)網(wǎng))” 設(shè)置動態(tài)面板neirong ,選擇狀態(tài) Value,狀態(tài)名稱 [[this.name]];
選中 it1和it。
將it的鼠標(biāo)單擊事件復(fù)制然后粘貼到“desgin(藝術(shù)設(shè)計)”、finance(職業(yè)/金融),且分別將選中對應(yīng)改為 design1和design、finance1和finance。
4,針對上下拖動動態(tài)面板而不超出框架這一實(shí)現(xiàn)方式可以參考上一期的?Axure8.0|移動端上下滑動不出屏??。
三、效果
具體效果請點(diǎn)擊右側(cè)網(wǎng)址?http://67r9k4.axshare.com/#g=1&p=index?。
作者:樂悠悠,QQ:714226583,產(chǎn)品新人,目前在找工作。
本文由 @樂悠悠 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
不知道為啥,你寫的,我都看不懂,明明有更簡單的方式,你每次非用什么函數(shù),上次那篇也看不懂,哪個老師教你的
什么簡單的辦法啊,求教
狀態(tài)名稱或序號用[[this.name]],有什么特殊含義嗎,還是隨便取的,小白求指導(dǎo)
這個是函數(shù),如果是當(dāng)前元件直接默認(rèn)的就是this.name 如果是其他元件需要加元件只帶 如元件time 指代成t 然后名稱就是t.name
謝謝 ??