Интеграция

ValueHost API Pro позволит Вам использовать интерфейс ValueHost Pro на абсолютно любом сайте с абослютно любым дизайном и функционалом.

Для интеграции Вам потребуется знание HTML и CSS. Для более гибкого применения Вам также потребуется знание JavaScript.
Движок ValueHost API Pro построен с применением JavaScript Framework jQuery. Он также будет Вам доступен после инициализации модуля.
Ниже приведены наглядные инструкции с комментариями, которые позволят Вам быстро разобраться с устройством Hostix API Pro.

Пример простейшего использования ValueHost API Pro:

<!DOCTYPE html>
<html>
<head>
	<title>Hosix API Simple page</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="http://api.YOUR_BRAND/inc/js/hostix_api.js"></script>
	<style type="text/css">
		body,iframe {
			margin:0;
			background-color: #fff;
		}
		h1 {
			text-align:center;
			color: #303334;
		}
		iframe#hostix_api {
			border: none;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<h1>Simple HTML for your YOUR_BRAND API-interface</h1>
	<iframe src="http://api.YOUR_BRAND/ru/hosting/" id="hostix_api"></iframe>
</body>
</html>

Как Вы, наверное, заметили, основным залогом успеха в данном примере, является инициализация framework'а Hostix API Pro:

<script type="text/javascript" src="http://api.YOUR_BRAND/inc/js/hostix_api.js"></script>

И наличие на странице элемента iframe, с id="hostix_api".

<iframe src="http://api.YOUR_BRAND/ru/hosting/" id="hostix_api"></iframe>

Спецификация:

После инициализации framework'а Hostix API Pro, пользователь получает в свое распоряжение DOM подгружаемого модуля.

Это позволяет очень гибко управлять всем содержимым модуля и изменять его на свой вкус и цвет, добавлять события, обработчики, использовать внутренние функции и т.д.

hostix_api.onload = function(){}

Функция позовляет Вам установить любое событие, которе будет обрабатыавться при загрузке модуля.

Пример:

<script type="text/javascript" src="http://api.YOUR_BRAND/inc/js/hostix_api.js"></script>
<script type="text/javascript">
	hostix_api.onload = function(){
		//Получим объект jQuery из объекта модуля
		if(!hostix_api.buffer["object"].contentWindow.window.jQuery)
			return;
		var hjq = hostix_api.buffer["object"].contentWindow.window.$;

		//Если мы находимся на главной странице, изменим ее
		if(hjq("#indexPage").length){
			//Создадим новый объект список
			var new_menu = hjq("<ul></ul>");
			//Соберем все основные ссылки на главной странице и положим их в наше новое меню
			hjq ("a","#indexPage").each(function(){
			hjq(this).attr("style", "");
			new_menu.append(hjq("<li></li>").append(this));
		});

		//Поскольку indexPage является таблицей, нам ничего не стоит ее заполнить новым содержимым
		hjq("#indexPage").html("<tr><td><ul>"+new_menu.html()+"</ul></td></tr>"+
			"<tr><td style="padding:40px">"+
			"<img src="http://valuehost.ru/images/logo2.gif" style="float:left;padding-right:15px;">"+
			"<h2> OK, it"s simple example for replacing content with Hostix API.</h2></td></tr>");
		}
	}
</script>

hostix_api.go_to = function(uri){}

Функция позволяет изменять модуль ValueHost API Pro при помощи внешних ссылок.
uri = относительная ссылка на модуль

Пример:

<a href="#hostix_api=//hosting/service/manage/"
	onclick="hostix_api.go_to("//hosting/service/manage/");return false">
		Управление
	</a>

Инициализация модуля по внешней ссылке

Создадим простую страницу:

my_simple.html:

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Hostix API Pro</title>
	<script type="text/javascript" src="http://api.YOUR_BRAND/inc/js/hostix_api.js"></script>
</head>
<body>
	<iframe
		src="http://api.YOUR_BRAND"
		id="hostix_api"
		style="width:100%;height:100%;overflow:hidden;border:none;">
	</iframe>
</body>
</html>

Теперь создим несколько ссылок на нашем сайте:

index.html:

<a href="my_simple.html#hostix_api=/ru/hosting/service/manage/">Управление</a>
<a href="my_simple.html#hostix_api=/ru/hosting/service/order/">Заказ</a>

Все, теперь при переходе по ссылкам с index.html, пользователь будет попадать на соотвествующий модуль.