検索クエリーページのカスタマイズ

クエリーフォームには、検索コレクションの一連のチェックボックス、クエリー入力ボックス、および送信ボタンが含まれます。フォームは、<s1ws:form> タグに加えて <collElem>、<queryBox>、<submitButton> の各タグ、およびそれらのデフォルト値を使って作成されます。

<s1ws:form>
    <s1ws:collElem>
    <s1ws:queryBox> <s1ws:submitButton>
</s1ws:form>

クエリーフォームは、ページの中央やサイドバー上など、ページ内の任意の場所に配置できます。また、コレクション選択ボックス、クエリー文字列入力ボックス、送信ボタンが水平方向に一直線に並ぶクロスバーや、コレクションがチェックボックスとして表示され、その下にクエリー入力ボックスと送信ボタンが配置されるブロックなど、さまざまな形式で表示することもできます。

次の各例は、<searchForm> タグセットを使ってさまざまな形式のクエリーフォームを作成する方法を示しています。

水平バー

次のサンプルコードは、すべてのコレクションの選択ボックス、クエリー入力ボックス、および送信ボタンがすべて 1 行に配置されたフォームを作成します。

<s1ws:form>
    <table cellspacing="0" cellpadding="3" border="0">
    <tr class="navBar">
        <td class="navBar"><s1ws:collElem type=”select”></td>
        <td class="navBar">
            <s1ws:querybox size="30">
            <s1ws:submitButton class="navBar" style="padding: 0px; margin: 0px; width: 50px">
        </td>
    </tr>
    </table>
</s1ws:form>

サイドバーブロック

フォーム要素がサイドバーに配置され、サイドバーのほかの項目と同じ形式のタイトル「Search」を含むようなフォームブロックを作成できます。そのような配置の効果は、次の図に示すようになります。

フォーム要素がサイドバーに配置された、カスタマイズ後のクエリーページ

次に示すサンプルコードでは、フォームの本体部分に、選択可能な検索コレクションを表示するチェックボックスが 3 つ含まれており、それらは 1 列に並んでいます。クエリー入力ボックスと送信ボタンはその下に配置されています。

<s1ws:searchForm>
    <table>
<!--... ほかのサイドバー項目 ... -->
    <tr class="Title"><td>Search</td></tr>
    <tr class="Body">
        <td>
        <table cellspacing="0" cellpadding="3" border="0">
        <tr class="formBlock">
            <td class="formBlock"> <s1ws:collElem type="checkbox" cols="1" values="1,0,1,0" /> </td>
        </tr>
        <tr class="formBlock">
            <td class="formBlock"> <s1ws:querybox size="15" maxlength="50"> </td>
        </tr>
        <tr class="formBlock">
            <td class="formBlock"> <s1ws:submitButton class="navBar" style="padding: 0px; margin: 0px; width: 50px"> </td>
        </tr>
        </table>
        </td>
    </tr>
    </table>
</s1ws:searchForm>