官术网_书友最值得收藏!

首頁 >

Oracle APEX Cookbook（Second Edition）

Enhancing your application with the Google API>

In the previous recipe you could see how a JavaScript library such as jQuery can be used within APEX. Other JavaScript libraries can also be used, but they need first to be downloaded and installed. To make life easier for people who intend to use the various JavaScript libraries, Google introduced the Google API. Google puts the most well known JavaScript libraries online so you can reference them now without installing them into your own APEX environment! By the way, you can also use the JavaScript libraries in other languages such as PHP or just plain HTML with JavaScript.

To demonstrate this, we will make use of the scriptaculous library. Suppose you have the following intranet home page:

We will let the Latest news section pulsate on loading the homepage.

How to do it...

  1. In the Application Builder, edit page 1.
  2. In the Page section, click on the Edit icon.
  3. In the HTML Header section, enter the following code in the HTML Header textarea: 
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("prototype", "1");
google.load("scriptaculous", "1");
function pulsate_news() {
   Effect.Pulsate('news', {'pulses' : 15, 'duration' : 3.0});
   }
google.setOnLoadCallback(pulsate_news);?
</script>
[9672_03_11.txt]

    First, you need to load the libraries. This can be done with the google.load() function. The first argument is the library and the second argument is the version. In this case, we will use Version 1 of the scriptaculous JavaScript library. By the way, scriptaculous makes use of the Prototype library, so this library has to be loaded first. The function pulsate_news() calls the pulsate effect, and the function pulsate_news is called by the google.setOnLoadCallback() function. The first argument of the pulsate_news() function is the ID of the affected div. The second argument is a list of options you can set. In this case, the news region pulsates 15 times in 3 seconds.

  4. Click on the Apply Changes button.

Now we must set the ID of the affected div to news.

  1. Click on the edit region link of the latest news region.
  2. In the Attributes section, enter news in the Static ID text field.
  3. Click on the Apply Changes button.
  4. Run the page and see the Latest news region pulsate.

How it works...

Load the necessary libraries with the google.load function. After that, create a function that calls the effect. To start the effect, use google.setOnLoadCallBack. The last step is to give the affected object (a div or an item or other DOM object) an ID that will be used in the call to the JavaScript effect.

There's more...

For APEX 4.2, replace the code in step 3 by the following:

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>

Add the following to the Execute when Page Loads textarea in the JavaScript section:

Effect.Pulsate('news', {'pulses' : 15, 'duration' : 3.0});
主站蜘蛛池模板： 启东市| 乐陵市| 广南县| 揭阳市| 历史| 琼中| 麦盖提县| 大名县| 东阳市| 长治市| 旬邑县| 光泽县| 景东| 连州市| 昌图县| 灵川县| 澜沧| 长岭县| 兴安县| 洪雅县| 太湖县| 勃利县| 洞口县| 新宁县| 天峨县| 体育| 巴彦县| 炉霍县| 林口县| 和平县| 锦屏县| 涪陵区| 榕江县| 永吉县| 灵石县| 三台县| 平远县| 黑山县| 东乌珠穆沁旗| 林甸县| 正宁县|