<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jTruncSubstr.js"></script>
<script type="text/javascript">
$().ready(function() {
$('.comment').jTruncSubstr({
length: 200,//表示させる文字数
minTrail: 0,//省略文字の最低文字数
moreText: "続きを読む",//非表示部分を表示するリンクの文字列
lessText: "閉じる",//表示した後、再び非表示にするリンクの文字列
ellipsisText: "...",//続きがあることを表示するための文字列
moreAni: "fast",//表示時のアニメーション速度
lessAni: "fast"//非表示時のアニメーション速度
});
});
</script>
<style>
.comment .truncate_more_link {
text-decoration: underline;
color: #1242b2;
}
</style>
<p class="comment">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
https://developers.google.com/speed/libraries/#jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
http://semooh.jp/jglycy/jquery-plugins/jtruncsubstrからjsファイルをダウンロードしてサーバーにアップ。
<script src="js/jTruncSubstr.js"></script>
<script type="text/javascript">
$().ready(function() {
$('.comment').jTruncSubstr({
length: 200,//表示させる文字数
minTrail: 0,//省略文字の最低文字数
moreText: "続きを読む",//非表示部分を表示するリンクの文字列
lessText: "閉じる",//表示した後、再び非表示にするリンクの文字列
ellipsisText: "...",//続きがあることを表示するための文字列
moreAni: "fast",//表示時のアニメーション速度
lessAni: "fast"//非表示時のアニメーション速度
});
});
</script>
<p class="comment">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
開閉リンクのクラス名:truncate_more_link
<style>
.comment .truncate_more_link {
text-decoration: underline;
color: #1242b2;
}
</style>
PC(幅1000px):文字数210文字で3行分。
SP(幅355px):95文字で4行分。
jTruncSubstr
アコーディオン表示の「続きを読む」が簡単に実装できるjQueryプラグイン『jTruncSubstr』
<script>
$(function(){
// #で始まるアンカーをクリックした場合に処理
$('a[href^="#"]').not('.class').not('#id a').click(function() {
// スクロールの速度
var speed = 400; // ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top - 15;
// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
スムーススクロールのスクリプトでは#で始まるaタグの場合すべてスクロールが効いてしまう。
#だけのaタグの場合(アンカー先がない、モーダルや表示スクリプトなど)、ページトップ(#)へスクロールしてしまう。
ページトップへスクロールしてしまうのを止めたいとき、notで特定のタグを除外できる。
$('a[href^="#"]').not('.class').not('#id a').click(function() {
スムーススクロール(除外するものをnotに)
特定のリンクをスムーススクロールさせないように除外させる
[jQuery]特定のリンクを除外しつつページ内スクロール【2017/03/29追記】
JavaScriptのonChangeイベントを使用し、セレクトボックスの値を変更したら指定のリンク先に遷移
<td class="alignC">
<select name="quantity[<!--{$item.cart_no|h}-->]">
<!--{section name=foo start=1 loop=51}-->
<option value="<!--{$smarty.section.foo.index}-->" <!--{if $item.quantity == $smarty.section.foo.index}-->selected=selected<!--{/if}-->><!--{$smarty.section.foo.index}--></option>
<!--{/section}-->
</select>
<a href="?" onclick="eccube.fnFormModeSubmit('form<!--{$key|h}-->','setQuantitys','cart_no','<!--{$item.cart_no|h}-->'); return false">変更</a>
</td>
を下に変更。
<td class="alignC">
<select name="quantity[<!--{$item.cart_no|h}-->]" onchange="eccube.fnFormModeSubmit('form<!--{$key|h}-->','setQuantitys','cart_no','<!--{$item.cart_no|h}-->'); return false">
<!--{section name=foo start=1 loop=51}-->
<option value="<!--{$smarty.section.foo.index}-->" <!--{if $item.quantity==$smarty.section.foo.index}-->selected=selected<!--{/if}-->>
<!--{$smarty.section.foo.index}-->
</option>
<!--{/section}-->
</select>
</td>
Javascript:セレクトボックス選択時にページ遷移する
教えてください。現在のカゴの中ページの数量変更をselectに変更
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container', {
loop: true,
loopAdditionalSlides: 3,
autoplayDisableOnInteraction: false,
slidesPerView: 1.5,
spaceBetween: 30,
centeredSlides: true,
speed: 1000,
autoplay: 3000,
observer: true,
observeParents: true,
preventClicks: true,
preventClicksPropagation: true,
paginationClickable: true,
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
})
</script>
ページネーション、アローのクリック後にオートプレーが止まるとき。
My swiper with Swiper.js stop autoplay after slide it with finger, why?
autoplaydisableOnInteraction: Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction.
autoplayDisableOnInteraction: false,
2ループ目以降の2個目のスライドが表示されないとき。
Slide disappear when using loop and centeredSlides
loopAdditionalSlides: Addition number of slides that will be cloned after creating of loop.
loopAdditionalSlides: 3,
レスポンシブで上手く表示されないとき。
Swiper slider not working unless page is resized
observer: Set to true to enable Mutation Observer on Swiper and its elements. In this case Swiper will be updated (reinitialized) each time if you change its style (like hide/show) or modify its child elements (like adding/removing slides).
observeParents: Set to true if you also need to watch Mutations for Swiper parent elements.
observer: true,
observeParents: true,
ページネーションのドットがクリックできないとき。
clickableClickable: If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type.
paginationClickable: true,
スワイプ中にリンクがクリックされるのを防ぐ。
preventClicks: Set to true to prevent accidental unwanted clicks on links during swiping.
preventClicks: true,
preventClicksPropagation: Set to true to stop clicks event propagation on links during swiping.
preventClicksPropagation: true,
The post Swiper.js スライダー コードまとめ first appeared on risalog.]]>