Temat: Zakładki
Witam,
Na SPF też udało mi się to uruchomić. Testowałem na New i EditFormie, ale myślę, że na DispFormie też powinno ruszyć. Zmieniłem tylko trochę skrypt:
<!-- Date field text size -->
<style type="text/css">
.ms-dtinput,.ms-dttimeinput{
font-size:0.7em;
}
</style>
<DIV id="tabs">
<UL style="font-size:12px">
<LI><A href="#tabs-1">Tab 1</A></LI>
<LI><A href="#tabs-2">Tab 2</A></LI>
<LI><A href="#tabs-3">Tab 3</A></LI>
<LI><A href="#tabs-4">Attachments</A></LI>
</UL>
<div><table cellpadding="0" cellspacing="0" id="tabs-1"></table></div>
<div><table cellpadding="0" cellspacing="0" id="tabs-2"></table></div>
<div><table cellpadding="0" cellspacing="0" id="tabs-3"></table></div>
<div><table cellpadding="0" cellspacing="0" id="tabs-4"></table></div>
</DIV>
<link type="text/css" href="/siteAssets/jquery-ui-1.8.6.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/siteAssets/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/siteAssets/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("t");
function t() {
// Array of all fields - format: tabID|FieldInternalName
arrTab = ['1|Title', '1|Status',
'2|AssignedTo','2|Priority','2|Predecessors','2|Body', '2|PercentComplete',
'3|TaskGroup', '3|StartDate', '3|DueDate'];
// Initiate all the fields
fields = init_fields();
// Add the "tabs" to the formtable
$("#tabs").insertAfter('.ms-formtable').tabs();
// Loop trough all fields and move them to the right tab
$.each(arrTab,function(idx,item){
var split = item.split('|');
var tabID = split[0];
var fieldName = split[1];
if(fields[fieldName]!=undefined){
currField = $(fields[fieldName]);
currField.appendTo('#tabs-'+tabID);
}
});
// Are there any required fields not filled? - select the tab containing the first field
selectTabOnFormValidation(false);
// Move the Attachment's to the last tab
$("#idAttachmentsRow").appendTo('#tabs-4').find('.ms-formlabel').attr('width','165px');
}
function selectTabOnFormValidation(preSave){
var formvalidationTab = '';
// Formvalidation - find the first tab with empty required fields
$.each(arrTab,function(idx,item){
var split = item.split('|');
var tabID = split[0];
var fieldName = split[1];
currField = $(fields[fieldName]);
// Handles DateTimeField (empty field validation is performed without page reload)
if(currField.find("SPAN[ID*='_DateTimeField_']").length>0){
if(currField.find('input:first').val()=='' && preSave){
formvalidationTab = tabID;
}
}
if(formvalidationTab == '' && currField.find('.ms-formbody span.ms-formvalidation').length>0){
formvalidationTab = tabID;
}
});
// Select the first tab containing an empty required field
if(formvalidationTab!=''){
$('#tabs').tabs('select', formvalidationTab);
}
}
// function - to make "object" of all tr's in the form
function init_fields(){
var res = {};
$("td.ms-formbody").each(function(){
if($(this).html().indexOf('FieldInternalName="')<0) return;
var start = $(this).html().indexOf('FieldInternalName="')+19;
var stopp = $(this).html().indexOf('FieldType="')-7;
var nm = $(this).html().substring(start,stopp);
res[nm] = this.parentNode;
});
return res;
}
// Catch "empty field validation" on date and time columns
function PreSaveAction(){
selectTabOnFormValidation(true);
return true;
}
</script>
Po kolei kroki:
1. Wrzucić do biblioteki dokumentów wymagane biblioteki jquery. Powyższy skrypt najlepiej także zapisać jako plik tekstowy i wrzucić do biblioteki. Proszę pamiętać o podmienieniu ścieżek i pól!
2. Wejść na stronę NewForm (wpisując z palca adres formatki:
http://site/Lists/MyList/NewForm.aspx)
3. Wyedytować stronę i dodać Content Editor Web Parta (alternatywnie, do trybu edycji można wejść dodając ToolPaneView=2 do adresu formatki.
4. We właściwościach editor web parta wskazać plik skryptu jako źródło treści.
5. Zakończyć edycję strony
6. Przetestować dodawanie elementu.
7. Cieszyć się z zakładek na formatce :)
пропозиції роботи
