Yomi-Search（perl）の長文サイト紹介文を折り畳みたい。

Question

raiden

4

3もっと見る

300pt

ウェブ制作

Yomi-Search（perl）の長文サイト紹介文を折り畳みたい。

フリーCGIサーチエンジンのYomi-Searchを稼動させることは出来ましたが、一か所、改造を試みていますがなかなかうまくいきません。

現在、サイト紹介文を長文にできるようにしています。
このテキストを頭の２行ほどだけ反映させて、途中からは「続きを読む」で折りたたむスプリクトを組みたいのです。

そこで検索で見つけたJavaScriptを試してみましたが、紹介文のファイルは$Slog[6]というデータ変数なので全ての文字が隠れてしまいます。（画像参考）

頭の2行くらいだけを残して折りたためる何かいい方法はありますでしょうか？
改造について知恵を貸してください。

回答の条件

1人5回まで

登録：2012/11/28 02:07:45
終了：2012/11/29 02:14:41

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

No.2

oil99917283202012/11/28 19:37:43

記事を折りたたむ JavaScript のソースコード

http://www.cmehappy.jp/websitetips/expander.html

これは最初から出来ています。
私が知りたいのは、多人数から投稿されるテキスト（$Slogという変数で渡される）を頭数行残して“自動”で折りたたむ方法です。
ページ数が多いので、すべてのページに自分でソースを書きこむことはできません。

2012/11/28 21:23:38

コメントはまだありません

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

a-kuma3 · Accepted Answer · 2012-11-28T09:06:31+09:00

紹介文を持っている要素に対して、以下のようなスタイルを設定しておきます。

height で高さを指定する
overflow-y を hidden にする

紹介文を広げたり、折りたたむときには、その要素の height を "auto" と "" (空文字列) で切り替えます。

ざっと、こんな感じのソースになります（jQuery 使ってます）。

<!-- 以下の１行を追記しました -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>
$(function() {
    $("#expand-button").click(function() {
        if (! $(this).attr("expanded")) {
            $(this).text("▲たたむ");
            var e = $("#message");
            e.css("height", "auto");
            $(this).attr("expanded", "Yes");
        } else {
            $(this).text("▼続きを読む");
            var e = $("#message");
            e.css("height", "");
            $(this).attr("expanded", null);
        }
    });
});
</script>
<style>
#message {
    height: 2.4em;
    overflow-y: hidden;
}
#container {
    border: 2px inset gray;
    padding: 0.5ex;
}
</style>

<div id="container">
    <a href="#" id="expand-button">▼続きを読む</a>
    <div id="message">
        紹介文
        紹介文
        紹介文
        紹介文
        紹介文
        紹介文
    </div>
</div>

jsFiddle で試したのがこちらです。
http://jsfiddle.net/zsmMW/

追記です（書き直しました）。

ソースを見てみました。行番号は、template/kt.html がベースです。
343行目付近の $Slog[6] を表示している辺りを変更します。

<tr id=log-3>
	<td>$Slog[6]</td>
</tr>

のところを、

<tr id=log-3>
	<td>
<!-- ここから -->
<div id="container">
    <a href="#" id="expand-button">▼続きを読む</a>
    <div id="message">
	$Slog[6]
    </div>
</div>
<!-- ここまで -->
	</td>
</tr>

のように変更して、33行目くらいの </head> 辺りを、以下のようにすれば大丈夫じゃないでしょうか。

</script>
<!-- ここから -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
    $("#expand-button").click(function() {
        if (! $(this).attr("expanded")) {
            $(this).text("▲たたむ");
            var e = $("#message");
            e.css("height", "auto");
            $(this).attr("expanded", "Yes");
        } else {
            $(this).text("▼続きを読む");
            var e = $("#message");
            e.css("height", "");
            $(this).attr("expanded", null);
        }
    });
});
</script>
<style>
#message {
    height: 2.4em;
    overflow-y: hidden;
}
#container {
    border: 2px inset gray;
    padding: 0.5ex;
}
</style>
<!-- ここまでを追加 -->

</head>
<body><a name=top></a>

さらに、追記です。

今、稼働させていて気付いたのですが、紹介サイトが一つの場合はいいのですが、検索結果で複数になった場合は２番目以降のものは稼動しないようです。
これは修正可能でしょうか？
何度もすみません。。

何度も、という意味では、ぼくも...

というわけで、複数あるメッセージに対応するために、id を使わないよう変更してみました。
変更内容はたいしたことありませんが、ちょこちょこいじってます。
<head> の辺りのコード。

</script>
<!-- ここから -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
@{[ '
$(function() {
    $(".expand-button").click(function() {
        if (! $(this).attr("expanded")) {
            $(this).text("▲たたむ");
            var e = $(this).next();
            e.css("height", "auto");
            $(this).attr("expanded", "Yes");
        } else {
            $(this).text("▼続きを読む");
            var e = $(this).next();
            e.css("height", "");
            $(this).attr("expanded", null);
        }
    });
});
' ]}
</script>
<style>
.message {
    height: 2.4em;
    overflow-y: hidden;
}
.container {
    border: 2px inset gray;
    padding: 0.5ex;
}
</style>
<!-- ここまでを追加 -->

</head>
<body><a name=top></a>

メッセージを表示する辺り。

<tr id=log-3>
	<td>$Slog[6]</td>
</tr>

のところを、

<tr id=log-3>
	<td>
<!-- ここから -->
<div class="container">
    <a href="#" class="expand-button">▼続きを読む</a>
    <div class="message">
	$Slog[6]
    </div>
</div>
<!-- ここまで -->
	</td>
</tr>

うまくいかなかった場合に備えて、jsFiddle でも確認してます。
http://jsfiddle.net/hKbLJ/1/embedded/result/

a-kuma3 · Accepted Answer · 2012-11-28T09:06:31+09:00

紹介文を持っている要素に対して、以下のようなスタイルを設定しておきます。

height で高さを指定する
overflow-y を hidden にする

紹介文を広げたり、折りたたむときには、その要素の height を "auto" と "" (空文字列) で切り替えます。

ざっと、こんな感じのソースになります（jQuery 使ってます）。

<!-- 以下の１行を追記しました -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>
$(function() {
    $("#expand-button").click(function() {
        if (! $(this).attr("expanded")) {
            $(this).text("▲たたむ");
            var e = $("#message");
            e.css("height", "auto");
            $(this).attr("expanded", "Yes");
        } else {
            $(this).text("▼続きを読む");
            var e = $("#message");
            e.css("height", "");
            $(this).attr("expanded", null);
        }
    });
});
</script>
<style>
#message {
    height: 2.4em;
    overflow-y: hidden;
}
#container {
    border: 2px inset gray;
    padding: 0.5ex;
}
</style>

<div id="container">
    <a href="#" id="expand-button">▼続きを読む</a>
    <div id="message">
        紹介文
        紹介文
        紹介文
        紹介文
        紹介文
        紹介文
    </div>
</div>

jsFiddle で試したのがこちらです。
http://jsfiddle.net/zsmMW/

追記です（書き直しました）。

ソースを見てみました。行番号は、template/kt.html がベースです。
343行目付近の $Slog[6] を表示している辺りを変更します。

<tr id=log-3>
	<td>$Slog[6]</td>
</tr>

のところを、

<tr id=log-3>
	<td>
<!-- ここから -->
<div id="container">
    <a href="#" id="expand-button">▼続きを読む</a>
    <div id="message">
	$Slog[6]
    </div>
</div>
<!-- ここまで -->
	</td>
</tr>

のように変更して、33行目くらいの </head> 辺りを、以下のようにすれば大丈夫じゃないでしょうか。

</script>
<!-- ここから -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
    $("#expand-button").click(function() {
        if (! $(this).attr("expanded")) {
            $(this).text("▲たたむ");
            var e = $("#message");
            e.css("height", "auto");
            $(this).attr("expanded", "Yes");
        } else {
            $(this).text("▼続きを読む");
            var e = $("#message");
            e.css("height", "");
            $(this).attr("expanded", null);
        }
    });
});
</script>
<style>
#message {
    height: 2.4em;
    overflow-y: hidden;
}
#container {
    border: 2px inset gray;
    padding: 0.5ex;
}
</style>
<!-- ここまでを追加 -->

</head>
<body><a name=top></a>

さらに、追記です。

今、稼働させていて気付いたのですが、紹介サイトが一つの場合はいいのですが、検索結果で複数になった場合は２番目以降のものは稼動しないようです。
これは修正可能でしょうか？
何度もすみません。。

何度も、という意味では、ぼくも...

というわけで、複数あるメッセージに対応するために、id を使わないよう変更してみました。
変更内容はたいしたことありませんが、ちょこちょこいじってます。
<head> の辺りのコード。

</script>
<!-- ここから -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
@{[ '
$(function() {
    $(".expand-button").click(function() {
        if (! $(this).attr("expanded")) {
            $(this).text("▲たたむ");
            var e = $(this).next();
            e.css("height", "auto");
            $(this).attr("expanded", "Yes");
        } else {
            $(this).text("▼続きを読む");
            var e = $(this).next();
            e.css("height", "");
            $(this).attr("expanded", null);
        }
    });
});
' ]}
</script>
<style>
.message {
    height: 2.4em;
    overflow-y: hidden;
}
.container {
    border: 2px inset gray;
    padding: 0.5ex;
}
</style>
<!-- ここまでを追加 -->

</head>
<body><a name=top></a>

メッセージを表示する辺り。

<tr id=log-3>
	<td>$Slog[6]</td>
</tr>

のところを、

<tr id=log-3>
	<td>
<!-- ここから -->
<div class="container">
    <a href="#" class="expand-button">▼続きを読む</a>
    <div class="message">
	$Slog[6]
    </div>
</div>
<!-- ここまで -->
	</td>
</tr>

うまくいかなかった場合に備えて、jsFiddle でも確認してます。
http://jsfiddle.net/hKbLJ/1/embedded/result/

Yomi-Search（perl）の長文サイト紹介文を折り畳みたい。

ベストアンサー

a-kuma3497321542012/11/28 09:06:31

その他の回答（1件）

a-kuma3497321542012/11/28 09:06:31ここでベストアンサー

oil99917283202012/11/28 19:37:43

記事を折りたたむ JavaScript のソースコード

コメント（0件)

この質問への反応（ブックマークコメント）