Gmail Contextual Gadget, Cannot Get jQueryUI Buttons To Show
-
19-06-2021 - |
题
Have got a problem getting jQueryUI working / initialising a basic button inside of the CDATA part of a Gmail Contetual Gadget Spec file.
Here is the the first part of the CDATA section of the spec file.
The problem is that while the alert() runs, the .button() call doesn't do anything to the html button.
I've also tried .button("refresh") to no avail.
<Content type="html" view="card">
<![CDATA[
<style type="text/css" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css"></style>
<!-- Start with Single Sign-On -->
<script type="text/javascript" src="http://example.com/gadgets/sso.js"></script>
<!-- jQuery -->
<!-- Check for latest .. https://developers.google.com/speed/libraries/devguide -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<p>Version 11</p>
<button type="submit" id="test-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">Button</span></button>
<script type="text/javascript">$(function() { $("#test-button").button(); alert("why?"); } );</script>
Have I missed something?
解决方案 2
Okay, so .. shameface. The problem was that the jqueryUI style wasn't being imported correctly.
Instead of "" I needed to use "
<link rel="stylesheet" type="text/css" media="screen, projection" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css"/>
其他提示
You need a #
in front of test-button
selector on your last line because test-button
is the id
of the button
.
You also have a lot more markup than necessary for creating the button. Try changing this line:
<button type="submit" id="test-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">Button</span></button>
to...
<button id="test-button">Button</button>
The button
plugin will take care of adding all the classes and such it needs from there.