How to show the Google Picker API dialog after user presses a button or an image?

问题

is any HTML expert out there who can help me?

I want to show the Google Picker API Dialog after the user clicks on a button or an image and I want to show the result on the page afterwards. It should be simple for developers who know how to do web programming.

Sample code of how to use is in the link above. Big thanks.

回答1:

I now solved it myself. The main loader of Google Javascript APIs is the Google Loader.

Look here at the documentation: http://code.google.com/intl/en/apis/loader/

Insert this code inside <head> ... </head> of the HTML (a Google Docs Picker). The main function for loading after a click picker is newPicker() . It loads it the picker and sets the first callback for handling the picker.

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">   

    // Google Picker API for the Google Docs import
    function newPicker() {
        google.load('picker', '1', {"callback" : createPicker});
    }       

    // Create and render a Picker object for selecting documents
    function createPicker() {
        var picker = new google.picker.PickerBuilder().
            addView(google.picker.ViewId.DOCUMENTS).
            setCallback(pickerCallback).
            build();
        picker.setVisible(true);
    }

    // A simple callback implementation which sets some ids to the picker values.
    function pickerCallback(data) {
        if(data.action == google.picker.Action.PICKED){
            document.getElementById('gdocs_resource_id').value = google.picker.ResourceId.generate(data.docs[0]);
            document.getElementById('gdocs_access_token').value = data.docs[0].accessToken;                  
        }
    }    
 </script>

Link in HTML:

<a href="javascript:newPicker()" style="font-weight: bold">Import from your Google Docs</a>

When the user clicks on the HTML link the picker will be shown.

来源：https://stackoverflow.com/questions/7094430/how-to-show-the-google-picker-api-dialog-after-user-presses-a-button-or-an-image

标签

javascript

html

google-docs

google-picker