2009-03-29 22 views
14

Đây là mã đơn giản của tôi để thử và kiểm tra nếu jQuery có thể thay đổi kích thước đang hoạt động. Tôi sử dụng các thành phần jQuery khác tốt bằng cách sử dụng google.load, và tôi đã thử trao đổi google.load cho một phiên bản địa phương không có sự khác biệt. Tôi đã thử nghiệm trong 3 trình duyệt, tôi đã sao chép mã từ một số trang demo/hướng dẫn (nơi nó hoạt động tìm thấy trên trang web của họ).Không thể làm cho jQuery có thể thay đổi kích thước để hoạt động: Tôi đang làm gì sai?

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="http://www.google.com/jsapi?key=blahblah_obviously changed_blahblah-blahblah_blah_blahblahblah"></script> 
<script type="text/javascript">google.load("jquery", "1.3.2");google.load("jqueryui", "1.7.1");</script> 
<style type="text/css"> 
    #resizable { width: 100px; height: 100px; background: silver; } 
</style> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#resizable").resizable(); 
}); 
</script> 
</head> 
<body> 
<div id="resizable"></div> 
</body> 
</html> 

Tôi không nhận được bất kỳ thông báo lỗi nào. Tôi đã tới giới hạn của mình rồi. Tôi đang làm gì sai? Tại sao ngay cả trường hợp đơn giản này cũng không hoạt động?

CẬP NHẬT: các thư viện giao diện người dùng jQuery được bao gồm bởi dòng google.load ("jqueryui", "1.7.1");

+0

Tôi ghét jQuery và các ví dụ sơ sài của họ! Nó giống như ở đây ya đi, bạn may mắn nếu bạn có thể hình này ra: P –

Trả lời

45

jQuery UI đang làm việc tốt trong mẫu của bạn, vấn đề bạn có là bởi vì bạn không có bất kỳ CSS Theme có trong last test của bạn, và "thay đổi kích thước xử lý "biểu tượng không được hiển thị.

Thêm bạn own theme hoặc mặc định một:

<link rel="stylesheet" type="text/css" 
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/> 

Xem mẫu của bạn here.

+0

Việc thêm liên kết biểu định kiểu này đã giải quyết được. Cảm ơn! – MECU

+0

tuyệt vời! cảm ơn bạn! – rilar

1

Các bạn đã thử:

<script type="text/javascript"> 
google.setOnLoadCallback(function() { 
    $(function() { 
    $("#resizable").resizable(); 
    }); 
}); 
</script> 

Nó đáng chú ý là google.load() là một cuộc gọi async và bạn sẽ không thể gọi các hàm jQuery cho đến khi họ đang nạp do đó gọi lại.

Ok, đã có một cái nhìn vào ví dụ của bạn và bạn đã có một vài vấn đề:

  1. Đây là lớn nhất: bạn không có kiểu jQuery UI;
  2. Bạn đang tăng gấp đôi bao gồm jQuery, jQuery UI và SWFObject từ cả Google và cục bộ;
  3. Div cuối cùng bên trong div có thể thay đổi kích thước của bạn đang chặn thay đổi kích thước. Không chắc chắn lý do tại sao nhưng tôi nhận xét nó ra và nó hoạt động tốt; và
  4. Bạn không cần khóa API cho API Thư viện AJAX của Google. Điều này không gây ra vấn đề gì. Nó chỉ là FYI.

phiên bản làm việc của bạn:

<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/blitzer/jquery-ui.css"> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.load("jquery", "1.3.2"); 
google.load("jqueryui", "1.7.1"); 
google.load("swfobject", "2.1"); 
google.setOnLoadCallback(function() { 
    $(function() { 
    $("#resizable").resizable(); 
    }); 
}); 
</script> 
<style type="text/css"> 
    #resizable { width: 100px; height: 100px; background: silver; } 
</style> 
</head> 
<body> 
<div id="resizable"> 
    <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-e"></div> 
    <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-s"></div> 
    <!--<div unselectable="on" style="z-index: 1001; -moz-user-select: none;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>--> 
</div> 
</body> 
</html> 
+0

Điều đó đã không làm việc. Để chứng minh tôi đã thử và điều này không hiệu quả đối với tôi, hãy goto: http://www.bcsfanpoll.com/test/test.php – MECU

+0

Thêm liên kết biểu định kiểu đã giải quyết nó. Tôi không thấy làm thế nào tôi bao gồm các thư viện hai lần? Đó là div cuối cùng đang được thêm vào bởi jQuery (hoặc Firefox), nó không phải là một phần của mã cơ sở của tôi. '

' là một phần của mã của tôi, không có gì bên trong. Cảm ơn bạn vì mẹo không có API. – MECU

11

Tất cả CSS bạn cần phải nhận làm việc jquery ui .resizable(): (đừng quên để lưu hình ảnh vào địa phương)

<style type="text/css"> 
.ui-icon { width: 16px; height: 16px; background-image: url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/images/ui-icons_222222_256x240.png)/*{iconsContent}*/; } 
.ui-resizable { position: relative;} 
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;} 
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } 
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; } 
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; } 
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; } 
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; } 
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } 
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } 
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } 
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;} 
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } 
</style> 
Các vấn đề liên quan