Аккордеонное меню Jquery в mvc2 для отображения определенных новостей - PullRequest
Новая
       14

Аккордеонное меню Jquery в mvc2 для отображения определенных новостей

1 голос
/ 11 марта 2011

Я использую jquery для аккордеонного меню, у меня есть новостное окно на моей домашней странице, когда пользователь нажимает на конкретную заголовок новости, он переходит на страницу новостей, где все заголовки новостей заполняются в стиле аккордеонного меню, описание новостей скрывается, когда пользователь нажимает на заголовок новости, описание новости выходит в стиле аккордеона, в то время как все остальные меню скрыты, только заголовок виден. Что я ищу, так это когда пользователь нажимает на заголовок новости на главной странице, только это описание должно будет отображаться на странице новостей, в настоящее время отображаются все заголовки, а описание скрыто в меню аккордеона, я хочу отобразить описание той новости, которая будет отображаться, которая была нажата на главной странице, в то время как все остальные заголовки новостей должны быть видны не описание. Также я использую MVC2.

Я просто не знаю, как внедрить jquery для отображения определенных новостей, которые были нажаты на главной странице. Ниже приведен код, который я использую: news.aspx 

<div id="accordion">
    <% foreach (var item in Model)
    { %>
        <h3 class="first">
            <span class="left"><a href="#">
            <%: item.Title %></a></span>
            <span class="green2 right">
            <%: String.Format("{0:dd.MM.yy}", item.DateAdded) %></span>
        </h3>
        <div class="accor_cnt">
            <div class="text">
                <p class="green2 title">
                    <%: item.Title %>
                </p>
                <img src="/content/images/structure/newsdivider.gif" alt="" class="newsdivider" />
                <p class="description">
                    <%: item.Article %>
                </p>
            </div>
            <!--END description-->
            <div class="newsMainimage">
                <img src="/content/images/content/<%: item.ImageLarge %>" alt="" />
            </div>
            <!--END newsMainimage-->
            <div style="clear: both;"></div>
        </div>
        <!--END accor_cnt -->
    <% } %>
</div>

JavaScript на главной странице: 

 $(document).ready(function () {

        //When page loads...
        $(".tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content


        //On Click Event
        $("ul.tabs li").click(function () {

            $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content

            var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active ID content
            return false;
        });



        $("#accordion").accordion({
            active: false,
            collapsible: true,
            autoHeight: false
        });

        //FUNCTION FOR SUB ROLLOVER MENU
        $(".monthlybtn img").hover(function () {
            $(this).attr("src", $(this).attr("src").split(".").join("-hover."));
        }, function () {
            $(this).attr("src", $(this).attr("src").split("-hover.").join("."));
        });

    });

CSS: 

ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 20px; /*--Set height of tabs--*/
    width: 357px;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 20px; /*--Subtract 1px from the height of the unordered list--*/
    line-height: 20px; /*--Vertically aligns the text within the tab--*/
    /*border: 1px solid #999; place divider here*/
    border-left: none;
    margin-bottom: 0px; /*--Pull the list item down 1px--*/
    overflow: hidden;
    position: relative;
}
ul.tabs li a {
    text-decoration: none;
    color: #fff;
    display: block;
    font-size: small;
    padding: 0px 10px;
    /*border: 1px solid #56DB00;  --Gives the bevel look with a 1px white border inside the list item--*/
    outline: none;
}
ul.tabs li a:hover {
    /*background: #ccc;*/
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
    background: #56DB00;
    /*border-bottom: 1px solid #56DB00;*/ /*--Makes the active tab look like it's connected with its content--*/
}


.tab_container {
    border:1px #525453 solid;
    overflow: hidden;
    clear: both;
    float: left; width:357px;
    margin-top:5px;
    background:url(/content/images/structure/upcoming_bg_trans.png) repeat;
}
.tab_content {
    padding: 5px;
    font-size: 11px;
}

1 Ответ

0 голосов
/ 11 марта 2011

Сначала вам нужно будет передать дополнительный параметр в Запросе, когда пользователь переходит с домашней страницы на страницу новостей в URL (некоторые id новостей) ивам нужно вычислить индекс этого новостного элемента в аккордеоне и сделать его активным.

Вот код ... 

$(document).ready(function(){ 
         var newsID = getParameterByName("newsID");
         var newsIndex = getNewsIndesByID(newsID);
         //this you'll have to figure out
         $("#accordion").accordion({
            active: false,
            collapsible: true,
            autoHeight: false,
            active:newsIndex 
        });   
      });

function getParameterByName(name) {      
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regexS = "[\\?&]" + name + "=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(window.location.href);
        if (results == null)
         return "";
         else
        return decodeURIComponent(results[1].replace(/\+/g, " "));    
}`

Вы можете рассмотретьсохраняем идентификатор + индекс новостей в каком-то скрытом поле и получаем индекс там .. Всего наилучшего

...