176 строки
8.3 KiB
HTML
176 строки
8.3 KiB
HTML
<div ng-controller="MethodsCtrl">
|
|
<div class="content-container-fluid">
|
|
<div class="row">
|
|
<div class="cols-sample-area">
|
|
<div class="frame">
|
|
<div class="control">
|
|
<div id="toolbarMethods" ej-toolbar e-width="100%">
|
|
<ul>
|
|
<li id="Left" title="Left">
|
|
<div class="ToolbarItems LeftAlign_tool"></div>
|
|
</li>
|
|
<li id="Center" title="Center">
|
|
<div class="ToolbarItems CenterAlign_tool"></div>
|
|
</li>
|
|
<li id="Right" title="Right">
|
|
<div class="ToolbarItems RightAlign_tool"></div>
|
|
</li>
|
|
<li id="Justify" title="Justify">
|
|
<div class="ToolbarItems Justify_tool"></div>
|
|
</li>
|
|
</ul>
|
|
<ul>
|
|
<li id="Bold" title="Bold">
|
|
<div class="ToolbarItems Bold_tool"></div>
|
|
</li>
|
|
<li id="Italic" title="Italic">
|
|
<div class="ToolbarItems Italic_tool"></div>
|
|
</li>
|
|
<li id="StrikeThrough" title="Strike Through">
|
|
<div class="ToolbarItems StrikeThrough_tool"></div>
|
|
</li>
|
|
<li id="UndeLine" title="UnderLine">
|
|
<div class="ToolbarItems Underline_tool"></div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div id="property-window" class="box wide">
|
|
<div class="row">
|
|
<div class="col-md-6">Select Item By ID</div>
|
|
<div class="col-md-6">
|
|
<select name="selectIndex" class="e-ddl" id="optSelectId" ej-dropdownlist e-change="onSelectChange" e-width="100px" e-selecteditemindex="0">
|
|
<option value="none">None</option>
|
|
<option value="Left">Left</option>
|
|
<option value="Center">Center</option>
|
|
<option value="Right">Right</option>
|
|
<option value="Justify">Justify</option>
|
|
<option value="Bold">Bold</option>
|
|
<option value="Italic">Italic</option>
|
|
<option value="StrikeThrough">StrikeThrough</option>
|
|
<option value="UndeLine">UnderLine</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">Deselect Item By ID</div>
|
|
<div class="col-md-6">
|
|
<select name="selectIndex" class="e-ddl" id="optDeselectId" ej-dropdownlist e-change="onDeselectChange" e-width="100px" e-selecteditemindex="0">
|
|
<option value="none">None</option>
|
|
<option value="Left">Left</option>
|
|
<option value="Center">Center</option>
|
|
<option value="Right">Right</option>
|
|
<option value="Justify">Justify</option>
|
|
<option value="Bold">Bold</option>
|
|
<option value="Italic">Italic</option>
|
|
<option value="StrikeThrough">StrikeThrough</option>
|
|
<option value="UndeLine">UnderLine</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">Disable Item By ID</div>
|
|
<div class="col-md-6">
|
|
<select name="selectIndex" class="e-ddl" id="optDisableId" ej-dropdownlist e-change="onDisableChange" e-width="100px" e-selecteditemindex="0">
|
|
<option value="none">None</option>
|
|
<option value="Left">Left</option>
|
|
<option value="Center">Center</option>
|
|
<option value="Right">Right</option>
|
|
<option value="Justify">Justify</option>
|
|
<option value="Bold">Bold</option>
|
|
<option value="Italic">Italic</option>
|
|
<option value="StrikeThrough">StrikeThrough</option>
|
|
<option value="UndeLine">UnderLine</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">Enable Item By ID</div>
|
|
<div class="col-md-6">
|
|
<select name="selectIndex" class="e-ddl" id="optEnableId" ej-dropdownlist e-change="onEnableChange" e-width="100px" e-selecteditemindex="0">
|
|
<option value="none">None</option>
|
|
<option value="Left">Left</option>
|
|
<option value="Center">Center</option>
|
|
<option value="Right">Right</option>
|
|
<option value="Justify">Justify</option>
|
|
<option value="Bold">Bold</option>
|
|
<option value="Italic">Italic</option>
|
|
<option value="StrikeThrough">StrikeThrough</option>
|
|
<option value="UndeLine">UnderLine</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">Disable/Enable All </div>
|
|
<div class="col-md-6">
|
|
<input type="checkbox" id="enabledisable" class="e-togglebtn" value="checkuncheck" ej-togglebutton e-width="100px" e-change="onEnableDisableAll" e-defaulttext="Disable" e-activetext="Enable" />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">Show/Hide </div>
|
|
<div class="col-md-6">
|
|
<input type="checkbox" id="showhide" class="e-togglebtn" value="checkuncheck" ej-togglebutton e-width="100px" e-change="onShowHide" e-defaulttext="Hide" e-activetext="Show" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style type="text/css" class="cssStyles">
|
|
.darktheme .cols-sample-area .e-tooltxt .ToolbarItems {
|
|
background-image: url('content/images/toolbar/ui-icons-metro.png');
|
|
}
|
|
|
|
.cols-sample-area .e-tooltxt .ToolbarItems, .disabletoolli.e-tooltxt:hover .ToolbarItems {
|
|
display: block;
|
|
background-image: url('content/images/toolbar/ui-icons-dark.png');
|
|
height: 22px;
|
|
width: 22px;
|
|
}
|
|
|
|
.e-tooltxt:hover .ToolbarItems, .darktheme .cols-sample-area .e-tooltxt:hover .ToolbarItems {
|
|
background-image: url('content/images/toolbar/ui-icons-light.png');
|
|
}
|
|
|
|
.e-tooltxt:hover.e-disable .ToolbarItems, .darktheme .cols-sample-area .e-tooltxt:hover .e-disable .ToolbarItems {
|
|
background-image: url('content/images/toolbar/ui-icons-dark.png');
|
|
}
|
|
|
|
.ToolbarItems.LeftAlign_tool {
|
|
background-position: -26px -39px;
|
|
}
|
|
|
|
.ToolbarItems.CenterAlign_tool {
|
|
background-position: -55px -39px;
|
|
}
|
|
|
|
.ToolbarItems.RightAlign_tool {
|
|
background-position: -89px -39px;
|
|
}
|
|
|
|
.ToolbarItems.Justify_tool {
|
|
background-position: -123px -39px;
|
|
}
|
|
|
|
.ToolbarItems.Bold_tool {
|
|
background-position: -159px -39px;
|
|
}
|
|
|
|
.ToolbarItems.Italic_tool {
|
|
background-position: -196px -39px;
|
|
}
|
|
|
|
.ToolbarItems.StrikeThrough_tool {
|
|
background-position: -55px -70px;
|
|
}
|
|
|
|
.ToolbarItems.Underline_tool {
|
|
background-position: -23px -68px;
|
|
}
|
|
</style>
|