LLWiki正在建设中，欢迎加入我们！
“Widget:As-song”的版本间差异
跳转到导航
跳转到搜索
小 标签：移动版网页编辑 移动版编辑 |
小 |
||
| 第1行： | 第1行： | ||
<noinclude>{{doc|content=用於[[LoveLive!學園偶像祭ALL STARS歌曲列表]]，請使用{{tl|AS song select}}調用。}}</noinclude><includeonly><!--{if !isset($wgWidgetAsSong) || !$wgWidgetAsSong}--><!--{assign var="wgWidgetAsSong" value=true scope="global"}--><script> |
<noinclude>{{doc|content=用於[[LoveLive!學園偶像祭ALL STARS歌曲列表]]，請使用{{tl|AS song select}}調用。}}</noinclude><includeonly><!--{if !isset($wgWidgetAsSong) || !$wgWidgetAsSong}--><!--{assign var="wgWidgetAsSong" value=true scope="global"}--><script defer src="/zh?title=user:bhsd/widget/as-song.js&action=raw&ctype=text/javascript"></script><style> |
||
//</includeonly>JavaScript脚本：<pre lang=js> |
|||
window.addEventListener('load', function() { |
|||
document.querySelectorAll( '.as-song-container' ).forEach(function(ele) { |
|||
var select = document.createElement('select'), |
|||
nodeList = ele.querySelectorAll('.as-song'), |
|||
optionArray = []; |
|||
ele.insertBefore(select, ele.firstChild); |
|||
select.lang = 'ja'; |
|||
nodeList.forEach(function(table, i) { |
|||
var option = new Option(table.querySelector('big').textContent, i); |
|||
optionArray.push(option); |
|||
}); |
|||
optionArray = optionArray.sort(function(a, b) { |
|||
return a.text <= b.text ? -1 : 1; |
|||
}); |
|||
optionArray.forEach(function(option) { |
|||
select.add(option); |
|||
}); |
|||
select.dataset.oldIndex = optionArray[0].value; |
|||
nodeList[select.dataset.oldIndex].style.display = 'table'; |
|||
select.onchange = function() { |
|||
nodeList[select.dataset.oldIndex].style.display = 'none'; |
|||
select.dataset.oldIndex = optionArray[select.selectedIndex].value; |
|||
let currentNode = nodeList[select.dataset.oldIndex]; |
|||
currentNode.style.display = 'table'; |
|||
currentNode.querySelectorAll( '.lazy-image-placeholder' ).forEach(function(e) { |
|||
let img = document.createElement('img'); |
|||
img.src = e.dataset.src; |
|||
e.replaceWith(img); |
|||
}); |
|||
}; |
|||
}); |
|||
}); |
|||
//</pre> |
|||
<includeonly> |
|||
</script><style> |
|||
/* </includeonly>CSS样式表：<pre lang=css> */ |
/* </includeonly>CSS样式表：<pre lang=css> */ |
||
.as-song-container |
.as-song-container .chosen-container { |
||
font-size: |
font-size: 1em; |
||
padding: 2px; |
|||
margin-right: 1em; |
margin-right: 1em; |
||
font-family: Arial, Helvetica, 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , '游ゴシック' , '游ゴシック体' , YuGothic , 'Yu Gothic' , 'メイリオ' , Meiryo , 'ＭＳ ゴシック' , 'MS Gothic' , HiraKakuProN-W3 , 'TakaoExゴシック' , TakaoExGothic , 'MotoyaLCedar' , 'Droid Sans Japanese' , sans-serif; |
|||
} |
} |
||
@media only screen and (max-width:720px) { |
@media only screen and (max-width:720px) { |
||
.as-song-container |
.as-song-container .chosen-container { |
||
width:100%; |
width:100%; |
||
box-sizing:border-box; |
box-sizing:border-box; |
||
} |
} |
||
} |
} |
||
.as-song-container |
.as-song-container > .chosen-container + div { |
||
display: inline-block; |
display: inline-block; |
||
vertical-align: top; |
vertical-align: top; |
||
2020年11月17日 (二) 15:16的版本
CSS样式表：
*/
.as-song-container .chosen-container {
font-size: 1em;
margin-right: 1em;
}
@media only screen and (max-width:720px) {
.as-song-container .chosen-container {
width:100%;
box-sizing:border-box;
}
}
.as-song-container > .chosen-container + div {
display: inline-block;
vertical-align: top;
}
.as-song-container .as-song {
display: none;
}
/*