javascript - ASP.NET 中通用容器的设计模式

Question

我们有一个 ASP.NET 3.5 站点，它有多个搜索页面，可以自定义您要搜索的内容。这些搜索页面很相似，因为它们的行为相同并且具有相同的设计，但实际的搜索字段可能会有所不同，具体取决于您要搜索的表。

我正在更新它以使用 div 和折叠/展开 Javascript 来隐藏用户未使用的搜索字段 block 。我想将此更改应用于所有搜索页面(至少有 10 个)，而无需重新实现它们。 IE。我想将所有通用代码(Javascript、CSS、基本 HTML 等)保留在同一个位置，并且只为每个页面实现单独的搜索字段。为了尝试展示我正在谈论的内容，这里是我创建的新搜索的屏幕截图:

alt text http://img442.imageshack.us/img442/7661/searchsj.png

在此示例中，有三个搜索字段。所有者、地址或包裹。在某些搜索中，地 block 将与不同的搜索类型交换，例如邻居。有没有一种方法可以将基本模板保留在一个位置，而只需填写每个搜索页面的搜索 block 的内容？谢谢!

Answer 1

我认为搜索 block 的 HTML 并没有那么复杂，因此尝试以某种方式对它们进行模板化可能有点过分，只需开发一个可以重复使用 CSS 和 Javascript 的标准结构即可。

这里有一些可以帮助您入门的内容(我假设使用 jQuery 或其他库是可以接受的，如果不能，请更新问题):

<div class="search-box">
    <form action="#" method="get">
        <h2>Search by Owner Name</h2>
        <fieldset>
            ... the search form ...
        </fieldset>
    </form>
</div>
<div class="search-box">
    <form action="#" method="get">
        <h2>Search by Owner Name</h2>
        <fieldset>
            ... the search form ...
        </fieldset>
    </form>
</div>
<div class="search-box">
    <form action="#" method="get">
        <h2>Search by Owner Name</h2>
        <fieldset>
            ... the search form ...
        </fieldset>
    </form>
</div>

.search-box {
    border: 1px solid #ccc;
}
.search-box h2 {
    background: transparent url(images/gradient.png) repeat-x;
    border: 1px solid #aaa;
    cursor: pointer;
}

.search-box.closed fieldset {
    display: none;
}

$(document).ready(function() {
    $('.search-box').addClass('closed').find(':first').removeClass('closed');
    $('.search-box h2').click(function() {
        // This is where you might implement some animation, or use an accordian plugin
        $('.search-box:not(.closed)').addClass('closed');
        $(this).parents('.search-box').removeClass('closed');
    });
});