天天看點

社群設計細節 : 使用者可選是否在新視窗中打開主題 社群設計細節 : 使用者可選是否在新視窗中打開主題

一般的,很多社群在清單頁裡浏覽具體主題的時候,基于各種考慮.預設要麼全部打開新視窗,要麼不打開新視窗,使用者根本沒有選擇的餘地,今天發現一個論壇,提供了一個複選按鈕CheckBox,讓使用者自己決定是否打開新視窗浏覽主題. 在這點上做的不錯,贊一下,順便也要把人家的技術給"偷"過來.其實比較簡單了.關鍵是人家的設計思想有可借鑒之出,為了完整.把代碼部分也弄出來:

社群設計細節 : 使用者可選是否在新視窗中打開主題 社群設計細節 : 使用者可選是否在新視窗中打開主題

function switchTopicOpenMode(box)

社群設計細節 : 使用者可選是否在新視窗中打開主題 社群設計細節 : 使用者可選是否在新視窗中打開主題
社群設計細節 : 使用者可選是否在新視窗中打開主題 社群設計細節 : 使用者可選是否在新視窗中打開主題
社群設計細節 : 使用者可選是否在新視窗中打開主題 社群設計細節 : 使用者可選是否在新視窗中打開主題

{

社群設計細節 : 使用者可選是否在新視窗中打開主題 社群設計細節 : 使用者可選是否在新視窗中打開主題

    var isPopNew   = box.checked;

社群設計細節 : 使用者可選是否在新視窗中打開主題 社群設計細節 : 使用者可選是否在新視窗中打開主題

    var anchorTags = document.getElementsByTagName('a');

社群設計細節 : 使用者可選是否在新視窗中打開主題 社群設計細節 : 使用者可選是否在新視窗中打開主題

    for (var i=0; i<anchorTags.length; i++)

社群設計細節 : 使用者可選是否在新視窗中打開主題 社群設計細節 : 使用者可選是否在新視窗中打開主題
社群設計細節 : 使用者可選是否在新視窗中打開主題 社群設計細節 : 使用者可選是否在新視窗中打開主題
社群設計細節 : 使用者可選是否在新視窗中打開主題 社群設計細節 : 使用者可選是否在新視窗中打開主題
社群設計細節 : 使用者可選是否在新視窗中打開主題 社群設計細節 : 使用者可選是否在新視窗中打開主題

        if (anchorTags[i].getAttribute('name') != 'topiclink') continue;

社群設計細節 : 使用者可選是否在新視窗中打開主題 社群設計細節 : 使用者可選是否在新視窗中打開主題

        anchorTags[i].target = isPopNew ? '_blank' : '_self';

社群設計細節 : 使用者可選是否在新視窗中打開主題 社群設計細節 : 使用者可選是否在新視窗中打開主題

    }

社群設計細節 : 使用者可選是否在新視窗中打開主題 社群設計細節 : 使用者可選是否在新視窗中打開主題

}

然後放個CheckBox:

<input type='checkbox' onclick='javascript:switchTopicOpenMode(this)' id='keyofpopwin' />在新視窗中打開主題

另外.需要為清單的每個連結加上name=topiclink

(請您對文章做出評價)

繼續閱讀