JSメーカー
section-jsmaker.jsp
HTMLやCSSのソース（SOURCE）と処理内容の入力で、AIが最適なコードを自動生成するエレメントです。
必要に応じてHTMLの修正点も提示され、生成コードはそのままページに反映可能です。
※実際の利用時には、以下のデザインイメージは表示されず、生成されたコードのみが表示されます。
template/section-jsmaker.jsp
Outline Parameter
oldt=$active
olft=@outline
Init Parameter
none
Outline Parameter
oldt=$active
olft=@outline
Init Parameter
none
-
表示非表示
ボタンがクリックされたら、.box の表示・非表示を切り替える。
2025.04.17 15:13
jquery
SOURCE
<div id="target">
<div class="box">WHAT'S SPIKEY</div>
<button>CLICK</button>
</div>既存のHTMLを変更する必要はありません$('#target button').click(function() {
$('#target .box').toggle();
}); -
カラーチェンジ
liをクリックしたらそのクラス名を .text に同名のクラス名を追加して色を変える
2025.04.18 11:47
vue
SOURCE
<div id="target">
<div class="text">WHAT'S SPIKEY</div>
<ul>
<li class="red">■</li>
<li class="blue">■</li>
<li class="yellow">■</li>
</ul>
</div>すべてのliタグにv-on:click='changeColor'を追加し、divタグにref='text'を追加します。
new Vue({
el: '#target',
methods: {
changeColor: function(event) {
this.$refs.text.className = 'text ' + event.target.className;
}
}
}).red {
color: red;
}
.blue {
color: blue;
}
.yellow {
color: yellow;
}
※デザインイメージは、デフォルトスタイルを適用。
※データ構成は、以下データアイテムを参照。
※JAVASCRIPTとして使用するには埋込タグのtempパラメータに"?script=1"を追加。
<!--%アクション="/WEB-PUB/actions/webPubTemp.jsp" temp="section-jsmaker.jsp"--><!--"pubAct.jsp"--><!--/%アクション-->