中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

今天，教大家如何做一個(gè)樹型結(jié)構(gòu)，以及節(jié)點(diǎn)與節(jié)點(diǎn)之間相互交互的內(nèi)容。

演示地址：http://b0bgsg.axshare.cn/#g=1&p=樹

一、效果介紹

功能介紹：

展開/收起：點(diǎn)擊箭頭，可以展開或收起子節(jié)點(diǎn)。

添加子節(jié)點(diǎn)：點(diǎn)擊添加子節(jié)點(diǎn)按鈕，可添加子節(jié)點(diǎn)，并在本節(jié)點(diǎn)自動(dòng)生成箭頭，如果本節(jié)點(diǎn)下方有內(nèi)容，自動(dòng)打開內(nèi)容。

添加同級(jí)節(jié)點(diǎn)：點(diǎn)擊添加同級(jí)節(jié)點(diǎn)按鈕，可添加同級(jí)節(jié)點(diǎn)。

刪除節(jié)點(diǎn)：點(diǎn)擊刪除節(jié)點(diǎn)按鈕：刪除該節(jié)點(diǎn)和該節(jié)點(diǎn)的子節(jié)點(diǎn)，如果該節(jié)點(diǎn)父節(jié)點(diǎn)只有該子節(jié)點(diǎn)，父節(jié)點(diǎn)箭頭自動(dòng)消失。

修改節(jié)點(diǎn)內(nèi)容：點(diǎn)擊文字可以修改內(nèi)容。

修改添加默認(rèn)提示語(yǔ)：enter text……可在原型內(nèi)的”提示語(yǔ)”文本框，修改內(nèi)容即可。

編輯默認(rèn)樹列表：在中級(jí)器內(nèi)填寫即可，簡(jiǎn)單實(shí)用。

二、使用方法

在中繼器中編輯：
no：第n個(gè)一級(jí)內(nèi)容就寫a00000000，例如第一個(gè)一級(jí)內(nèi)容：100000000；第a個(gè)一級(jí)內(nèi)容下的第b個(gè)二級(jí)內(nèi)容就寫a0b000000（n>9時(shí)，mn000000）；以此類推。6級(jí)內(nèi)容為小數(shù)點(diǎn)后面的數(shù)

column：幾級(jí)內(nèi)容就在幾級(jí)column里填寫

jiantou：左邊的展開箭頭，1代表顯示，其他代表隱藏

see：1代表顯示，其他代表隱藏

xuan：箭頭的方向,1代表向下，其他代表向右

修改添加默認(rèn)提示語(yǔ)：enter text…可在原型內(nèi)的”提示語(yǔ)”文本框，修改內(nèi)容即可。

三、制作方法

（1）設(shè)置中繼器內(nèi)的表格

如下圖所示填寫中繼器

（2）邏輯思路

no為主要邏輯，用于定位，不可重復(fù)。小數(shù)點(diǎn)后兩位代表六級(jí)內(nèi)容，個(gè)位和十位代表5級(jí)內(nèi)容，百位和千位代表4級(jí)內(nèi)容，萬(wàn)位和十萬(wàn)位代表三級(jí)內(nèi)容，百萬(wàn)位和千萬(wàn)位代表二級(jí)內(nèi)容，億以上代表一級(jí)內(nèi)容。

column1-6,填寫顯示的內(nèi)容

jiantou：左邊的展開箭頭，1代表顯示，其他代表隱藏，如果當(dāng)前節(jié)點(diǎn)有子節(jié)點(diǎn)，需要填1

see：1代表顯示，其他代表隱藏

xuan：箭頭的方向,1代表向下，其他代表向右

（3）中繼器內(nèi)材料

箭頭一個(gè)，文本框一個(gè)，添加同級(jí)節(jié)點(diǎn)按鈕一個(gè)，添加子節(jié)點(diǎn)按鈕一個(gè)，刪除按鈕一個(gè)。

（4）具體交互

中繼器載入時(shí)：篩選可見的節(jié)點(diǎn)，see=1。

每項(xiàng)加載時(shí)：設(shè)置內(nèi)容、箭頭。

展開和收起：點(diǎn)擊箭頭時(shí)，更新子節(jié)點(diǎn)的see，如果要展開就設(shè)為1，否則設(shè)為0,同時(shí)設(shè)置該節(jié)點(diǎn)箭頭方向，展開向下xuan為1，收起向右xuan為0。

添加子節(jié)點(diǎn)：點(diǎn)擊添加子節(jié)點(diǎn)，先設(shè)置所有子節(jié)點(diǎn)的no數(shù)字+一個(gè)數(shù)，子節(jié)點(diǎn)是6級(jí)就加0.1,五級(jí)就加1，如此類推，然后添加一個(gè)新的子節(jié)點(diǎn)，no為該節(jié)點(diǎn)+1個(gè)數(shù)，原理同上，最后排序。

添加同級(jí)節(jié)點(diǎn)：該節(jié)點(diǎn)下面所有節(jié)點(diǎn)的no加一個(gè)數(shù)字，如果該節(jié)點(diǎn)是6級(jí)，就加0.1,五級(jí)就加1，如此類推。然后添加一個(gè)新的同級(jí)節(jié)點(diǎn)，no為該節(jié)點(diǎn)+1個(gè)數(shù)，原理同上，最后排序。

刪除節(jié)點(diǎn)：刪除該節(jié)點(diǎn)以及該節(jié)點(diǎn)下所有的子節(jié)點(diǎn)。

修改節(jié)點(diǎn)內(nèi)容：點(diǎn)擊文本框，修改內(nèi)容后，失去焦點(diǎn)時(shí)，跟新改行的column。

總結(jié)

該原型非常實(shí)用，但制作相對(duì)復(fù)雜，新手不容易完成。

制作完成后，以后使用方便，僅需簡(jiǎn)單填寫樹中繼器的內(nèi)容，即可擁有完美的效果，所以強(qiáng)烈推薦給各位使用。

本文由 @梓賢Vigo 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議