包括页面上的jquery菜单和jqGrid [英] including jquery menu and jqGrid on the page
问题描述
我有一个导航菜单，我需要包含在我的所有页面上....通过jsp我只包括该菜单
I have a navigation menu which I need to include on all my pages....through jsp I just include the that menu
<div id="header"><jsp:include page="../menu_v1.jsp"/></div>
但问题是我的菜单包含< html>< head> < / head>< body>< / body>< / html> 现在我想使用我的新页面上定义的jqGrid <脚本>< / script> 它没有显示....因为它与我的标题jquery脚本冲突...我尝试过的解决方案：
but problem is that my menu contains <html><head></head><body></body></html> Now when I want to use my jqGrid which is define on my new page inside <script></script>it doesn't show up....because its conflicting with my header jquery script...My tried solutions:
- 使用
iframe但这不会让我控制其他页面。 - 而不是包括
< jsp：include page =/>我可以在同一个脚本的每个页面上包含所有带有jquery导航的组件......这可能根本就没有一个很好的解决方案，因为每当我需要在菜单中包含更多组件时，我必须在每个页面上进行更改...
- Using
iframebut this will not let me control my other pages. - Instead of including
<jsp:include page=""/>i can just include all components with jquery navigation on each page under same scrip...Which is probably not at all a good solution since whenever I need to include more components in my menu than I have to make changes on each pages...
如果任何人都有更好的解决方案...请让我知道....谢谢！
If anyone have better solution ...please let me know ....thanks!
更新：我的主菜单代码
<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根本没有工作......
But now problem is that my menu and main jqGrid is not at at all working...
推荐答案
我已解决了这个问题：
1）每当创建任何问题时导航菜单:( Bozho的建议）
链接附加到该导航菜单的CSS文件。
请勿使用任何< html>，< head>，< title>和< body> 标签。
只需使用，（对于CSS）和（包含导航菜单）。
1) Whenever creating any navigation menu :(Bozho's suggestion)
Link CSS files attached to that nav menu .
Don't use any <html>,<head>,<title> and <body> tags.
just use , (for CSS) and (which will contain the nav menu).
2）使用< jsp：include page =../ navMenu.jsp/> 在< div id =header>< jsp：include page =../ navMenu中.jsp/>< / div>
并在CSS中进行必要的调整。
2) Use <jsp:include page="../navMenu.jsp"/> inside the <div id="header"><jsp:include page="../navMenu.jsp"/></div>
and make necessary adjustment in your CSS .
3）所有js文件使用不同的函数将其保存在一个文件中，例如：
3) All js files keep it inside one file using different function , like:
var navBar = function(){}
var otherScript = function(){}
所以当你想要使用这些文件时，只需使用：
in jQuery的例子：
so when you want to use those files just use : in case of jQuery :
jQuery(document).ready(function(){
navMenu();
otherScript();
});
因此您的服务器周围没有多个js文件。
So that you don't have multiple js files floating around your server.
如果有任何疑问或问题，请告诉我。
Please let me know if anyone have any doubts or questions.
谢谢！
这篇关于包括页面上的jquery菜单和jqGrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
