admin_template_custom_main_page.js

动网论坛系列产品倍受用户赞誉的就是强大的功能和出色的用户体验表现

var __Layout__ = new (function () {
// 私有字段
	var _GUID = '__TemplateLayout_GUID_';//'__TemplateLayout_GUID_' + Math.random() + '__';
	var _selectedItem = null;
	var _dataStruct = ({'Top' : [], 'Middle' : {}, 'Bottom' : []});
	var _ref = '__Layout__';
	var _caller = this;

// 构造函数
	function _Initialize()
	{
		_dataStruct = ({
		// 顶部
			'TopContainer' : { 'Count' : 1, 'Items' : {} },
		// 中部
			//	一列
				// {'Count' : 1, 'Items' : {_GUID + 'Container_0' : {'Items' : {'0' : {'Text' : '', 'Value' : '', 'LabelType' : 0}}}}}
			'OneCol' : { 'Count' : 1, 'Items' : {} },

			//	两列对称
			'SymmetricTwoCol' : { 'Count' : 2, 'Items' : {} },

			//	三列，中间宽
			'ClassicThreeCol' : { 'Count' : 3, 'Items' : {} },

			//	两列，左列窄
			'ClassicTwoCol' : { 'Count' : 2, 'Items' : {} },

			//	两列，右列窄
			'BackwardsTwoCol' : { 'Count' : 2, 'Items' : {} },

			//	三列，左列窄
			'RightHeavyThreeCol' : { 'Count' : 3, 'Items' : {} },

			//	四个对称列
			'SymmetricFourCol' : { 'Count' : 4, 'Items' : {} },

		// 底部
			'BottomContainer' : { 'Count' : 1, 'Items' : {} },
			
		// 已选择的类型
			'SelectedLayout' : 'BackwardsTwoCol'
		});

	// 顶部
		_dataStruct.TopContainer.Items[_GUID + 'TopContainer'] = {
			'Width' : '100%',
			'Items' : {},
			'TopContainer' : ' ',
			'LeftContainer' : ' ',
			'RightContainer' : ' ',
			'BottomContainer' : _GUID + 'Container_0'
		};
		
	// 中部
		//	一列
		_dataStruct.OneCol.Items[_GUID + 'Container_0'] = {
			'Width' : '100%',
			'Items' : {},
			'TopContainer' : _GUID + 'TopContainer',
			'LeftContainer' : ' ',
			'RightContainer' : ' ',
			'BottomContainer' : _GUID + 'BottomContainer'
		};

		// 两列对称
		_dataStruct.SymmetricTwoCol.Items[_GUID + 'Container_0'] = {
			'Width' : '50%',
			'Items' : {},
			'TopContainer' : _GUID + 'TopContainer',
			'LeftContainer' : ' ',
			'RightContainer' : _GUID + 'Container_1',
			'BottomContainer' : _GUID + 'BottomContainer'
		};
		_dataStruct.SymmetricTwoCol.Items[_GUID + 'Container_1'] = {
			'Width' : '50%',
			'Items' : {},
			'TopContainer' : _GUID + 'TopContainer',
			'LeftContainer' : _GUID + 'Container_0',
			'RightContainer' : ' ',
			'BottomContainer' : _GUID + 'BottomContainer'
		};

		// 三列，中间宽
		_dataStruct.ClassicThreeCol.Items[_GUID + 'Container_0'] = {
			'Width' : '25%',
			'Items' : {},
			'TopContainer' : _GUID + 'TopContainer',
			'LeftContainer' : ' ',
			'RightContainer' : _GUID + 'Container_1',
			'BottomContainer' : _GUID + 'BottomContainer'
		};
		_dataStruct.ClassicThreeCol.Items[_GUID + 'Container_1'] = {
			'Width' : '50%',
			'Items' : {},
			'TopContainer' : _GUID + 'TopContainer',
			'LeftContainer' : _GUID + 'Container_0',
			'RightContainer' : _GUID + 'Container_2',
			'BottomContainer' : _GUID + 'BottomContainer'
		};
		_dataStruct.ClassicThreeCol.Items[_GUID + 'Container_2'] = {
			'Width' : '25%',
			'Items' : {},
			'TopContainer' : _GUID + 'TopContainer',
			'LeftContainer' : _GUID + 'Container_1',
			'RightContainer' : ' ',
			'BottomContainer' : _GUID + 'BottomContainer'
		};

		// 两列，左列窄		
		_dataStruct.ClassicTwoCol.Items[_GUID + 'Container_0'] = {
			'Width' : '30%',
			'Items' : {},
			'TopContainer' : _GUID + 'TopContainer',
			'LeftContainer' : ' ',
			'RightContainer' : _GUID + 'Container_1',
			'BottomContainer' : _GUID + 'BottomContainer'
		};
		_dataStruct.ClassicTwoCol.Items[_GUID + 'Container_1'] = {
			'Width' : '70%',
			'Items' : {},
			'TopContainer' : _GUID + 'TopContainer',
			'LeftContainer' : _GUID + 'Container_0',
			'RightContainer' : ' ',
			'BottomContainer' : _GUID + 'BottomContainer'
		};

		// 两列，右列窄		
		_dataStruct.BackwardsTwoCol.Items[_GUID + 'Container_0'] = {
			'Width' : '70%',
			'Items' : {},
			'TopContainer' : _GUID + 'TopContainer',
			'LeftContainer' :  ' ',
			'RightContainer' : _GUID + 'Container_1',
			'BottomContainer' : _GUID + 'BottomContainer'
		};
		_dataStruct.BackwardsTwoCol.Items[_GUID + 'Container_1'] = {
			'Width' : '30%',
			'Items' : {},
			'TopContainer' : _GUID + 'TopContainer',
			'LeftContainer' : _GUID + 'Container_0',
			'RightContainer' :  ' ',
			'BottomContainer' : _GUID + 'BottomContainer'
		};

		// 三列，左列窄		
		_dataStruct.RightHeavyThreeCol.Items[_GUID + 'Container_0'] = {
			'Width' : '20%',
			'Items' : {},
			'TopContainer' : _GUID + 'TopContainer',
			'LeftContainer' :  ' ',
			'RightContainer' : _GUID + 'Container_1',
			'BottomContainer' : _GUID + 'BottomContainer'
		};
		_dataStruct.RightHeavyThreeCol.Items[_GUID + 'Container_1'] = {
			'Width' : '40%',
			'Items' : {},
			'TopContainer' : _GUID + 'TopContainer',
			'LeftContainer' : _GUID + 'Container_0',
			'RightContainer' : _GUID + 'Container_2',
			'BottomContainer' : _GUID + 'BottomContainer'
		};
		_dataStruct.RightHeavyThreeCol.Items[_GUID + 'Container_2'] = {
			'Width' : '40%',
			'Items' : {},
			'TopContainer' : _GUID + 'TopContainer',
			'LeftContainer' : _GUID + 'Container_1',
			'RightContainer' : ' ',
			'BottomContainer' : _GUID + 'BottomContainer'
		};

		// 四个对称列
		_dataStruct.SymmetricFourCol.Items[_GUID + 'Container_0'] = {
			'Width' : '25%',
			'Items' : {},
			'TopContainer' : _GUID + 'TopContainer',
			'LeftContainer' : ' ',
			'RightContainer' : _GUID + 'Container_1',
			'BottomContainer' : _GUID + 'BottomContainer'
		};
		_dataStruct.SymmetricFourCol.Items[_GUID + 'Container_1'] = {
			'Width' : '25%',
			'Items' : {},
			'TopContainer' : _GUID + 'TopContainer',
			'LeftContainer' : _GUID + 'Container_0',
			'RightContainer' :  _GUID + 'Container_2',
			'BottomContainer' : _GUID + 'BottomContainer'
		};
		_dataStruct.SymmetricFourCol.Items[_GUID + 'Container_2'] = {
			'Width' : '25%',
			'Items' : {},
			'TopContainer' : _GUID + 'TopContainer',
			'LeftContainer' : _GUID + 'Container_1',
			'RightContainer' :  _GUID + 'Container_3',
			'BottomContainer' : _GUID + 'BottomContainer'
		};
		_dataStruct.SymmetricFourCol.Items[_GUID + 'Container_3'] = {
			'Width' : '25%',
			'Items' : {},
			'TopContainer' : _GUID + 'TopContainer',
			'LeftContainer' : _GUID + 'Container_2',
			'RightContainer' : ' ',
			'BottomContainer' : _GUID + 'BottomContainer'
		};

	// 底部
		_dataStruct.BottomContainer.Items[_GUID + 'BottomContainer'] = {
			'Width' : '100%',
			'Items' : {},
			'TopContainer' : _GUID + 'Container_' + (_dataStruct[_dataStruct.SelectedLayout].Count - 1),
			'LeftContainer' : ' ',
			'RightContainer' : ' ',
			'BottomContainer' : ' '
		};
	}
	// 执行构造函数
	_Initialize();

// 方法	
	this.parseJSON = function (jsonData) {
		if (!jsonData || 'string' !== typeof(jsonData))
		{
			alert('参数jsonData不是合法的JSON格式的字符串！');
			return false;
		}
		_dataStruct = jsonData.parseJSON();
	};
	
	/**
	 * 修复 _dataStruct
	 */
	function _FixDataStruct()
	{
		var raw_data_struct = _dataStruct;
		_Initialize();
		_dataStruct.SelectedLayout = raw_data_struct.SelectedLayout;
		var oselect = null, option = null, current = null;
		
		// 处理顶部区域
		for (var key in raw_data_struct.TopContainer.Items)
		{
			oselect = document.getElementById(key);
			if (!oselect || 'undefined' === typeof(oselect.options))
			{
				continue;
			}
			for (var i = 0; i < oselect.options.length; i++)
			{
				current = _dataStruct.TopContainer.Items[key];
				option = oselect.options[i];
				current.Items[i + ''] = {'Text' : option.text, 'Value' : option.value, 'LabelType' : option._label_type};
			}
		}
		
		// 处理中部区域
		for (var key in raw_data_struct[raw_data_struct.SelectedLayout].Items)
		{
			oselect = document.getElementById(key);
			if (!oselect || 'undefined' === typeof(oselect.options))
			{
				continue;
			}
			for (var i = 0; i < oselect.options.length; i++)
			{
				current = _dataStruct[_dataStruct.SelectedLayout].Items[key];
				option = oselect.options[i];
				current.Items[i + ''] = {'Text' : option.text, 'Value' : option.value, 'LabelType' : option._label_type}
			}
		}
		
		// 处理底部区域
		for (var key in raw_data_struct.BottomContainer.Items)
		{
			oselect = document.getElementById(key);
			if (!oselect || 'undefined' === typeof(oselect.options))
			{
				continue;
			}
			for (var i = 0; i < oselect.options.length; i++)
			{
				current = _dataStruct.BottomContainer.Items[key];
				option = oselect.options[i];
				current.Items[i + ''] = {'Text' : option.text, 'Value' : option.value, 'LabelType' : option._label_type}
			}
		}
		
		raw_data_struct = oselect = option = current = null;
		return;
	}
	
	/**
	 * Description 添加标签到版式列表中
	 * @author 阿杜([e-mail])
	 * @param string 要添加的标签的中文描述
	 * @param string 要添加的标签的名称
	 * @return void
	 */
	this.addLabel = function (srcOption) {
		if (!srcOption)
		{
			return;
		}
		var top_container = document.getElementById(_GUID + 'TopContainer');
		if (!top_container)
		{
			return false;
		}
		if (0 == top_container.options.length)
		{
			top_container.insertBefore(srcOption);
		}
		else
		{
			var option = top_container.options[top_container.options.length - 1];
			top_container.insertBefore(srcOption, option);
			top_container.insertBefore(option, srcOption);
		}
		_selectedItem = srcOption;
		top_container.selectedIndex = -1;
		top_container.selectedIndex = top_container.options.length - 1;
		return true;
	};

	// 从版式列表中移除标签，并移动到目标 destSelect ； 此函数会自动判断当前被选中的标签，因此无需传递参数
	// 需要同步 _dataStruct
	this.cutTo = function (destSelect) {
		if (!_selectedItem)
		{
			return false;
		}
		if (!destSelect)
		{
			return false;
		}

		var dest_container = _selectedItem.parentNode;
		var raw_item = _selectedItem;

		if (0 == destSelect.options.length)
		{
			destSelect.insertBefore(_selectedItem);
		}
		else
		{
			var option = destSelect.options[destSelect.options.length - 1];
			destSelect.insertBefore(_selectedItem, option);
			destSelect.insertBefore(option, _selectedItem);
		}
		if (0 == dest_container.options.length)
		{
			_selectedItem = null;
		}
		else
		{
			_selectedItem = dest_container.options[dest_container.options.length - 1];
			dest_container.selectedIndex = dest_container.options.length - 1;
		}
		return true;
	};

	// 设置版式布局 
	this.setLayout = function (layout) {
		if ('string' !== typeof(layout))
		{
			return;
		}
		if (!(layout in _dataStruct))
		{
			return;
		}
		
		var data_struct = _dataStruct;
		// 重置数据结构
		_Initialize();

		// 设置布局
		_dataStruct.SelectedLayout = layout;
		_dataStruct.TopContainer = data_struct.TopContainer;
		_dataStruct.BottomContainer = data_struct.BottomContainer;
		
		var dest = data_struct[data_struct.SelectedLayout];
		var arr = [], id = null, option = null;;
		for (var key in dest.Items)
		{
			id = document.getElementById(key);
			if (!id)
			{
				continue;
			}
			for (var i = 0; i < id.options.length; i++)
			{
				option = id.options[i];
				arr[arr.length] = {'text' : option.text, 'value' : option.value, '_label_type' : option._label_type};
			}
		}
		if (arr.length > 0)
		{
			var ds = _dataStruct[_dataStruct.SelectedLayout];
			var index = 0, count = Math.ceil(arr.length / ds.Count);
			for (var key in ds.Items)
			{
				for (var i = 0; i < count; i++)
				{
					if ('undefined' === typeof(ds.Items[key].Width))
					{
						continue;
					}
					if ('undefined' === typeof(arr[index]))
					{
						break;
					}
					option = arr[index++];
					ds.Items[key].Items['' + i] = {'Text' : option.text, 'Value' : option.value, 'LabelType' : option._label_type};
				}
			}
		}

		// 
		//_dataStruct.BottomContainer.Items[_GUID + 'BottomContainer'].TopContainer = _GUID + 'Container_' + (_dataStruct[_dataStruct.SelectedLayout].Count - 1);
		
		// 显示版式布局
		_showUI();
	};

	// 此方法由 this.setLayout 调用，用于在网页中显示版式布局
	function _showUI()
	{
		var id = document.getElementById(_GUID + 'container');
		if (!id)
		{
			document.write(_caller.toHtmlString());
		}
		else
		{
			id.outerHTML = _caller.toHtmlString();
		}
	}

	// 返回用于在网页中显示的HTML字符串