ご無沙汰しております。
というか、そもそも、このブログそのものが投稿が少ない。
しかも、システム屋が書いているわりに、プログラムな話題がほとんど無い。これは問題だ。
というわけで、いきなりだが、私の備忘録とか調査結果的なプログラミングネタは大量に溜まっているので、少しずつ掲載していこうと思う。「あくまでも私的な備忘録である」とあえて書いておこう。そうしないと面倒なことになる。本当に面倒な世の中だ。どう面倒な事になるかを書くと、原稿用紙10枚分ぐらい書かねばならないので、それは省略する。
さらに付け加えると、私はHTMLやCSS、JSのエキスパートでは無い。（つまりは大した事が無いのである。）
で、なんの話だったっけ？
そうそう
WEB画面で、長い文章を短く表示させて、「続きを読む」等のボタンで、全部表示させたり、また短くしたいという話だ。
結論から言うと、readmoreというのを発見したので、実装してみた。
たとえば以下のサイト、とある、しがない鉄道模型屋のサイトなのだが、左サイドバーにお知らせが表示されている。
赤い点線の部分だ。
たまたまなのだが、２つ目のボックスがやたら長い。そんなわけで、ここに実装してみよう。
まず公式サイト（GitHub）
https://github.com/jedfoster/Readmore.js
から、readmore.jsを持ってくる。この例では、HTMLファイルがあるフォルダ（ディレクトリ）の下のjsというフォルダにreadmore.jsを置いた。
そして、このページの末尾の方に以下のように記述する
1行目はJQueryである。これは無いと困るだろう。既にお使いなら、この行は不要だし、お使いでなければ、適当なVersionを設定すると良いだろう。
2行目はbootstrapのスクリプトである。たまたまこのサイトでは使用している。無くても問題ない。ちなみにVersionは4である。
readmore関数に渡しているパラメータ部分だが、
speed:750 は文字通り、スピードであろう。展開速度を設定すると思われる。必要な方は公式を確認して欲しい
collapsedHeight: 120 は短いときの高さ。moreLink: は広げるときのリンクを定義lessLink: は短くするときのリンク定義
<?=$cShopInfo->info1?>
などの部分は、PHPのコードで、DBから持ってきた３つのメッセージを設置している。
これもたまたまこのサイトがそうなっているというだけで、状況によっては、直接メッセージを書く場合もあるだろう。
また、'fr1'はこれもこのサイト特有のスタイルで、オレンジ色の枠が定義されている。直接関係ないので、気にしなくて良い。例としては、以下のようなコードで良い気もする。
ともあれ、この「ほげほげ」な例は置いておいて、元のコードに戻ると、２番目が、今回Readmoreを入れたい行なので、以下のように記述する。
以上で完了なので、動作確認してみると、
なんと、ボックスは短くなったが、欄外のなって溢れた文字がそのまま以降のコンテンツに重なって表示される。「続きを読む」リンクを押すと通常の表示になるが、閉じるとまたこうなる。
これにははまり、色々やってみたのだが、結論としては、redmoreで表示を制御する段落のセレクタ（今回の例では'open'クラス）にスタイル
overflow: hidden;
を追加すれば良い事が発覚。
ヘッダ部分に以下のように記述した。面倒だから直接書いたが、普通はCSSファイルに書くのだろう。
<style>
.open{
overflow: hidden;
}
</style>
溢れた分が表示されなくなった。
「続きを読む」リンクを押すと全文が表示され、さらに末尾の行に「短くする」というリンクが表示される。それを押すとまた上の図のように短くなる。
以上なのだが、このサイトにおいては、せっかくBootstrap4があるので、パラメータ部分を次のようにしてみた。つまりは、Bootstrapのボタンリンクにしてみた。
続きを読むリンクがボタンになった。
 |
| 閉じている状態（初期状態） |
 |
| 開いている状態 |
以上です。
----
関連リンク
ReadmoreのGitHub
https://github.com/jedfoster/Readmore.js
参考にしたサイト
ここの内容に沿って作成し、CSSを追加した。
「続きを読む」ボタンで要素の開閉を簡単に組込めるプラグインReadmore.js－WEBLAB
https://www.weblab.co.jp/staff/creator/6743.html
0 件のコメント:
コメントを投稿