включая меню jquery и jqGrid на странице - PullRequest
Новая
       1

включая меню jquery и jqGrid на странице

3 голосов
/ 05 сентября 2010

У меня есть меню навигации, которое мне нужно включить на все мои страницы .... через jsp я просто включаю это меню 

<div id="header"><jsp:include page="../menu_v1.jsp"/></div>

, но проблема в том, что мое меню содержит <html><head></head><body></body></html> Теперь, когдаЯ хочу использовать мой jqGrid, который определен на моей новой странице внутри <script></script>, он не отображается .... потому что он конфликтует с моим сценарием jquery для заголовков ... Мои проверенные решения:

  1. Использование iframe, но это не позволит мне контролировать другие мои страницы.
  2. Вместо включения <jsp:include page=""/> я могу просто включить все компоненты с навигацией jquery на каждой странице в том же скрипте ... Что, вероятно, неэто хорошее решение, поскольку всякий раз, когда мне нужно включить больше компонентов в свое меню, чем вносить изменения на каждой странице ...

Если у кого-то есть лучшее решение ... пожалуйста, дайте мне знать.... спасибо!

Обновление: Код моего главного меню 

<script type="text/javascript"> 
//<![CDATA[

var navMenu = function(){

    jQuery("ul.subnav").parent().append("<span></span>"); 

    jQuery("ul.topnav li span").hover(function() { 

        jQuery(this).parent().find("ul.subnav").slideDown('fast').show(); 

        jQuery(this).parent().hover(function() {
        }, function(){  
            jQuery(this).parent().find("ul.subnav").slideUp('slow'); 
        });
        }).hover(function() { 
            jQuery(this).addClass("subhover"); 
        }, function(){  
            jQuery(this).removeClass("subhover"); 
    });

}
//]]>
</script>


    <div id="topbar">
         <div class="disclaimer"></div>
        <ul class="topnav">
            <li>
                <a href="#">Order Management</a>

                <ul class="subnav">
                    <li><a href="<%=request.getContextPath()%>/jsp/1.jsp">1</a></li>
                    <li><a href="<%=request.getContextPath() %>/jsp/2.jsp">2</a></li>

                </ul>
            </li>
            <li>
                <a href="#">3</a>
                <ul class="subnav">
                    <li><a href="<%=request.getContextPath()%>/3.jsp">3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">4</a>
                <ul class="subnav">
                <li><a href="<%=request.getContextPath()%>/4.1.do">4.1</a></li>
                <li><a href="<%=request.getContextPath()%>/jsp/4.2.jsp">Add Spog</a></li>
                <li><a href="<%=request.getContextPath()%>/jsp/4.3.jsp">4.3</a></li>

                </ul>
            </li>


        </ul>
    </div>

другая страница, использующая меню: 

script type="text/javascript">
//<![CDATA[
  jQuery(document).ready(function(){
    navMenu();        
  jQuery("#test").jqGrid({
                    sortable:true,
                    url: '',
                    datatype:'json',
                 colNames:['col1','col2', 'col3'], 
                 colModel:[  {name:'col1',index:'col1', width:85, sorttype:"int", align:"center", key:true},
                             {name:'col2',index:'col2', width:40, sorttype:"int", align:"center"},
                             {name:'col3',index:'col3', width:100, align:"center"},
                              ],

               rowNum:10,
               rowList:[10,20,30],
               jsonReader : {repeatitems: false,
                    root: function(obj) {
                        return obj;
                    },
                    page: function (obj) { return 1; },
                    total: function (obj) { return 1; },
                    records: function (obj) { return obj.length; }
                },
               pager: '#pager',
               sortname: 'col1',
               sortorder: "desc",
               loadonce:true,
               viewrecords: true,
               multiselect: true,
               caption: "Test",
               height:230 
             }); 
          jQuery("#test").jqGrid('navGrid','#pager10',{view:true,add:false,edit:false,del:false, searchtext:'Filter'},{},{},{},{multipleSearch:true});
         jQuery("#test").jqGrid('hideCol', 'cb');


  }) ;        
//]]>
</script>
</head>
<body>
<div id="header"><jsp:include page="../menu_v1.jsp"/></div>

Но теперь проблема в том,что мое меню и основной jqGrid вообще не работают ...

Ответы [ 2 ]

1 голос
/ 06 сентября 2010
  • в вашем меню не должно быть <html><head> и т. Д.
  • вы можете определить необходимые скрипты на странице, которая включает его
  • если эта страница также построена с включениями, над <jsp:include заголовка, определите переменную (с <c:set) для хранения всех необходимых сценариев, а затем проанализируйте ее в заголовке.

Вместо описанных выше шагов вы можете использовать некоторый шаблонизатор, такой как плитки , sitemesh , скорость , freemaker . Структура страниц там другая, и вам придется адаптировать свои страницы.

0 голосов
/ 07 сентября 2010

Что ж, я решил проблему:

1) При создании любого меню навигации: (предложение Божо) Свяжите CSS-файлы, прикрепленные к этому меню навигации.Не используйте теги <html>,<head>,<title> and <body>.просто используйте (для CSS) и (которые будут содержать навигационное меню).

2) Используйте <jsp:include page="../navMenu.jsp"/> внутри <div id="header"><jsp:include page="../navMenu.jsp"/></div> и внесите необходимые изменения в свой CSS.

3)Все файлы js хранят его в одном файле, используя разные функции, например: 

var navBar = function(){}
  var otherScript = function(){}

, поэтому, когда вы хотите использовать эти файлы, просто используйте: в случае jQuery: 

jQuery(document).ready(function(){
                          navMenu();
                          otherScript();
                     });

у вас нет нескольких файлов js, плавающих вокруг вашего сервера.

Пожалуйста, дайте мне знать, если у кого-то есть какие-либо сомнения или вопросы.

Спасибо!

...