jquery google link
Has anyone got any idea how this google code works?
i got the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<tit开发者_StackOverflow中文版le>My Google AJAX Search API Application</title>
<script src="http://www.google.com/jsapi?key=blahblahblah" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
</head>
<body>
<div class="ui-state-highlight">
hello world
</div>
</body>
</html>
However the <div></div> should display the error box with hello world. but it doesn't show the red background therefor the ui is not working ...
What have i done wrong here?
You also need the stylesheet if you want styling, like this:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css">
This is the base (grey) theme, there are others (be sure too update the version number!)
Unless you need google.load for other things, you can include the scripts directly, it's worth looking at this question for the advantages/disadvantages to using google.load().
Loading them directly would look like this:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
hello world should be displayed, but because the class ui-state-hightlight is nowhere to be found, hello world just appears as plain text.
It works using <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css">
You may also roll your own style here
http://jqueryui.com/themeroller/
加载中,请稍侯......
精彩评论