Компьютерный форум OSzone.net  

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)
-   Программирование и базы данных (http://forum.oszone.net/forumdisplay.php?f=21)
-   -   На чем написан этот интерфейс? Скажите, что вбивать в гугл, чтобы почитать подробнее) (http://forum.oszone.net/showthread.php?t=161695)

evg64 28-12-2009 04:12 1305871

На чем написан этот интерфейс? Скажите, что вбивать в гугл, чтобы почитать подробнее)
 
Вложений: 1
Добрый день! В приложении скрин с этим интерфейсом. Это один из популярных файлообменников. На всякий случай прилагаю хтмл-код той страницы:

читать дальше »
<!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&amp;title=TITLE&amp;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&amp;dig_title=TITLE'
},
'Memori.ru': {
'favicon': 'memori.png',
'url': 'http://memori.ru/link/?u_data[url]=PERMALINK&amp;u_data[name]=TITLE&amp;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">
Файлообменник &copy; 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>

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

pva 28-12-2009 09:03 1305925

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

DedAlex 28-12-2009 10:18 1305975

evg64, ищите jquery.

pva 28-12-2009 14:45 1306190

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

Sham 28-12-2009 16:58 1306277

Цитата:

Цитата pva
В гугль вбивать MSDN Library »

желательно туда смотреть только касательно браузера IE, для остальных браузеров - ECMA.
начать можно здесь http://ru.wikipedia.org/wiki/JavaScript (там и ссылки все).
Цитата:

Цитата pva
измерить высоту отформатированного текста? чтобы разделить его на колонки заданной высоты (допустим 500px), посчтчтать сколько необходимо столбцов и разбить на столбцы? »

имхо мутное и кропотливое дело. нужно учитывать margin/padding всего и вся (некроссбраузерная история), кернинг, размер шрифта, конкретный шрифт (системное дело - мб разные), перенос слов (тут вообще произвольно, либо жестко сделать перенос по буквам). Т.е. математику - сразу в топку, остается эмпирический путь...

pva 28-12-2009 17:31 1306301

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

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

Sham 28-12-2009 19:08 1306361

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

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

evg64 30-12-2009 15:40 1307657

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

evg64 02-01-2010 14:36 1309134

Формы точно сделаны через 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}
],

pva 03-01-2010 17:51 1309843

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

EvgeniuXP 04-01-2010 14:56 1310535

на WPF-е это точно можно сделать через байдинги, но на скриншоте, скорее не WPF.


Время: 11:31.

Время: 11:31.
© OSzone.net 2001-