1. 程式人生 > >js中引用script.aculo.us

js中引用script.aculo.us

首頁引用src下的和lib下的檔案:<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>

其中第二個檔案會自動引用其他幾個幾個js檔案。

下面是一個例子,將集中特效繫結在特定的按鈕點選事件上。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test aculo</title>
<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<h1>Test script.aculo.us</h1>
<form name="form1">
<input type="button" value="Fade Out"  onClick="new Effect.Fade($('test'))"/>
<input type="button" value="Fade In" onclick="new Effect.Appear($('test'))"/>
<input type="button" value="Slide Up" onclick="new Effect.SlideUp($('test'))"/>
<input type="button" value="Slide Down" onclick="new Effect.SlideDown($('test'))"/>
<input type="button" value="High Light" onclick="new Effect.Highlight($('test'))"/>
<input type="button" value="Shake" onclick="new Effect.Shake($('test'))"/>
</form>
<div id="test" style="background-color:#ccc;margin:20px;padding:10px">
<h2>Testing Effects</h2>
<hr />
<p>
This section of the documentis within a <div>element whih the <b>id</b> value
<b>test</b>.The event handlers on the buttons above send this object to the script.aculo.us library
to perform effects.Click the buttons to see the effect.
</p>
</div>
</body>
</html>

載入後的頁面效果圖

點選按鈕會看到對應的效果。

相關推薦

js引用script.aculo.us

首頁引用src下的和lib下的檔案:<script src="javascripts/prototype.js" type="text/javascript"></script><script src="javascripts/scripta

js 引用類型 的深拷貝 和 淺拷貝的區別

而是 query reac cat 避免 string val this 臨時 一、曾經在讀JQ源碼的時候,對深拷貝算是有了一點的理解。我們在項目中是不是經常會遇到這樣的問題呢? 後臺返回一個數組對象(引用類型).次數在頁面渲染中需要對部分數據進行處理 比如:銀行卡6234

ReactNative如何在JS引用原生自定義控件(rn變化太快,網上很多教程有坑,這個我研究後可用,特意分享)

not net boolean button nag instr 自定義控件 col 朋友 直接寫一個Demo例子,有相關功底的肯定明白,會對特別的地方進行提醒,本文基於https://blog.csdn.net/lintcgirl/article/details/5348

js引用css選擇器

總結下剛才學習的  之前忘記了在js中可以使用css選擇器來定位,一直在用js的dom定位,感覺鈦麻煩,後來百度了下,記憶慢慢上來了,原來在js中是可以引用css選擇器來定位元素獲取對應的元素屬性值的 先列出用js的dom和引用css定位的對比 var xx=docume

jsScript的for event

<script language="javascript"> function xx(){alert("我是XX");} </script> <script language="javascript" for="div1" event="onclick" charse

js引用圖片的寫法

在JS檔案中書寫相對路徑:JS檔案是指在頁面中引用的外部JavaScript檔案,其中可能採用JavaScript程式碼生成html程式碼,由於生成的html程式碼是嵌入在引用該JS檔案的頁面中,因此,在描述相對路徑時,應該使用被引用的文件或素材相對於引用JS檔案的頁面之間的相對路徑。例如,文件“/home/

script.aculo.us概述

prototype只有底層沒有UI,不像dojo、ExtJs一樣自身就以建立UI為目標,再加上prototype對Element的加強還沒有到至善至美的地步,所以呢,用prototype建立widgets有時還是會有一些麻煩,例如我上次從ExtJs去請了個alignTo,那個

script標籤引用js檔案的變數或方法

例如專案中使用app.js檔案做如下定義: //定義變數 (function($){ window.dog = {}; })(mui); //定義方法 function run(){ console.log('呼叫js檔案中的run方法'); } 接著在html

JS值類型和引用類型

另一個 bsp 引用類型 nbsp 對象 logs 包括 方式 console 一.值類型 例子: 1 var a=10; 2 var b=a; 3 a=20; 4 console.log(b); //10 例子中,將a的值賦給了b,b=10,然後改變a的值不會

如何在vue2.0項目引用element-ui和echart.js

theme efault all -s post index 大牛 麻煩 原因 1 項目中怎樣添加elment-ui 和 echart.js   1.1直接在packjson 裏面的 dependencies 配置   "element-ui": "^1.3.3",  

Angular JS ng-controller 值復制和引用復制

span tro strong bar del ng- scope value 變化 我們知道在使用ng-app或者ng-controller指令的時候,都會創建一個新的作用域($rootScope或者是$scope),並且在使用ng-controller指令創建的作用域會

JS函數參數值傳遞和引用傳遞

保持 variant 全局變量 都是 tex over family nor -c 也許大家對於函數的參數都不會太在意,簡單來說,把函數外部的值復制給函數內部的參數,就和把值從一個變量復制到另一個變量一樣。深入研究,你會發現其實沒那麽簡單,這個傳參是要分倆種情況(其實這是個

js的基本類型和引用類型

string 擁有 mage image bubuko 可變 png 引用類型 基本類 基本類型:指的就是簡單的數據段 基本類型種類:number、string、null、undeinfed、boolean 基本類型的值是不可變的,存放在內存中的棧中 引用類型:其實引用類型

(vue.js)vue引用了別的元件 ,如何使this指向Vue物件

Vue中引用了別的元件 ,如何使this指向Vue物件   今天學習Vue元件傳值, 通過建立Vue例項, 廣播和監聽實現傳值, 但是傳值之後無法直接將得到的值應用到Vue物件, 因為這相當於引用改了別的元件, this指向發生改變,所以通過以下辦法解決。 var _this

JS的函式引數傳遞到底是按值傳遞還是按引用傳遞

首先我們知道JS中的資料型別大致可以分為簡單資料型別和複雜資料型別; 當我們宣告一個變數並給它賦值時,可以賦給其簡單值和複雜值(以下堆記憶體和棧記憶體的地址表示均隨意取的,只是為了區分,不代表真實的記憶體地址); 針對簡單資料型別: 例1 var simpleData1 = 18 v

js物件引用,淺拷貝,深拷貝--示例

1. 物件引用 var a = {name:'wanger'} var b = a ; a===b // true b.name = 'zhangsan' a.name //'zhangan' 2 .淺拷貝 var a = {name:'wanger'} var b = Object.a

js的棧與堆的講解/基本資料型別與引用型別的講解

1、棧(stack)和堆(heap)   stack為自動分配的記憶體空間,它由系統自動釋放;而heap則是動態分配的記憶體,大小不定也不會自動釋放。        2、基本型別和引用型別   基本型別:存放在棧記憶體中的簡單資料段,資料大小確定,記憶體空間大小可以分配。   5種基

js值型別和引用型別的區別(無舉例)

js中的變數型別有哪些? (1)值型別:字串string、數值number、布林值boolean、undefined (2)引用型別:物件object、陣列array、函式function 值型別和引用型別的區別 (1)值型別: 1⃣️佔用空間固定,儲存在棧中(當一個方法

spring boot 2.x html引用css和js失效

在application.properties中配置了static的預設路徑 我的static目錄結構是這樣的 index.html中這樣引用css或者js檔案,用到了th標籤 html使用th標籤需要先匯入   以上這樣配置好了之後發現網頁的c

js基本數據類型和引用數據類型的區別

nbsp 數據類型 poi undefine 傳遞 null 棧空間 技術 type 1、基本數據類型和引用數據類型   ECMAScript包括兩個不同類型的值:基本數據類型和引用數據類型。   基本數據類型指的是簡單的數據段,引用數據類型指的是有多個值構成的對象。