328 строки
15 KiB
Plaintext
328 строки
15 KiB
Plaintext
@section MetaTags{
|
|
<meta name="description" content="This example demonstrates how to localize the Ribbon in a ASP.NET Web MVC." >
|
|
}
|
|
|
|
@section SampleHeading{
|
|
<span class="sampleName">Ribbon-Localization-ASP.NET MVC-SYNCFUSION</span>
|
|
}
|
|
@section ScriptReferenceSection{
|
|
<script src="@Url.Content("~/Scripts/cultures/ej.culture.de-DE.min.js")"></script>
|
|
<script src="@Url.Content("~/Scripts/cultures/ej.culture.es-ES.min.js")"></script>
|
|
}
|
|
@using Syncfusion.JavaScript.Models;
|
|
@section ControlsSection{
|
|
@(Html.EJ().Ribbon("defaultRibbon")
|
|
.Width("100%")
|
|
.Locale("de-DE")
|
|
.ShowQAT(true)
|
|
.ExpandPinSettings(exPin =>
|
|
{
|
|
exPin.ToolTip("Collapse the Ribbon");
|
|
})
|
|
.CollapsePinSettings(colPin =>
|
|
{
|
|
colPin.ToolTip("Pin the Ribbon");
|
|
})
|
|
.ApplicationTab(apptab =>
|
|
{
|
|
apptab.Type(ApplicationTabType.Menu).MenuItemID("ribbonmenu").MenuSettings(new MenuProperties()
|
|
{
|
|
OpenOnClick = false
|
|
});
|
|
})
|
|
.RibbonTabs(tab =>
|
|
{
|
|
tab.Id("home").Text("HOME").TabGroups(tabgrp =>
|
|
{
|
|
tabgrp.Text("Clipboard").AlignType(RibbonAlignType.Columns).Content(cnt =>
|
|
{
|
|
cnt.ContentGroups(cntgrp =>
|
|
{
|
|
cntgrp.Id("paste").Text("Paste").ToolTip("Paste").QuickAccessMode(QuickAccessMode.ToolBar).SplitButtonSettings(new SplitButtonProperties()
|
|
{
|
|
ContentType = ContentType.ImageOnly,
|
|
PrefixIcon = "e-icon e-ribbon e-ribbonpaste",
|
|
TargetID = "pasteSplit",
|
|
ArrowPosition = ArrowPosition.Bottom,
|
|
ButtonMode = ButtonMode.Dropdown,
|
|
Click = "executeAction"
|
|
}).Add();
|
|
}).ContentDefaults(df => df.Type(RibbonButtonType.SplitButton).Width("50px").Height("70px")).Add();
|
|
}).Add();
|
|
tabgrp.Text("Font").AlignType(RibbonAlignType.Rows).Content(cnt =>
|
|
{
|
|
cnt.ContentGroups(cntgrp =>
|
|
{
|
|
cntgrp.Id("bold").ToolTip("Bold").QuickAccessMode(QuickAccessMode.ToolBar).Type(RibbonButtonType.ToggleButton).ToggleButtonSettings(new ToggleButtonProperties()
|
|
{
|
|
ContentType = ContentType.ImageOnly,
|
|
DefaultText = "Bold",
|
|
ActiveText = "Bold",
|
|
DefaultPrefixIcon = "e-icon e-ribbon bold",
|
|
ActivePrefixIcon = "e-icon e-ribbon bold",
|
|
Click = "executeAction"
|
|
}).Add();
|
|
cntgrp.Id("italic").ToolTip("Italic").QuickAccessMode(QuickAccessMode.ToolBar).Type(RibbonButtonType.ToggleButton).ToggleButtonSettings(new ToggleButtonProperties()
|
|
{
|
|
ContentType = ContentType.ImageOnly,
|
|
DefaultText = "Italic",
|
|
ActiveText = "Italic",
|
|
DefaultPrefixIcon = "e-icon e-ribbon e-ribbonitalic",
|
|
ActivePrefixIcon = "e-icon e-ribbon e-ribbonitalic",
|
|
Click = "executeAction"
|
|
}).Add();
|
|
cntgrp.Id("underline").ToolTip("Underline").QuickAccessMode(QuickAccessMode.ToolBar).Type(RibbonButtonType.ToggleButton).ToggleButtonSettings(new ToggleButtonProperties()
|
|
{
|
|
ContentType = ContentType.ImageOnly,
|
|
DefaultText = "Underline",
|
|
ActiveText = "Underline",
|
|
DefaultPrefixIcon = "e-icon e-ribbon e-ribbonunderline",
|
|
ActivePrefixIcon = "e-icon e-ribbon e-ribbonunderline",
|
|
Click = "executeAction"
|
|
}).Add();
|
|
}).ContentDefaults(df => df.IsBig(false)).Add();
|
|
cnt.ContentGroups(cntgrp =>
|
|
{
|
|
cntgrp.Id("strikethrough").ToolTip("Strikethrough").Type(RibbonButtonType.ToggleButton).ToggleButtonSettings(new ToggleButtonProperties()
|
|
{
|
|
ContentType = ContentType.ImageOnly,
|
|
DefaultText = "Strikethrough",
|
|
ActiveText = "Strikethrough",
|
|
DefaultPrefixIcon = "e-icon e-ribbon strikethrough",
|
|
ActivePrefixIcon = "e-icon e-ribbon strikethrough",
|
|
Click = "executeAction"
|
|
}).Add();
|
|
cntgrp.Id("superscript").Text("Superscript").ToolTip("Superscript").ButtonSettings(new ButtonProperties()
|
|
{
|
|
ContentType = ContentType.ImageOnly,
|
|
PrefixIcon = "e-icon e-ribbon e-superscripticon",
|
|
Click = "executeAction"
|
|
}).Add();
|
|
cntgrp.Id("subscript").Text("Subscript").ToolTip("Subscript").ButtonSettings(new ButtonProperties()
|
|
{
|
|
ContentType = ContentType.ImageOnly,
|
|
PrefixIcon = "e-icon e-ribbon e-subscripticon",
|
|
Click = "executeAction"
|
|
}).Add();
|
|
}).ContentDefaults(df => df.IsBig(false)).Add();
|
|
}).Add();
|
|
tabgrp.Text("Alignment").AlignType(RibbonAlignType.Rows).Content(cnt =>
|
|
{
|
|
cnt.ContentGroups(cntgrp =>
|
|
{
|
|
cntgrp.Id("bullet").Text("Bullet Format").QuickAccessMode(QuickAccessMode.ToolBar).ToolTip("Bullets").ButtonSettings(new ButtonProperties()
|
|
{
|
|
ContentType = ContentType.ImageOnly,
|
|
PrefixIcon = "e-icon e-ribbon e-bullet",
|
|
Click = "executeAction"
|
|
}).Add();
|
|
cntgrp.Id("number").Text("Number Format").QuickAccessMode(QuickAccessMode.ToolBar).ToolTip("Numbering").ButtonSettings(new ButtonProperties()
|
|
{
|
|
ContentType = ContentType.ImageOnly,
|
|
PrefixIcon = "e-icon e-ribbon e-numbericon",
|
|
Click = "executeAction"
|
|
}).Add();
|
|
cntgrp.Id("sortascending").Text("Sort").ToolTip("Sort").QuickAccessMode(QuickAccessMode.ToolBar).ButtonSettings(new ButtonProperties()
|
|
{
|
|
ContentType = ContentType.ImageOnly,
|
|
PrefixIcon = "e-icon e-ribbon e-sort",
|
|
Click = "executeAction"
|
|
}).Add();
|
|
}).ContentDefaults(df => df.Type(RibbonButtonType.Button).IsBig(false)).Add();
|
|
cnt.ContentGroups(cntgrp =>
|
|
{
|
|
cntgrp.Id("alignleft").Text("JustifyLeft").ToolTip("Align Left").ButtonSettings(new ButtonProperties()
|
|
{
|
|
ContentType = ContentType.ImageOnly,
|
|
PrefixIcon = "e-icon e-ribbon alignleft",
|
|
Click = "executeAction"
|
|
}).Add();
|
|
cntgrp.Id("aligncenter").Text("JustifyCenter").ToolTip("Align Center").ButtonSettings(new ButtonProperties()
|
|
{
|
|
ContentType = ContentType.ImageOnly,
|
|
PrefixIcon = "e-icon e-ribbon aligncenter",
|
|
Click = "executeAction"
|
|
}).Add();
|
|
cntgrp.Id("alignright").Text("JustifyRight").ToolTip("Align Right").ButtonSettings(new ButtonProperties()
|
|
{
|
|
ContentType = ContentType.ImageOnly,
|
|
PrefixIcon = "e-icon e-ribbon alignright",
|
|
Click = "executeAction"
|
|
}).Add();
|
|
}).ContentDefaults(df => df.Type(RibbonButtonType.Button).IsBig(false)).Add();
|
|
}).Add();
|
|
tabgrp.Text("Actions").AlignType(RibbonAlignType.Rows).Content(cnt =>
|
|
{
|
|
cnt.ContentGroups(cntgrp =>
|
|
{
|
|
cntgrp.Id("undo").Text("Undo").ToolTip("Undo").ButtonSettings(new ButtonProperties()
|
|
{
|
|
ContentType = ContentType.TextAndImage,
|
|
ImagePosition = ImagePosition.ImageTop,
|
|
PrefixIcon = "e-icon e-ribbon e-undo",
|
|
Click = "executeAction"
|
|
}).Add();
|
|
cntgrp.Id("redo").Text("Redo").ToolTip("Redo").ButtonSettings(new ButtonProperties()
|
|
{
|
|
ContentType = ContentType.TextAndImage,
|
|
ImagePosition = ImagePosition.ImageTop,
|
|
PrefixIcon = "e-icon e-ribbon e-redo",
|
|
Click = "executeAction"
|
|
}).Add();
|
|
}).ContentDefaults(df => df.Type(RibbonButtonType.Button).Width("40px").Height("70px")).Add();
|
|
}).Add();
|
|
}).Add();
|
|
tab.Id("insert").Text("INSERT").TabGroups(tabgrp =>
|
|
{
|
|
tabgrp.Text("Tables").AlignType(RibbonAlignType.Columns).Content(cnt =>
|
|
{
|
|
cnt.ContentGroups(cntgrp =>
|
|
{
|
|
cntgrp.Id("tables").Text("Tables").ToolTip("Tables").ButtonSettings(new ButtonProperties()
|
|
{
|
|
ContentType = ContentType.TextAndImage,
|
|
ImagePosition = ImagePosition.ImageTop,
|
|
PrefixIcon = "e-icon e-ribbon e-table",
|
|
Click = "executeAction"
|
|
}).Add();
|
|
}).ContentDefaults(df => df.Type(RibbonButtonType.Button).Width("50px").Height("70px")).Add();
|
|
}).Add();
|
|
tabgrp.Text("Illustrations").AlignType(RibbonAlignType.Rows).Content(cnt =>
|
|
{
|
|
cnt.ContentGroups(cntgrp =>
|
|
{
|
|
cntgrp.Id("pictures").Text("Pictures").ToolTip("Pictures").ButtonSettings(new ButtonProperties()
|
|
{
|
|
ContentType = ContentType.TextAndImage,
|
|
ImagePosition = ImagePosition.ImageTop,
|
|
PrefixIcon = "e-icon e-ribbon e-picture",
|
|
Click = "executeAction"
|
|
}).Add();
|
|
cntgrp.Id("videos").Text("Videos").ToolTip("Videos").ButtonSettings(new ButtonProperties()
|
|
{
|
|
ContentType = ContentType.TextAndImage,
|
|
ImagePosition = ImagePosition.ImageTop,
|
|
PrefixIcon = "e-icon e-ribbon e-video",
|
|
Click = "executeAction"
|
|
}).Add();
|
|
cntgrp.Id("shapes").Text("Shapes").ToolTip("Shapes").ButtonSettings(new ButtonProperties()
|
|
{
|
|
ContentType = ContentType.TextAndImage,
|
|
ImagePosition = ImagePosition.ImageTop,
|
|
PrefixIcon = "e-icon e-ribbon e-shape",
|
|
Click = "executeAction"
|
|
}).Add();
|
|
cntgrp.Id("charts").Text("Charts").ToolTip("Charts").ButtonSettings(new ButtonProperties()
|
|
{
|
|
ContentType = ContentType.TextAndImage,
|
|
ImagePosition = ImagePosition.ImageTop,
|
|
PrefixIcon = "e-icon e-ribbon e-chart",
|
|
Click = "executeAction"
|
|
}).Add();
|
|
}).ContentDefaults(df => df.Type(RibbonButtonType.Button).Width("56px").Height("70px")).Add();
|
|
}).Add();
|
|
tabgrp.Text("Comments").AlignType(RibbonAlignType.Rows).Content(cnt =>
|
|
{
|
|
cnt.ContentGroups(cntgrp =>
|
|
{
|
|
cntgrp.Id("comments").Text("Comments").ToolTip("Comments").ButtonSettings(new ButtonProperties()
|
|
{
|
|
ContentType = ContentType.TextAndImage,
|
|
ImagePosition = ImagePosition.ImageTop,
|
|
PrefixIcon = "e-icon e-ribbon e-comment",
|
|
Click = "executeAction"
|
|
}).Add();
|
|
}).ContentDefaults(df => df.Type(RibbonButtonType.Button).Width("70px").Height("70px")).Add();
|
|
}).Add();
|
|
}).Add();
|
|
}).ClientSideEvents(evt => evt.Create("createControl").QatMenuItemClick("qatMenuItemClick"))
|
|
)
|
|
|
|
<ul id="ribbonmenu">
|
|
<li>
|
|
<a>FILE</a>
|
|
<ul>
|
|
<li><a>New</a></li>
|
|
<li><a>Open</a></li>
|
|
<li><a>Save</a></li>
|
|
<li><a>Save As</a></li>
|
|
<li><a>Print</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul id="pasteSplit">
|
|
<li><a>Paste</a></li>
|
|
</ul>
|
|
}
|
|
@section PropertiesSection{
|
|
<div id="ddl">
|
|
<ul>
|
|
<li>English</li>
|
|
<li>Deutsch</li>
|
|
<li>Español</li>
|
|
</ul>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
Selection Type
|
|
</div>
|
|
<div class="col-md-3">
|
|
@(Html.EJ().DropDownList("language")
|
|
.TargetID("ddl")
|
|
.SelectedItemIndex(1)
|
|
.ClientSideEvents(eve => eve.Change("onChange"))
|
|
.Width("120px")
|
|
)
|
|
</div>
|
|
</div>
|
|
}
|
|
@section ScriptSection{
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
$("#sampleProperties").ejPropertiesPanel();
|
|
});
|
|
function onChange(args) {
|
|
if (args.itemId == 0)
|
|
$("#defaultRibbon").ejRibbon("model.locale", "en-US");
|
|
else if (args.itemId == 1)
|
|
$("#defaultRibbon").ejRibbon("model.locale", "de-DE");
|
|
else
|
|
$("#defaultRibbon").ejRibbon("model.locale", "es-ES");
|
|
}
|
|
ej.Ribbon.Locale["es-ES"] = {
|
|
CustomizeQuickAccess:"Agordu Rapida Aliro",
|
|
RemoveFromQuickAccessToolbar:"Forigu de Rapida Aliro Ilobreto",
|
|
AddToQuickAccessToolbar:"Aldoni al Rapida Aliro Ilobreto",
|
|
ShowAboveTheRibbon:"Montru Super la Ribbona",
|
|
ShowBelowTheRibbon:"Montru Sube la Ribbon",
|
|
MoreCommands:"pli Komando"
|
|
};
|
|
|
|
ej.Ribbon.Locale["de-DE"] = {
|
|
CustomizeQuickAccess:"Aanpassen Quick Access",
|
|
RemoveFromQuickAccessToolbar:"Verwijderen uit werkbalk Snelle toegang",
|
|
AddToQuickAccessToolbar:"Toevoegen aan werkbalk Snelle toegang",
|
|
ShowAboveTheRibbon:"Toon Boven het lint",
|
|
ShowBelowTheRibbon:"Onder het lint weergeven",
|
|
MoreCommands:"meer Command"
|
|
|
|
};
|
|
</script>
|
|
}
|
|
|
|
@section StyleSection{
|
|
<link href="~/Content/ejthemes/ribbon-css/ej.icons.css" rel="stylesheet" />
|
|
<style>
|
|
.e-ribbon.e-js .e-rbnquickaccessbar .e-ribbon.e-ribbonpaste:before {
|
|
font-size: 27px;
|
|
left: -5px;
|
|
top: -6px;
|
|
}
|
|
.row .cols-sample-area {
|
|
min-height: 490px !important;
|
|
}
|
|
</style>
|
|
}
|
|
|