最近把之前比賽的程式拿出來用,結果發現竟然不能正常work了!
後來發現是因為YUI所始使用的Library會跟Yahoo Map所使用的Library衝突導致
Joseph 教我使用 Anonymous function + YUI Get 的方式載入
function() {
YAHOO.util.Get.Script('<YUI script url>');
}();
function() {
YAHOO.util.Get.Script('<Map script url>');
}();
不過後來在網路上找到另外一篇文章,就是獨立載入Yahoo! MAP AJAX API的JS
這樣也不會發生重複載入的問題囉! 參考網站Using YUI with the Yahoo! Maps AJAX API
1. 不要使用原本Maps AJAX API’s 所引用的檔案 (如：http://tw.api.maps.yahoo.com/ajaxymap?v=3.8&appid=YourAppId). 底下將會使用YUI的Library.
2. 接著把Maps AJAX API所會使用到YUI的檔案引用進來：
* Yahoo Global Object
* Dom Collection
* Event Utility
* Drag & Drop Utility
* Animation Utility
3. 接著把Yahoo! Maps AJAX的基本js引用進來即可!
http://l.yimg.com/f/i/tw/map/api/ymapapi_3_8_0_6_twopen.js?081231
程式碼：
<!–load YUI from your own install folder if possible; otherwise:–>
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"> </script>
<!–set your application ID variable:–>
<script type="text/javascript">
var YMAPPID = "YourAppId";
</script>
<!–Include core Maps AJAX API script:–>
<script type="text/javascript"
src="http://l.yimg.com/f/i/tw/map/api/ymapapi_3_8_0_6_twopen.js?081231">
</script>
這樣就可以正常使用囉 
Squall AJAX, YUI AJAX, Yahoo Maps, YUI
YUI 3 上手更容易,光是動態載入library就方便很多了
只要載入基本的js就可以囉! 真的是一大福音啊~
加上可以直接對網頁上的物件直接進行操作,直接使用Javascript操作物件的方式
YUI 2.x:YAHOO.util.DOM. addClass(div, ‘demoClass’);
YUI 3.x:div.addClass(‘demoClass’);
這邊提供一個簡單的範例參考
Include:
<link type="text/css" rel="stylesheet" href="/yui/build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="/yui/build/yui/yui-min.js"></script>
HTML:
<div id="demo">測試測試</div>
JS:
YUI().use("node",
function(Y) {
var node = Y.get('#demo'); //div id的名稱
node.setStyle('backgroundColor', '#fcfcfc'); //設定背景色
node.setStyle('width', '300');
node.setStyle('opacity', '0.5');
node.set('innerHTML', 'demo test!!');
}
要加入事件(Event)的話也是非常的方便唷!
//use event
node.on('click', function(e){
e.preventDefault();
alert('event: ' + e.type + ' target: ' + e.target.get('tagName'));
});
參考網址:YUI 3 Node
Squall Javascript, YUI node, YUI3
原文參考自：Example YUI Image upload with YUI 2.6.0
今天簡單用了一下YUI的Uploader跟Rich Text Editor發現真的很方便!
不過後來發現Rich Text Editor的照片只能貼網路上的圖片連結
所以想要做個合併囉! 上網一查發現已經有人做好啦~XD
其實用法很簡單,先來一個快速上手的教學吧!
Include file:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/skin.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/logger/logger-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.6.0/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.6.0/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.6.0/build/button/button-min.js"></script>
<script src="http://yui.yahooapis.com/2.6.0/build/editor/editor-min.js"></script>
<script src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="yui-image-uploader26.js"></script>
這邊比較特別的就是yui-image-uploader26.js,這個檔案是由allmybrain.com所撰寫的,網站中還有舊版本的可以使用:)
HTML:
<form method="POST" action="#">
<textarea name="editor" id="editor"></textarea>
</form>
Javascript:
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var myConfig = { //設定Rich Text Editor
height: '300px',
width: '800px',
dompath: true,
focusAtStart: true
};
myEditor = new YAHOO.widget.Editor('editor', myConfig);
yuiImgUploader(myEditor, 'editor', 'forumUpload.php','image');
myEditor.render();
})();
這樣就完成囉!
Squall Javascript, YUI
Recent Comments