Имя пользователя:
Пароль:  
Помощь | Регистрация | Забыли пароль?  | Правила  

Компьютерный форум OSzone.net » Программирование, базы данных и автоматизация действий » Программирование и базы данных » Разное - На чем написан этот интерфейс? Скажите, что вбивать в гугл, чтобы почитать подробнее)

Ответить
Настройки темы
Разное - На чем написан этот интерфейс? Скажите, что вбивать в гугл, чтобы почитать подробнее)

Старожил


Сообщения: 186
Благодарности: 4

Профиль | Отправить PM | Цитировать


Изображения
Тип файла: jpg Example.jpg
(75.9 Kb, 34 просмотров)
Добрый день! В приложении скрин с этим интерфейсом. Это один из популярных файлообменников. На всякий случай прилагаю хтмл-код той страницы:

читать дальше »
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>

<title>Бесплатный файлообменник TurboBit.net — обмен файлами до 5 Гб, бесплатный хостинг файлов</title>
<meta name="description" content="Быстрый файлообменник и бесплатный хостинг файлов. Место под хранение файлов не ограничено. Скорость передачи файлов до 1 Гб/сек. Скачивание файлов в несколько потоков. Загрузка через браузер, по FTP и нескольких файлов сразу.">
<meta name="keywords" content="файлообменник, обмен файлами, передача файлов, бесплатные файлообменники, файловый обменник, хранение файлов, файл обменник, хостинг файлов, файлообменник ru, файлообменик, файлообмен, файлообменники бесплатно, файлобменник, файлообменник без регистрации, файло обменник, хостинг файлов, бесплатный хостинг файлов, загрузка файлов, закачка файлов, файл серверы, файловый сервер, интернет файлы, загрузить файл, закачать файлы, залить файл, хранить файлы, сервер загрузки файлов, заработок файлообменники, файлообменник заработать, файлообменник платит">

<script type='text/javascript' src='/js/console.js' ></script>
<script type='text/javascript' src='/js/common.js' ></script>

<script type='text/javascript' src='/js/jquery-1.2.6.js' ></script>
<script type='text/javascript' src='/js/lib/ui/ui.core.js' ></script>
<script type='text/javascript' src='/js/lib/ui/ui.tabs.js' ></script>
<script type='text/javascript' src='/js/lib/ui/ui.dialog.js' ></script>
<script type='text/javascript' src='/js/swfobject.js' ></script>
<script type='text/javascript' src='/js/lib/grid/jquery.jqGrid.js' ></script>
<script type='text/javascript' src='/js/lib/grid/js/jqModal.js' ></script>
<script type='text/javascript' src='/js/lib/grid/js/jqDnR.js' ></script>
<script type='text/javascript' src='/js/lib/ui/i18n/ui.datepicker-ru.js' ></script>

<script type='text/javascript' src='/js/lib/ui/ui.datepicker.js' ></script>
<script type='text/javascript' src='/locale/ru/js/grid.locale.old.js' ></script>
<script type='text/javascript' src='/locale/ru/js/general.locale.js' ></script>
<script type='text/javascript' src='/js/general.js' ></script>
<link rel="stylesheet" type="text/css" href="/js/lib/ui-1.7.2/themes/ui-lightness/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" href="/css/impromptu.css" />
<link rel="stylesheet" type="text/css" href="/css/tabs.css" />
<link rel="stylesheet" type="text/css" href="/css/cssf-base.css" />
<link rel="stylesheet" type="text/css" href="/css/general.css" />
<link rel="stylesheet" type="text/css" href="/css/grid.css" />
<link rel="stylesheet" type="text/css" href="/locale/ru/css/general.locale.css" />
<link rel="stylesheet" type="text/css" href="/js/lib/ui/themes/custom/ui.datepicker.css" />
<link rel="stylesheet" type="text/css" href="/js/lib/grid/themes/basic/grid.css" />

<link rel="stylesheet" type="text/css" href="/js/lib/grid/themes/jqModal.css" />
<link rel="stylesheet" type="text/css" href="/css/user.css" />
</head>
<body>

<div class="main main-alt" id="main">

<div class="panel-login">
<div class="panel-login-sub">


<div class="menu-item user-name">chumakzhenya@yahoo.com</div>
<div class="seporator">|</div>

<a class="menu-item" href="/user/settings">Настройки</a>
<div class="seporator">|</div>
<a class="menu-item exit" href="/user/logout">Выйти<img src='/img/main/pointright-black.gif'></a>


<div class="panel-local">
<ul>
<li class='selected'>Russian <img src='/img/icon/flags/ru.gif'> <img src='/img/icon/flags/pointdown.gif'></li><li><a href='http://turbobit.net/en'>English</a> <img src='/img/icon/flags/en.gif'></li>

</ul>

</div>

</div>
<div class='clear'></div>
</div> <div class="panel-top">
<div class="left">
<div class="right">
<div class="center">
<div class="logo">
<a href="/">

<img src="/locale/ru/default.png">
</a>

<div class="panel-navigation">
<a href='/partner' class=''><span>Партнерская программа</span></a><span class='seporator'>|</span><a href='/turbo' class=''><span>Турбо доступ</span></a><span class='seporator'>|</span><a href='/' class=''><span>Загрузить файл</span></a> <div class="clear"></div>
</div>

</div>
</div>
</div>
</div>
</div>

<div class="main-alt h-10">
<div class="panel-user">
<span class="panel-user-name">
<div>На счету: 0.47 USD</div> <div class='premium-date'>

<img src='/img/icon/noturbo.png'> <u>Турбо доступ</u> закрыт. <a href='/turbo'>Открыть?</a>
</div>
</span>

<div class="panel-user-menu">
<a href='/user/files' class='active'>Мои файлы</a> <span>|</span> <a href='/user/domains' class=''>Мои сайты</a> <span>|</span> <a href='/user/referrals' class=''>Рефералы</a> <span>|</span> <a href='/user/sites' class=''>Сайты-рефералы</a> <span>|</span> <a href='/user/urlfiles' class=''>URL загрузки</a><div class="line"></div><b>Статистика: </b> <span></span> <a href='/user/statistics' class=''>Файлы</a> <span>|</span> <a href='/user/downloads' class=''>Скачивания</a> <span>|</span> <a href='/user/sources' class=''>Источники</a> <span>|</span> <a href='/user/earnings' class=''>Заработок</a> <span>|</span> <a href='/user/purse' class=''>Кошелёк</a> </div>

<div class="clear"></div>
</div> </div>

<div class="panel-main">

<script>

$(document).ready(function(){
var selectRowFolder;

function alertDialog(msg) {
info_dialog('Внимание', msg, '', '/js/lib/grid/icon/file/');
}

function linkBox() {
var rowids = $("#file-list").getGridParam('selarrrow');
if (rowids == '') {
alertDialog('Необходимо выделить хотя бы одну запись.');
} else {
var baseURL = "http://" + window.location.host;

if(baseURL.indexOf('http://www.')>-1) {
var wapURL = baseURL.replace("http://www.", "http://wap.");
} else {
var wapURL = baseURL.replace("http://", "http://wap.");
}
var pic = "<img src='"+baseURL+"/turbobit.png' align='middle'>";
var tab1 = tab2 = tab3 = tab4 = tab5 = tab6 = tab7 = "";

$.each(rowids, function() {
var file = $("#file-list").getRowData(this);
var fileURL = baseURL + "/" + file.id + ".html";
var fileName = file.name.replace(/<[^>]+>/ig, "");

tab1 += fileURL + '\r\n';
tab2 += "<a href='" + fileURL + "'>" + fileName + pic + "</a>" + '\r\n';
tab3 += "" + fileName + "" + '\r\n';
tab4 += sociable(fileURL, file.description, file.tags) + '<br>';
tab6 += baseURL + "/delete/file/" + file.id + "/" + file.delete_id + '\r\n';
tab7 += wapURL + "/" + file.id + ".html";
});

$("#tab-1 textarea").val(tab1);
$("#tab-2 textarea").val(tab2);
$("#tab-3 textarea").val(tab3);
$("#tab-7 textarea").val(tab7);
$("#tab-4").html(tab4);
$("#tab-5 #hidden-file-url").val(rowids);
$("#tab-6 textarea").val(tab6);

$("#file-setting").show();

window.location.hash = "#block-link";
}
}

function sociable(permalink, title, tags) {
var sociable = {
'bobrdobr.ru': {
'favicon': 'bobrdobr.png',
'url': 'http://bobrdobr.ru/addext.html?url=PERMALINK&title=TITLE&tags=TAGS'
},
'МоеМесто': {
'favicon': 'moemesto.png',
'url': 'http://moemesto.ru/post.php?url=PERMALINK&title=TITLE'
},
'toodoo.ru': {
'favicon': 'toodoo.png',
'url': 'http://toodoo.ru/digest/discuss?dig_url=PERMALINK&dig_title=TITLE'
},
'Memori.ru': {
'favicon': 'memori.png',
'url': 'http://memori.ru/link/?u_data[url]=PERMALINK&u_data[name]=TITLE&u_data[tags]=TAGS'
},
'Яндекс.Закладки': {
'favicon': 'zakladki_yandex.png',
'url': 'http://zakladki.yandex.ru/userarea/links/addfromfav.asp?bAddLink_x=1&lurl=PERMALINK&lname=TITLE'
},
'Закладки Google': {
'favicon': 'zakladki_google.png',
'url': 'http://www.google.com/bookmarks/mark?op=add&bkmk=PERMALINK&title=TITLE&labels=TAGS'
}
};

var html = "";
$.each(sociable, function(key, site) {
url = site['url'];
url = url.replace(/PERMALINK/, permalink);
url = url.replace(/TITLE/, title);
url = url.replace(/TAGS/, tags);

html += "<a href='" + url +"' class='sociable_icons' title='" + key + "'>";
html += "<img src='/img/icon/sociable/" + site['favicon'] + "' title='" + key + "' alt='" + key + "'>";
html += "</a>";
});

return html;
}

$("#folder-list").jqGrid({
height: "100%",
//width: '734',
forceFit: true,
url: '/user/files/gridFolder',
caption: 'Мои папки',
datatype: 'json',
colNames: ['id', '', 'Имя папки', 'Переименовать', 'Удалить', 'Количество файлов'],
colModel: [
{name:'id', index:'id', width:1, hidden: true},
{name:'type', index:'type', width:30, align: 'center', sortable: false},
{name:'name', index:'name', width:200, align: 'left', editable: true, editoptions: {maxlength: 200}, editrules: {required: true}},
{name:'edit', index:'edit', width:120, align: 'center', sortable: false},
{name:'delete', index:'delete', width:120, align: 'center', sortable: false},
{name:'count', index:'count', width:120, align: 'center'}
],
rowNum: 20,
imgpath: '/js/lib/grid/icon/folder',
pager: $('#folder-pager'),
sortname: 'id',
viewrecords: true,
sortorder: 'asc',
onSelectRow: selectFolder,
gridComplete: initFolder,
editurl: '/user/files/gridFolderEdit'
}).navGrid('#folder-pager', {refresh:false,add:false,edit:false,del:false,search:false}
).navButtonAdd('#folder-pager', {
caption: '<div>создать</div>',
title: 'создать',
buttonimg:"/js/lib/grid/icon/folder-add.gif",
onClickButton: addFolder
}).navButtonAdd('#folder-pager', {
caption: '<div>обновить</div>',
title: 'обновить',
buttonimg:"/js/lib/grid/icon/refresh.gif",
onClickButton: function() {
$("#folder-list").trigger('reloadGrid');
}
});

function initFolder() {
// Обновили грид, незабыли выделить запись
$("#folder-list").setSelection(selectRowFolder, true);

$('.edit-folder').click(function() {
var rowid = $(this).parents("tr").attr("id");
if (rowid != null) {
$("#folder-list").editGridRow(rowid, {});
}
});

$('.delete-folder').click(function() {
var rowid = $(this).parents("tr").attr("id");
if (rowid != null) {
$("#folder-list").delGridRow(rowid, {
afterSubmit : function(response) {location.reload(true);}
});
}
});
}

function selectFolder() {
var rowid = $("#folder-list").getGridParam('selrow');
var cell = $("#folder-list").getRowData(rowid);
var nameFolder = cell.name;

if (rowid == null) {
rowid = 0;
if ($("#file-list").getGridParam('records')>0) {
$("#file-list").setGridParam({
url: "/user/files/gridFile?q=1&id=" + rowid,
page: 1
})
.setCaption("<b>Папка:</b> " + nameFolder)
.trigger('reloadGrid');
}
} else {
$("#file-list").setGridParam({
url: "/user/files/gridFile?q=1&id=" + rowid,
page: 1
})
.setCaption("<b>Папка:</b> " + nameFolder)
.trigger('reloadGrid');
}

$("#file-setting").hide();
selectRowFolder = rowid;
}

function addFolder() {
$("#folder-list").editGridRow("new", {
afterSubmit : function(response) {location.reload(true);},
closeAfterAdd: true
});
}


$("#file-list").jqGrid({
caption: 'Папка: Входящие',
height: '100%',
width: '734',
forceFit: true,
url: '/user/files/gridFile',
datatype: 'json',
colNames: [
'id',
'Тип',
'Имя',
'Ссылка',
'Edit',
'Копия',
'Размер',
'Загружен',
'Срок, дней',
'Зашли',
'Скачали*',
'Описание',
'Метки',
'Папка',
'Удаление'
],
colModel: [
{name:'id', index:'id', width:1, hidden: true},
{name:'file_type', index:'file_type', width:26, align: 'center'},
{name:'name', index:'name', width:155, align: 'left', editable: true, edittype: 'link', editoptions: {maxlength: 39}, editrules: {required: true}},
{name:'link', index:'link', width:44, align: 'center', sortable: false},
{name:'edit', index:'edit', width:33, align: 'center', sortable: false},
{name:'copy', index:'copy', width:33, align: 'center'},
{name:'size', index:'size', width:55, align: 'center'},
{name:'created_date', index:'created_date', width:58, align: 'center'},
{name:'delete_date', index:'delete_date', width:62, align: 'center'},
{name:'view_count', index:'view_count', width:43, align: 'center'},
{name:'download_count', index:'download_count', width:59, align: 'center'},
{name:'description', index:'description', width:1, align: 'center', hidden: true, editrules: {edithidden: true}, editable: true, edittype: 'textarea', editoptions: {maxlength: 255} },
{name:'tags', index:'tags', width:1, align: 'center', hidden: true, editrules: {edithidden: true}, editable: true, edittype: 'text', editoptions: {maxlength: 255} },
{name:'folder_id', index:'folder_id', width:1, align: 'center', hidden: true, editrules: {edithidden: true}, editable: true, edittype: 'select', editoptions: {value: "'0':\u0412\u0445\u043e\u0434\u044f\u0449\u0438\u0435;24410:bas rutten;25997:6091 \u041f\u0435\u0440\u0435\u0434 \u0440\u0430\u0441\u0441\u0432\u0435\u0442\u043e\u043c;25998:6090 \u0425\u0430\u0442\u0438\u043a\u043e \u0441\u0430\u043c\u044b\u0439 \u0432\u0435\u043d\u044b\u0439 \u0434\u0440\u0443\u0433;26362:Hendrix;26861:6094 \u041d\u0438\u043d\u0434\u0437\u044f;26982:6095 \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0430 \u0441\u043b\u0430\u0432\u044f\u043d;27068:6093 \u041f\u0435\u0440\u0435\u0434 \u0437\u0430\u043a\u0430\u0442\u043e\u043c;27078:6096 Ghost in the shell;27079:6092 \u041c\u0438\u0441\u0441 \u041e\u0441\u0442\u0438\u043d \u0441\u043e\u0436\u0430\u043b\u0435\u0435\u0442;27262:6097 Funny People;27679:6098 \u041d\u043e\u0441\u0438\u0442\u0435\u043b\u0438;27828:6100 \u0418\u0432\u0430\u043d \u0421\u043e\u043b\u043e\u0432\u043e\u0432;28211:6101;28212:6102;28230:6104 HouseSitter;28309:6106 Fall of the Republic The Presidency of Barack H Obama;28315:6105 Law Abiding Citizen;28316:6099 Old School;28374:6107 Autumn;28595:6109 Ink;28672:6110 Battle for Terra;28708:6111 Planet 51;28761:6112 Ya;29094:6113 Ministers;29095:6114 Stunt man;29545:6115 Logan`s Run;29587:6116 Extract;29649:Soft;29674:ElvinBurunduki;29790:6117 Razjalovanniy;29791:6118 TheBox;29887:6119 Ukroschenie Stroptivi"} },
{name:'delete_id', index:'delete_id', width:1, hidden: true}
],
rowNum: 20,
imgpath: '/js/lib/grid/icon/file',
pager: $('#file-pager'),
sortname: 'created_date',
viewrecords: true,
multiselect: true,
sortorder: "desc",
editurl: '/user/files/gridFileEdit',
gridComplete: initFiles
}).navGrid('#file-pager', {refresh:false,add:false,edit:false,del:false,search:false}
).navButtonAdd('#file-pager', {
caption: '<div>ссылки на файлы</div>',
title: 'ссылки на файлы',
buttonimg:"/js/lib/grid/icon/link.gif",
onClickButton: linkFiles
}).navButtonAdd('#file-pager', {
caption: '<div>переместить</div>',
title: 'переместить',
buttonimg:"/js/lib/grid/icon/folder-edit.gif",
onClickButton: moveFiles
}).navButtonAdd('#file-pager', {
caption: '<div>продлить</div>',
title: 'продлить',
buttonimg:"/js/lib/grid/icon/time.gif",
onClickButton: prolongFiles
}).navButtonAdd('#file-pager', {
caption: '<div>удалить</div>',
title: 'удалить',
buttonimg:"/js/lib/grid/icon/file-del.gif",
onClickButton: deleteFiles
}).navButtonAdd('#file-pager', {
caption: '<div>обновить</div>',
title: 'обновить',
buttonimg:"/js/lib/grid/icon/refresh.gif",
onClickButton: function() {$("#file-list").trigger('reloadGrid');}
});

$('#setting').tabs();

function initFiles() {

$('.edit-file').click(function(evt) {
// Убираем галочки с чексбоков
$("#file-list").resetSelection();
$("#file-list").setSelection(rowid, true);
var rowid = $(this).parents("tr").attr("id");
$("#file-list").editGridRow(rowid, {
afterSubmit : function(response) {
$("#folder-list").trigger('reloadGrid');

if (response.responseText != "") {
return [false, response.responseText];
} else {
return [true, ''];
}
},
reloadAfterSubmit: true,
editData: {ids: rowid}
});
$("#file-list").setSelection(rowid, true);
return false;
});

$('.link-file').click(function(evt) {
// Убираем галочки с чексбоков
$("#file-list").resetSelection();
var rowid = $(this).parents("tr").attr("id");
// Выделили нужную нам запись
$("#file-list").setSelection(rowid, true);
linkBox();
return false;
});

$('.copy-file').unbind('click');
$('.copy-file').bind('click', function(evt) {
// Убираем галочки с чексбоков
$("#file-list").resetSelection();
//$("#file-list").setSelection(rowid, true);
var rowid = $(this).parents("tr").attr("id");
$.ajax({
type: 'GET',
url: '/user/files/copyFile/' + rowid,
dataType: 'JSON',
success: function() {
$("#file-list").trigger('reloadGrid');
$("#folder-list").trigger('reloadGrid');
}
});
$("#file-list").setSelection(rowid, true);
return false;
});

}

function deleteFiles() {
var rowsid = $("#file-list").getGridParam('selarrrow');
if (rowsid != null) {
$("#file-list").delGridRow(rowsid, {
afterSubmit : function(response) {
$("#folder-list").trigger('reloadGrid');
if (response.responseText == "") {
res = [true, ""];
} else {
$(".loading").hide();
res = [false, response.responseText];
}
return res;
}
});
}
}

function linkFiles() {
linkBox();
}

// Функция продления файла
function prolongFiles() {
var rowsid = $("#file-list").getGridParam('selarrrow');
if (rowsid == '') {
alertDialog('Необходимо выделить хотя бы одну запись.');
} else {
if (rowsid.length > 1) {
var popUpWindow = window.open('/payments/emoney/fileLifeTariff/'+rowsid.length);
popUpWindow.files = rowsid;
} else {
window.open('/payments/sms/fileLifeTariff/'+rowsid);
}

}
}

function moveFiles() {
var rowsid = $("#file-list").getGridParam('selarrrow');
if (rowsid == '') {
alertDialog('Необхдимо выделить хотябы одну запись.');
} else {
$("#file-list").editGridRow(rowsid[0], {
onInitializeForm: function() {
$("#tr_name").hide();
$("#tr_description").hide();
$("#tr_tags").hide();
},
afterSubmit : function(response) {
$("#folder-list").trigger('reloadGrid');

if (response.responseText != "") {
return [false, response.responseText];
} else {
return [true, ''];
}
},
reloadAfterSubmit: true,
editData: {ids: rowsid.join(",")}
});
}
}


});


</script>

<h1>Вами были загружены</h1>

<div class="grid">
<table id="folder-list" class="scroll"></table>
<div id="folder-pager" class="scroll"></div>

</div>

<div class="grid">
<table id="file-list" class="scroll"></table>
<div id="file-pager" class="scroll"></div>
</div>

<a name="block-link"></a>
<div class="grid h-140" id="file-setting">
<span style="font-size: 16px;font-weight: 700;">Cсылка на этот файл:</span><br>
<span style="float:left;margin-top:4px;color:#333333;">для</span>
<ul id="setting">

<li><a href='#tab-1'><span>скачивания</span></a></li>
<li><a href='#tab-2'><span>сайта или блога</span></a></li>
<li><a href='#tab-3'><span>форума</span></a></li>
<li><a href='#tab-7'><span>wap-сайта</span></a></li>
<li><a href='#tab-4'><span>в закладки</span></a></li>
<li><a href='#tab-5'><span>отправить по почте</span></a></li>

<li><a href='#tab-6'><span>удалить файл</span></a></li>
</ul>

<div id='tab-1'><textarea></textarea></div>
<div id='tab-2'><textarea></textarea></div>
<div id='tab-3'><textarea></textarea></div>
<div id='tab-7'><textarea></textarea></div>

<div id='tab-4'></div>
<div id='tab-5'>
<div id='file-msg'></div>
<div align="center">
<span></span>
<div class="error" id="msg-mail"></div>
<div class="clear"></div>
</div>
<form id="mail" class="mail" method="post" action="">

<div>
<span>Кому:</span>
<input class="text" type="text" id="email0" name="email[0]" value="e-mail">
</div>
<div>
<span></span>
<input class="text" type="text" id="email1" name="email[1]" value="e-mail">
</div>

<div>
<span></span>
<input class="text" type="text" id="email2" name="email[2]" value="e-mail">
</div>
<div id="btnSubmit" class="user-setting">Отправить</div>
<input type='hidden' id='hidden-file-url' name="id" value=''>
</form>
</div>

<div id='tab-6'><textarea></textarea></div>

</div>
<p>
<br/>* В столбце "Скачали" указано количество всех скачиваний файла, в том числе неуникальных.<br/>
</p> <div class="clear"></div>
</div>
</div>

<div class="footer">

<div class="left">
<div class="right">
<div class="center">
<span id="item-title">
Файлообменник © TurboBit.net 2009 </span>
<span>
<a href='/rules'>Правила</a> </span>

<span><a href='/faq'>FAQ</a></span>
<span><a href='/mail/complaint'>Пожаловаться на файлы</a></span>
<span><a href='/mail/feedback'>Обратная связь</a></span>
</div>
</div>
</div>
</div>

<!--LiveInternet counter-->
<script type="text/javascript">
<!--
new Image().src = "http://counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.heig ht+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";"+Math.r andom();
//-->
</script>

<!--/LiveInternet-->

<!-- Rendered in 0.0237 seconds, using 1.03MB of memory -->
</body>
</html>

Что вбивать в гугл, чтобы почитать про эту штуку подробнее?)

Отправлено: 04:12, 28-12-2009

 
pva pva вне форума

Аватара для pva

Ветеран


Сообщения: 1180
Благодарности: 279

Профиль | Отправить PM | Цитировать


судя по обилию скриптов - на JS. В гугль вбивать MSDN Library, а там раздел Scripting/Web Development/DHTML

Отправлено: 09:03, 28-12-2009 | #2



Для отключения данного рекламного блока вам необходимо зарегистрироваться или войти с учетной записью социальной сети.

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


Вредитель


Сообщения: 460
Благодарности: 126

Профиль | Отправить PM | Цитировать


evg64, ищите jquery.

-------
Все сказаное является только моим личным мнением.


Отправлено: 10:18, 28-12-2009 | #3

pva pva вне форума

Аватара для pva

Ветеран


Сообщения: 1180
Благодарности: 279

Профиль | Отправить PM | Цитировать


DedAlex, я понимаю что вы знакомы с возможностями JS, можно как-то измерить высоту отформатированного текста? чтобы разделить его на колонки заданной высоты (допустим 500px), посчтчтать сколько необходимо столбцов и разбить на столбцы?

Отправлено: 14:45, 28-12-2009 | #4


Deadooshka


Сообщения: 2511
Благодарности: 689

Профиль | Отправить PM | Цитировать


Цитата pva:
В гугль вбивать MSDN Library »
желательно туда смотреть только касательно браузера IE, для остальных браузеров - ECMA.
начать можно здесь http://ru.wikipedia.org/wiki/JavaScript (там и ссылки все).
Цитата pva:
измерить высоту отформатированного текста? чтобы разделить его на колонки заданной высоты (допустим 500px), посчтчтать сколько необходимо столбцов и разбить на столбцы? »
имхо мутное и кропотливое дело. нужно учитывать margin/padding всего и вся (некроссбраузерная история), кернинг, размер шрифта, конкретный шрифт (системное дело - мб разные), перенос слов (тут вообще произвольно, либо жестко сделать перенос по буквам). Т.е. математику - сразу в топку, остается эмпирический путь...

Отправлено: 16:58, 28-12-2009 | #5

pva pva вне форума

Аватара для pva

Ветеран


Сообщения: 1180
Благодарности: 279

Профиль | Отправить PM | Цитировать


А способ типа:
  • задали фиксированный размер по ширине, бесконечный по длине, дали расположиться автоматически
  • Отсчитали 500 пикселей вниз, узнали какой объект в этой точке, запомнили
  • Ещё вниз на 500 пикселей и т.д. до конца
  • Разрезали страницу по границам запомненных объектов и вставили обрезки в колонки таблиц
Можно реализовать?

Правда вот ещё придумал что можно заранее составить последовательность страничек размера примерно 300*100 пикселей (или по абзацам там) и тупо располагать их плиткой при загрузке странички. Только проблема чтобы при изменении размера браузера их надо перераскладывать.
Идея то в чём, очень приятно читать текст шириной около 80 символом и 20-60 строчек на страничке. Потом меня бесит когда открываешь на экране 1280*800 страничку, а она занимает полоску 800*3000 посреди экрана. Так бы расположить себе как книжку с колонками и читать в удовольствие...

Отправлено: 17:31, 28-12-2009 | #6


Deadooshka


Сообщения: 2511
Благодарности: 689

Профиль | Отправить PM | Цитировать


отсчитывать придется не пиксели, а символы текста (разбить текст на примерно равное количество символов, с учетом слов и заполняемости колонок, и потом рассовать эти части по колонкам. Только делать это целесообразнее на стороне сервера.
А чтобы колонки заполнялись динамически при изменении размера окна - такого не видел, но имхо реализуемо. Тут нужно учитывать изменение размеров колонок при изменении размера окна. Но имхо это все понты, и делать нужно проще.
К тому же формат страниц не от балды делается, а с учетом рекламных вставок и минимального разрешения (1024*768), и при обычной верстке страницы газетный формат с колонками просто не влезет.

на некоторых сайтах реализованы динамические блоки, с драг'н'дропом, но это сделано с другими задачами...

Отправлено: 19:08, 28-12-2009 | #7


Старожил


Сообщения: 186
Благодарности: 4

Профиль | Отправить PM | Цитировать


А получить информацию из этих таблиц (jquery) как можно? И вообще можно ли (наверняка можно)? Для этого необходим код на JavaScript? Если нет, то как еще можно? А то я с Javascript не знаком вовсе.

Отправлено: 15:40, 30-12-2009 | #8


Старожил


Сообщения: 186
Благодарности: 4

Профиль | Отправить PM | Цитировать


Формы точно сделаны через JQuery? Информация из ячеек таблиц, сделанных на JQuery, всегда (?) содержится исходном коде страницы. В коде из скрина всей этой инфы нет. Тогда как ее получить?

На чем написан этот код? Это функция строит верхнюю форму из скрина:
читать дальше »
colModel: [
{name:'id', index:'id', width:1, hidden: true},
{name:'file_type', index:'file_type', width:26, align: 'center'},
{name:'name', index:'name', width:155, align: 'left', editable: true, edittype: 'link', editoptions: {maxlength: 39}, editrules: {required: true}},
{name:'link', index:'link', width:44, align: 'center', sortable: false},
{name:'edit', index:'edit', width:33, align: 'center', sortable: false},
{name:'copy', index:'copy', width:33, align: 'center'},
{name:'size', index:'size', width:55, align: 'center'},
{name:'created_date', index:'created_date', width:58, align: 'center'},
{name:'delete_date', index:'delete_date', width:62, align: 'center'},
{name:'view_count', index:'view_count', width:43, align: 'center'},
{name:'download_count', index:'download_count', width:59, align: 'center'},
{name:'description', index:'description', width:1, align: 'center', hidden: true, editrules: {edithidden: true}, editable: true, edittype: 'textarea', editoptions: {maxlength: 255} },
{name:'tags', index:'tags', width:1, align: 'center', hidden: true, editrules: {edithidden: true}, editable: true, edittype: 'text', editoptions: {maxlength: 255} },
{name:'folder_id', index:'folder_id', width:1, align: 'center', hidden: true, editrules: {edithidden: true}, editable: true, edittype: 'select', editoptions: {value: "'0':\u0412\u0445\u043e\u0434\u044f\u0449\u0438\u0435;24410:bas rutten;25997:6091 \u041f\u0435\u0440\u0435\u0434 \u0440\u0430\u0441\u0441\u0432\u0435\u0442\u043e\u043c;25998:6090 \u0425\u0430\u0442\u0438\u043a\u043e \u0441\u0430\u043c\u044b\u0439 \u0432\u0435\u043d\u044b\u0439 \u0434\u0440\u0443\u0433;26362:Hendrix;26861:6094 \u041d\u0438\u043d\u0434\u0437\u044f;26982:6095 \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0430 \u0441\u043b\u0430\u0432\u044f\u043d;27068:6093 \u041f\u0435\u0440\u0435\u0434 \u0437\u0430\u043a\u0430\u0442\u043e\u043c;27078:6096 Ghost in the shell;27079:6092 \u041c\u0438\u0441\u0441 \u041e\u0441\u0442\u0438\u043d \u0441\u043e\u0436\u0430\u043b\u0435\u0435\u0442;27262:6097 Funny People;27679:6098 \u041d\u043e\u0441\u0438\u0442\u0435\u043b\u0438;27828:6100 \u0418\u0432\u0430\u043d \u0421\u043e\u043b\u043e\u0432\u043e\u0432;28211:6101;28212:6102;28230:6104 HouseSitter;28309:6106 Fall of the Republic The Presidency of Barack H Obama;28315:6105 Law Abiding Citizen;28316:6099 Old School;28374:6107 Autumn;28595:6109 Ink;28672:6110 Battle for Terra;28708:6111 Planet 51;28761:6112 Ya;29094:6113 Ministers;29095:6114 Stunt man;29545:6115 Logan`s Run;29587:6116 Extract;29649:Soft;29674:ElvinBurunduki;29790:6117 Razjalovanniy;29791:6118 TheBox;29887:6119 Ukroschenie Stroptivi"} },
{name:'delete_id', index:'delete_id', width:1, hidden: true}
],

Отправлено: 14:36, 02-01-2010 | #9

pva pva вне форума

Аватара для pva

Ветеран


Сообщения: 1180
Благодарности: 279

Профиль | Отправить PM | Цитировать


это объявление ассоциативного массива в JS http://javascript.ru/forum/dom-windo...jj-massiv.html
По сути все пользовательские объекты в JS являются ассоциативными массивами

Отправлено: 17:51, 03-01-2010 | #10



Компьютерный форум OSzone.net » Программирование, базы данных и автоматизация действий » Программирование и базы данных » Разное - На чем написан этот интерфейс? Скажите, что вбивать в гугл, чтобы почитать подробнее)

Участник сейчас на форуме Участник сейчас на форуме Участник вне форума Участник вне форума Автор темы Автор темы Шапка темы Сообщение прикреплено

Похожие темы
Название темы Автор Информация о форуме Ответов Последнее сообщение
FAQ | Что бы такого почитать по программированию в *nix? hasherfrog Программирование в *nix 31 15-01-2017 21:54
Ссылки. Статьи. Что почитать на досуге. Belansky Новости и флейм из мира *nix 407 13-02-2014 17:18
Скажите под какую память этот разъем? vasya0348 Материнские платы и память 7 20-08-2009 02:51
Посоветуйте что можно почитать об STL. bilytur Программирование и базы данных 7 06-12-2003 03:13
Что можно почитать чайнику... YackoN Сетевые технологии 4 31-03-2003 11:03




 
Переход