Sharepoint2010 - Аккордеонный стиль QuickLaunchMenu
Я пытаюсь изменить QuickLaunchMenu моего сайта Sharepoint2010, чтобы использовать стиль аккордеона.
Как я могу получить текущий выбранный пункт? Есть ли возможность добавить класс css к текущему (активному) nav-элементу? Как я могу добавить третий уровень иерархии?
Это мой код jQuery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#s4-leftpanel-content li.static>ul.static").each(function(){
$(this).hide();
});
$("#s4-leftpanel-content ul.root>li.static>a").click(function(ev){
//ev.preventDefault();
var child = $(this).parent().children('ul');
$("#s4-leftpanel-content li.static>ul.static").each(function(){
$(this).hide();
});
child.toggle();
});
//disable heading click
$("#s4-leftpanel-content ul.root>li.static>a").toggle(
function () {},
function () {}
);
});
</script>
и это мой быстрый контроль запуска:
<SharePoint:UIVersionedContent UIVersion="4" runat="server">
<ContentTemplate>
<SharePoint:AspMenu id="V4QuickLaunchMenu" runat="server" EnableViewState="false"
DataSourceId="QuickLaunchSiteMap"
UseSimpleRendering="true"
UseSeparateCss="false"
SelectStaticItemsOnly="true"
CustomSelectionEnabled="true"
Orientation="Vertical"
StaticDisplayLevels="3"
MaximumDynamicDisplayLevels="2"
SkipLinkText=""
CssClass="s4-ql">
</SharePoint:AspMenu>
</ContentTemplate>
</SharePoint:UIVersionedContent>
Любая помощь будет оценена.
Спасибо!
2 ответа
Привет, я нашел один способ сделать аккордеон для быстрого запуска sharepoint без изменения атрибутов управления asp. вот способ, которым я работал.
<script type="text/javascript" src="/_layouts/Scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/_layouts/Scripts/jquery.easing.js"></script>
<script type="text/javascript" src="/_layouts/Scripts/jquery.dimensions.js"></script>
<script type="text/javascript" src="/_layouts/Scripts/jquery.accordion.js"></script>
<script type="text/javascript" src="/_layouts/Scripts/navaccord.js"></script>
код ниже добавлен в файл "navaccord.js"
jQuery().ready(function(){
// second simple accordion with special markup
jQuery('.root ').accordion({
header: '.menu-item',
navigation: true,
event: 'click',
animated: 'easeslide',
active: '.tab4',
selectedClass: 'active'
});
// bind to change event of select to control first and seconds accordion
// similar to tab's plugin triggerTab(), without an extra method
var accordions = jQuery('.root');
jQuery('#switch select').change(function() {
accordions.accordion("activate", this.selectedIndex-1 );
});
jQuery('#close').click(function() {
accordions.accordion("activate", -1);
});
jQuery('#switch2').change(function() {
accordions.accordion("activate", this.value);
});
jQuery('#enable').click(function() {
accordions.accordion("enable");
});
jQuery('#disable').click(function() {
accordions.accordion("disable");
});
jQuery('#remove').click(function() {
accordions.accordion("destroy");
wizardButtons.unbind("click");
});
});
$(function () {
$("ul>li>ul>li>a").removeClass("menu-item");
$("ul>li>ul").css({'display':'none', 'height':''});
});
Надеюсь, что это поможет каждому, Единственной проблемой будет крах аккордеона после загрузки выбранной страницы.
AspMenu наследуется от класса Menu (часть пространства имен WebControls) и
Для активных выбранных, см. Свойство SelectedItem
msdn.microsoft.com/EN-US/library/0f4wwt2y
Для CSS есть StaticSelectedStyle, DynamicSelectedSytle и LevelSelectedSytles. В вашем случае вы создали 3 уровня статического меню и 2 уровня динамического меню. взгляните на StaticSelectedStyle и DynamicSelectedSytle для стиля CSS.
Кстати, поскольку вы ограничиваете себя в создании максимум 2 уровней динамического меню, я считаю, что вы не можете создать эти 3 уровня.
<DynamicSelectedStyle
BackColor="color name|#dddddd"
BorderColor="color name|#dddddd"
BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|
Groove|Ridge|Inset|Outset"
BorderWidth="size"
CssClass="string"
Font-Bold="True|False"
Font-Italic="True|False"
Font-Names="string"
Font-Overline="True|False"
Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|
Medium|Large|X-Large|XX-Large"
Font-Strikeout="True|False"
Font-Underline="True|False"
ForeColor="color name|#dddddd"
Height="size"
HorizontalPadding="size"
ItemSpacing="size"
OnDisposed="Disposed event handler"
VerticalPadding="size"
Width="size"
/>
<StaticSelectedStyle
BackColor="color name|#dddddd"
BorderColor="color name|#dddddd"
BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|
Groove|Ridge|Inset|Outset"
BorderWidth="size"
CssClass="string"
Font-Bold="True|False"
Font-Italic="True|False"
Font-Names="string"
Font-Overline="True|False"
Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|
Medium|Large|X-Large|XX-Large"
Font-Strikeout="True|False"
Font-Underline="True|False"
ForeColor="color name|#dddddd"
Height="size"
HorizontalPadding="size"
ItemSpacing="size"
OnDisposed="Disposed event handler"
VerticalPadding="size"
Width="size"
/>
Посмотрите на это. http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.aspmenu_members.aspx