首先,我是新来的,而且我(不是)专业人士;)(但我想......哈哈)。好吧,我开始一个小的PHP应用程序来管理我的图标(巨大的)集合...但我意识到我用javascript(没有jQuery)写了一切,如果我使用jQuery我的生活会更容易一点......所以现在我试图了解如何做到这一点我需要你的提示和耐心来帮助我...(如果有一天你在蒙特利尔旅行,我会给你一杯咖啡:))
所以我将解释我的模板结构......(参见截图---编辑:新用户,不允许发布图片)
((图像说明))
左:Div ID = nav其所有文件夹和子文件夹
一个按钮创建库,调用mkdir()JS函数
| -IconShock(X)< - 删除文件夹
| --- Vista集合(X)
| - 新文件夹1(X)
右侧:Div ID =容器...
包含windows explorer中的图标,显示图标图像,onclick on icon = show_info(url,height,width,size等),更新底部div id = show_info,显示图标上的一些信息。
看看JS,你需要jquery XD(我已经开始基本的js到jquery)
CODE
//When adding a folder (Create Library), deleting folder, etc...
function refresh_nav() {
$.ajax({
type: 'GET',
url: './nav.php',
timeout: 10000,
success: function(data) {
$("#nav").html(data);
folder_selected(folder);
}
});
}
//When deleting file, changing folder or view
//filter_display = thumb or details
function refresh_container(fd, filter_display) {
folder = fd;
filter_display = filter_display;
$.ajax({
type: 'GET',
url: './container.php?path='+fd+'&filter_display='+filter_display,
success: function(data) {
$("#container").html(data);
}
});
}
//When clicking "Create library" form NAV
function mkdir() {
var dir = prompt("New folder's name", 'New folder');
$.ajax({
type: 'GET',
url: './action.php?action=mkdir&file='+dir,
timeout: 10000,
success: function(data) {
refresh_nav();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//?
}
});
}
//delete a directory from NAV
function deldir(dir) {
var answer = confirm('You\'re about to delete '+dir+' and all files inside.');
if (answer){
$.ajax({
type: 'GET',
url: 'action.php?action=delete_dir&file='+dir,
success: function() {
refresh_nav();
}
});
}
}
//When click Edit menu, Convert
//show_icons is a form that have all div inside containing icon images, and a invisible checkbox
//if an icon (we
function convert(file) {
if(file) {
var c_value= "";
var f_value= "";
var count = "";
// For each checkbox
for (var i=0; i < document.show_icons.file_check.length; i++)
{
//If its selected
if (show_icons.elements[i].checked)
{
//Put path in variable and add a spliter
c_value = c_value + document.show_icons.file_check[i].value + "|";
//Increase counter
count++;
}
}
for (var i=0; i < document.show_folders.folder_check.length; i++)
{
//If its selected
if (show_folders.elements[i].checked)
{
//Put path in variable and add a spliter
f_value = f_value + document.show_folders.folder_check[i].value + "|";
//Increase counter
count++;
}
}
//If no files checked
if(c_value.length == 0) {
//If no folder is checked
if(f_value.length == 0) {
//Single file convertion
newmodal('execConvert/?act=convert&file='+file, 'Convert', 500, 400);
}
} else {
//Else multiple file selected
var file = c_value;
newmodal('execConvert/?act=convert&multi_file=1&file='+c_value, 'Convert', 500, 400);
}
} else {
alert('No selected item');
}
}
<body onLoad="refresh_nav(); refresh_container('', '<?=$default_container_display?>'); get_info_erease();">
我不知道我是否可以理解(?)但如果没有生病则更准确。 我只想知道是否有任何方法可以在jQuery中获得上面的每个JS。因为它是一个混乱试图想象我现在正在做的一切没有jquery。或者更简单的代码......现在,我在nav.php文件中有一小段代码,在container.php中显示另一个代码(显示图标)一个func_php文件,一个core.js文件..它真的很难理解和代码我这些情况..大声笑
如果有人在这里有使用jQuery创建php应用程序的教程,因为我真的需要知道jquery ..
感谢您阅读我们! (:)和女孩)
请告诉我这不是一个太大的混乱XD
祝你有愉快的夜晚!
答案 0 :(得分:1)
首先,我要做一个有点蹩脚的讲道,告诉你我希望你不打算公开这个界面,因为你的计算机正处于身边的严重危险之中。
话虽如此,我知道你对此有很多乐趣并且是一个狂热的实验者,所以让我们看看我是否明白这一点......
另一个PHP“容器”,用作界面的模板(并保存javascript,tsk tsk tsk:P)
到目前为止,这么好。我们可以忽略这样一个事实:你没有把你的javascript放在单独的文件中,直到你这样做,我们也会忽略你有那个令人讨厌的onload语句,你必须找到一种方法来清理(提示:{{1} })。从这里开始,我不太明白你的问题是什么,你正走在正确的道路上......你有一个足够好的符合web 2.0标准的MVC结构!
jQuery是,恕我直言,作为其他的libs,首先是javascript的包装器:
根据您当前项目的预期用途和限制,您可能不需要它。尽管如此,特别是对于这个项目,请查看.get()或认真,直接跳到学习完整的$.ajax()。然后对于DOM操作,jQuery('#selector')和$('#myDiv').find('.item')可能是你将要使用的主要内容(jQuery有一个来自selector syntax库的特殊sizzle)然后......你会开始爱,它永远不想离开它但是......
请注意,即使你现在可能没有意识到,你仍然有很长的路要走纯粹的javascript。依赖于jQuery最终可能会让你变成一个依赖于jQuery的插件恶魔,这只会让人感到难过。听说document.querySelectorAll()? HTML5 File API?
别误会我的意思,我也在蒙特利尔,每天都使用jQuery!
答案 1 :(得分:0)
jQuery的优势在于DOM元素选择和操作,而不必担心浏览器不兼容。但它没有为管理Javascript结构提供大量帮助;你仍然需要照顾自己。 Fortuantely,Javascript中的对象和函数都是非常强大的。
在实际层面上,看一下jQuery Ajax页面。您可以通过更简单的电话轻松完成拨打电话(例如$.get()
)。