jQuery UI Widget Factory Sample

タブを作った

HTML

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script async defer src="https://apis.google.com/js/api.js">
</script>

<input type="button" id="authorize-button" class="loginBtn loginBtn--google" value="Connexion google">

JavaScript

/* gapi.load('client:auth2', initClient);

    
function initClient() {
  $('#authorize-button').on('click', function(){handleAuthClick();});
  $('#signOut').on('click', function(){handleSignOutClick();});

  gapi.client.init({
    apiKey: 'AIzaSyB9vda3vYQ4iTv26x3_9yv07ZQNcYtkkW4',
    discoveryDocs: ['https://people.googleapis.com/$discovery/rest?version=v1'],
    clientId: '911815782198-rlfaoh8453q8ck3s8g374bdqb716scbk.apps.googleusercontent.com',
    scope: 'profile'
  }).then(function () {
    gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
    updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
  });
}

function updateSigninStatus(isSignedIn) {
  if (isSignedIn) {
    makeApiCall();
  }
}
function handleAuthClick(event) {
  gapi.auth2.getAuthInstance().signIn();
}

function handleSignOutClick(event) {
  gapi.auth2.getAuthInstance().signOut();
}

function makeApiCall() {
  gapi.client.people.people.get({
    'resourceName': 'people/me',
    'personFields': 'metadata,emailAddresses,genders,names'
  }).then(function (response) {
    gid = response.result.metadata.sources[0].id;
    gemail = response.result.emailAddresses[0].value;
    gsex = response.result.genders[0].value;
    gfirstname = response.result.names[0].givenName;
    glastname = response.result.names[0].familyName;
    that._sendInfoGoogle(gid, gemail, gsex, gfirstname, glastname);
  }, function (reason) {
    console.log('Error: '+ reason.error.message);
  });
} 
   */  
    


$.widget('ui.tab', {
    options: {
        
    },
    _create: function () {
       gapi.load('client:auth2', that._initClient);
    },
		_buttonSignIn: function(){
      var that = this;
      $('#authorize-button').on('click', function(){that.handleAuthClick();});
    },
    
      _buttonSignOut: function(){
    var that = this;
    $('#signOut').on('click', function(){that.handleSignOutClick();});
      },

  _initClient: function (){
    var that = this;
    that.buttonSignIn();
  ...