### C# Example: ImageView Service Implementation
Source: https://github.com/757607106/deom/blob/main/VanGo完整文档.md
This C# code defines a service class for the ImageView component within the VanGo framework. It inherits from PageService and implements the IImageViewService interface. The Initialize method is overridden, suggesting custom setup logic for the service associated with the ImageView functionality.
```csharp
using VanGo.Application;
namespace VanGoHome.Components
{
public class ImageViewService : PageService, IImageViewService
{
protected override void Initialize()
{
base.Initialize();
}
}
}
```
--------------------------------
### Create IntroJS Guided Tour (JavaScript)
Source: https://github.com/757607106/deom/blob/main/VanGo完整文档.md
This JavaScript code demonstrates how to initiate an IntroJS guided tour. It configures tour labels for 'next', 'previous', 'skip', and 'done' actions. It also includes an 'onbeforeexit' hook to confirm user intent before exiting the tour. The `introJs()` function is assumed to be globally available.
```javascript
$scope.doBeginIntro = function (sender, e) {
introJs().setOptions({
nextLabel: '下一步',
prevLabel: '上一步',
skipLabel: '退出',
doneLabel: "完成"
}).start().onbeforeexit(function () {
return confirm("确定学会了吗?");
});
};
```
--------------------------------
### HTML FileUpload with Example Image
Source: https://github.com/757607106/deom/blob/main/VanGo完整文档.md
This snippet demonstrates how to display an example image alongside the FileUpload component by providing a URL to an image using the 'exampleBg' attribute. It also includes descriptive text and event handlers for file changes and upload success.
```html
```
--------------------------------
### HTML Example: ImageView Component Usage
Source: https://github.com/757607106/deom/blob/main/VanGo完整文档.md
This HTML snippet demonstrates the various ways to use the ImageView component. It showcases setting image sources, dimensions, applying CSS for styling (like circles and borders), and configuring hover and active states. It also includes examples of click events and associated buttons for dynamic image source manipulation.
```html
图片控件
显示图片
代码演示
src 设置图片地址，必须设置宽高属性(字体图标除外)：width、height。
通过设置 hoverImage，在鼠标悬浮时改变图片；通过设置 activeImage，在鼠标悬浮时改变图片；通过设置 isActive，默认使用active的图片。
一些基本事件的用法。
```
--------------------------------
### C# Ueditor Service Example
Source: https://github.com/757607106/deom/blob/main/VanGo完整文档.md
A C# example demonstrating a UeditorService that inherits from PageService within the VanGo.Application namespace. It includes a basic Initialize method override.
```csharp
using VanGo.Application;
namespace VanGoHome.Components
{
public class UeditorService : PageService, IUeditorService
{
protected override void Initialize()
{
base.Initialize();
}
}
}
```
--------------------------------
### CSHARP PageService Base Class Example
Source: https://github.com/757607106/deom/blob/main/VanGo完整文档.md
A C# code example demonstrating a basic PageService implementation for components like LinkButtonService and HotKeyService. It shows the standard structure for initializing services within a C# project.
```csharp
using VanGo.Application;
namespace VanGoHome.Components
{
public class LinkButtonService : PageService, ILinkButtonService
{
protected override void Initialize()
{
base.Initialize();
}
}
}
```
```csharp
using VanGo.Application;
namespace VanGoHome.Components
{
public class HotKeyService : PageService, IHotKeyService
{
protected override void Initialize()
{
base.Initialize();
}
}
}
```
--------------------------------
### HTML Steps Component Examples
Source: https://github.com/757607106/deom/blob/main/VanGo完整文档.md
Demonstrates basic usage of the Steps component in HTML, showing horizontal steps with default and small sizes. It highlights how to set the current step and display descriptions.
```html
Steps 步骤条
引导用户按照流程完成任务的导航条
代码演示
设置 Steps 属性 direction="default" 和 size="small"
设置 Steps 属性 direction="vertical" 和 size="small"
设置 Step 属性 fontIcon="icon-user" 和 icon="Content/gridLoading2.gif
```
--------------------------------
### HTML TextEdit Component with Addons
Source: https://github.com/757607106/deom/blob/main/VanGo完整文档.md
Shows how to enhance the TextEdit input with prefix and suffix elements, such as icons or text. This includes examples of using 'addonBefore' and 'addonAfter' for custom labeling and input structuring.
```html
```
--------------------------------
### HTML Example: VanGo Tab Component with Card Style
Source: https://github.com/757607106/deom/blob/main/VanGo完整文档.md
This example demonstrates the VanGo Tab component configured with a 'card' type style. It illustrates how to set the active tab, tab position, and load content similarly to the basic tab, including iframe and internal page loading.
```html
自定义内容。。。
```
--------------------------------
### JavaScript Ueditor Controller Examples
Source: https://github.com/757607106/deom/blob/main/VanGo完整文档.md
Demonstrates various methods for interacting with a Ueditor component in JavaScript, including getting and setting content, managing selection, and controlling editor state. This code is part of a VanGo module.
```javascript
vango.module('components')
.controller('components.ueditorCtrl', ['$scope', '$uiTool', function ($scope, $uiTool) {
// 初始化事件
this.initialize = function () {
};
// 关闭时事件
this.closing = function () {
// 返回false的时候阻止当前关闭动作
};
// 关闭后事件
this.closed = function () {
};
$scope.doClick1 = function (sender, e) {
var html = $scope.testUeditor.getAllHtml();
alert(html);
};
$scope.doClick2 = function (sender, e) {
alert($scope.testUeditor.getContent());
};
$scope.doClick3 = function (sender, e) {
$scope.testUeditor.setContent("欢迎使用VanGo");
};
$scope.doClick33 = function (sender, e) {
$scope.testUeditor.setContent("欢迎使用VanGo", true);
};
$scope.doClick4 = function (sender, e) {
alert($scope.testUeditor.getContentTxt());
};
$scope.doClick5 = function (sender, e) {
alert($scope.testUeditor.getPlainTxt());
};
$scope.doClick6 = function (sender, e) {
alert($scope.testUeditor.hasContents());
};
$scope.doClick7 = function (sender, e) {
$scope.testUeditor.focus();
};
$scope.doClick8 = function (sender, e) {
alert($scope.testUeditor.getSelectionText());
};
$scope.doClick9 = function (sender, e) {
var text = window.prompt("插入HTML代码");
$scope.testUeditor.insertHtml(text);
};
$scope.doClick10 = function (sender, e) {
$scope.testUeditor.setEnabled();
};
$scope.doClick11 = function (sender, e) {
$scope.testUeditor.setDisabled();
};
$scope.doClick12 = function (sender, e) {
$scope.testUeditor.setHide();
};
$scope.doClick13 = function (sender, e) {
$scope.testUeditor.setShow();
};
$scope.doClick16 = function (sender, e) {
alert($scope.testUeditor.isFocus());
};
$scope.doClick17 = function (sender, e) {
$scope.testUeditor.blur();
};
$scope.doClick18 = function (sender, e) {
alert($scope.testUeditor.getLocalData());
};
$scope.doClick19 = function (sender, e) {
if (!$scope.testUeditor.clearlocaldata()) {
alert("已清空草稿箱");
}
};
}]);
```
--------------------------------
### JavaScript Hidden Field Controller Example
Source: https://github.com/757607106/deom/blob/main/VanGo完整文档.md
This JavaScript code defines a controller for a hidden field component using the Vango framework. It includes methods for initialization, closing events, and handling click events to get and set hidden field values.
```javascript
vango.module('components')
.controller('components.hiddenFieldCtrl', ['$scope', '$uiTool', function ($scope, $uiTool) {
// 初始化事件
this.initialize = function () {
};
// 关闭时事件
this.closing = function () {
// 返回false的时候阻止当前关闭动作
};
// 关闭后事件
this.closed = function () {
};
$scope.doClick1 = function (sender, e) {
vango.log.debug("隐藏域1的值为：" + $scope.hf1.get("value"));
};
$scope.doClick2 = function (sender, e) {
$scope.hf2.set("value", $scope.txt1.get("value"));
};
$scope.doClick3 = function (sender, e) {
vango.log.debug("隐藏域2的值为：" + $scope.hf2.get("value"));
};
}]);
```
--------------------------------
### Implement Intro Service (C#)
Source: https://github.com/757607106/deom/blob/main/VanGo完整文档.md
A C# class that implements the IIntroService interface and inherits from PageService. This service is designed to manage the functionality related to user introductory guides or tours within the application. It includes a base implementation for the Initialize method.
```csharp
using VanGo.Application;
namespace VanGoHome.Components
{
public class IntroService : PageService, IIntroService
{
protected override void Initialize()
{
base.Initialize();
}
}
}
```
--------------------------------
### HTML Form Data Binding Example
Source: https://github.com/757607106/deom/blob/main/VanGo完整文档.md
This HTML snippet showcases a 'page' component used for data binding with various form elements. It includes fields for username, warehouse selection, invoice type, date, amount, adjustment, and comments. It also demonstrates buttons for getting form data, clearing, resetting, and validating data.
```html