[Apache Shindig][お勉強][OpenSocial] メモ111 dynamic-heightフィーチャー

dynamic-heightフィーチャーを使うことで、ガジェットの高さを動的に変更できる。

使えるメソッドは、

view plainprint?

1. gadgets.window.adjustHeight(opt_height)  

gadgets.window.adjustHeight(opt_height)

と

view plainprint?

1. gadgets.window.getViewportDimensions()  

gadgets.window.getViewportDimensions()

の2つ。

gadgets.window.adjustHeight(opt_height)は、

_IG_AdjustIFrameHeight

という名前でもコールできる。

ということで早速。

view plainprint?

1. <?xml version="1.0" encoding="UTF-8" ?>  
2. <Module>  
3.   <ModulePrefs title="Dynamic Height"  
4.     height="100">  
5.     <Require feature="dynamic-height"/>  
6.   </ModulePrefs>  
7.   <Content type="html">  
8.   <![CDATA[ 
9.     <script type="text/javascript"> 
10.     // This example lets users add items to a grocery list and then clear the list. 
11.     // When items are added or cleared, the gadget resizes itself. 
12.     var mylist = ""; 
13.     var flag = 0; 
14.  
15.     // Function that is invoked whenever user clicks the Add button to add an 
16.     // item to the list. 
17.     function addToList (form) { 
18.         var input = _trim(form.inputbox.value); 
19.         if (input == "") { 
20.             return; 
21.         } 
22.  
23.         // Make alternating lines green/white, depending on value of flag variable. 
24.         var d = gadgets.window.getViewportDimensions(); 
25.         if(flag == 0){ 
26.             mylist += "<div style='padding-left: 5px;background-color: #E6FFE6; font-family:Arial, Helvetica;'>" +input + " width:" + d.width + " height:" + d.height + "</div>"; 
27.             flag = 1; 
28.         } 
29.         else { 
30.             mylist += "<div style='padding-left: 5px;font-family:Arial, Helvetica;'>" +input + " width:" + d.width + " height:" + d.height + "</div>"; 
31.             flag = 0; 
32.         } 
33.  
34.         // Call setContent to output HTML to div and resize gadget 
35.         setContent(mylist); 
36.     } 
37.  
38.     // Clear the list 
39.     function clearList(form) { 
40.         // Call setContent to remove all items from the list and resize the gadget 
41.         setContent(""); 
42.     } 
43.  
44.     // Outputs content to the div and resizes the gadget 
45.     function setContent(html) { 
46.         document.getElementById('content_div').innerHTML = html; 
47.  
48.        // Tells gadget to resize itself 
49.        gadgets.window.adjustHeight(); 
50.     } 
51.     gadgets.util.registerOnLoadHandler(_IG_AdjustIFrameHeight); 
52.     </script> 
53.   <FORM NAME="myform" ACTION="" METHOD="GET"> 
54.  
55.   <INPUT TYPE="text" NAME="inputbox" VALUE=""> 
56.   <INPUT TYPE="button" NAME="button" Value="Add" onClick="addToList(this.form)"> 
57.   <INPUT TYPE="button" NAME="button2" Value="Clear" onClick="clearList(this.form)"> 
58.   </FORM> 
59.   <div id="content_div"></div> 
60.   ]]>  
61.   </Content>  
62. </Module>  

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Dynamic Height"
    height="100">
    <Require feature="dynamic-height"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
    <script type="text/javascript">
    // This example lets users add items to a grocery list and then clear the list.
    // When items are added or cleared, the gadget resizes itself.
    var mylist = "";
    var flag = 0;

    // Function that is invoked whenever user clicks the Add button to add an
    // item to the list.
    function addToList (form) {
        var input = _trim(form.inputbox.value);
        if (input == "") {
            return;
        }

        // Make alternating lines green/white, depending on value of flag variable.
        var d = gadgets.window.getViewportDimensions();
        if(flag == 0){
            mylist += "<div style='padding-left: 5px;background-color: #E6FFE6; font-family:Arial, Helvetica;'>" +input + " width:" + d.width + " height:" + d.height + "</div>";
            flag = 1;
        }
        else {
            mylist += "<div style='padding-left: 5px;font-family:Arial, Helvetica;'>" +input + " width:" + d.width + " height:" + d.height + "</div>";
            flag = 0;
        }

        // Call setContent to output HTML to div and resize gadget
        setContent(mylist);
    }

    // Clear the list
    function clearList(form) {
        // Call setContent to remove all items from the list and resize the gadget
        setContent("");
    }

    // Outputs content to the div and resizes the gadget
    function setContent(html) {
        document.getElementById('content_div').innerHTML = html;

       // Tells gadget to resize itself
       gadgets.window.adjustHeight();
    }
    gadgets.util.registerOnLoadHandler(_IG_AdjustIFrameHeight);
    </script>
  <FORM NAME="myform" ACTION="" METHOD="GET"><BR>
  <INPUT TYPE="text" NAME="inputbox" VALUE="">
  <INPUT TYPE="button" NAME="button" Value="Add" onClick="addToList(this.form)">
  <INPUT TYPE="button" NAME="button2" Value="Clear" onClick="clearList(this.form)">
  </FORM>
  <div id="content_div"></div>
  ]]>
  </Content>
</Module>

サンプルはGoogleのgadgets APIリファレンスから。
少々修正。

実行すると、自動でガジェットの高さが低くなり、
何か入力していくと、自動でガジェットの高さが調整される。


そんだけ。
.