(請教)關於這個 jQuery效果

請問各位前輩,關於下面這網頁的 jQuery效果

http://demo.citiar.com/ucmic/website/jquery_include/inlink/index.html

如果左邊選單與右邊內容各為iframe應該要如何修改?
(左邊iframe的li選單,呼叫右邊iframe的div)

抱歉,因為小弟是初學者上網爬文一下,

知到需要用到var Parent = window.parent; 語法,

原本的js為


$(document).ready(function(){
$.get("a.html",function(data){ //初始將a.html include div#iframe
$("#iframe").html(data);
});
$(function(){
$('.list-side li').click(function() {
// 找出 li 中的超連結 href(#id)
var $this = $(this),
_clickTab = $this.find('a').attr('href'); // 找到連結a中的targer標籤值
$.get(_clickTab,function(data){
$("#iframe").html(data);
});
return false
})
})

});



請問前輩們可否指導一下小弟,感謝 :)
2013-04-08 17:15 發佈
文章關鍵字 jQuery 效果

minimal wrote:
請問各位前輩,關於下...(恕刪)



兩邊根本就不是iframe阿。只有右邊的div 他的id 叫做iframe


重點就是以下的語法而已:

$.get("xxxx.html",function(data){
$("#iframe").html(data);
});


利用jQuery get
jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
取得指定連結的網頁內容,放到data物件中,再把右邊id叫做iframe的html內容指定為data的內容。

jackiechin wrote:
兩邊根本就不是ifr...(恕刪)


謝謝您的說明,

小弟的意思就是想改成左邊iframe的li選單,呼叫右邊iframe的div,

抱歉沒說清楚,小弟畫個粗糙的圖示




再請前輩們指點,謝謝。
minimal wrote:
謝謝您的說明,小弟的...(恕刪)


為了達成Write Less, DO More 的理想

可以考慮使用以下的jQuery Plug-in

v1.21 jquery.frameready.js
v1.20 jquery.frameready.js


原來作者的網站已經失聯了,找到的這一個是別人引用的js
沒有特別詳細的說明,但節錄自討論群組的一段說明文字


Remote (default true) runs the function in the context of the target frame so you can do $("p") instead of $("p",top.iFrame.mainFrame.document).


使用前,比較特別的是你必須要先修改下js檔案的第97 or 115 行
建議可以直接改成jquery、google or microsoft等cdn的位置
ex: http://code.jquery.com/jquery-latest.min.js

var jQueryPath = "/main/inc/lib/javascript/jquery.js";


這個plugin最早的版本據說與IE的相容性不好(IE限制了FRAME間的元素搬動)
參考自這裡,我測試了一下最新的1.2.X應該是都改好了,可以很方便的從父視窗操弄iframe內的元素、css,要是iframe中的頁面原來沒有載入jQuery,plugin也會幫忙載入,甚至也可以載入其他的plugin

$.frameReady(function(){
$(" I am a div element ").prependTo("body");
}, "top.mainFrame",
{ load: [
{type:"script",id:"_fr",src:"/js/jquery.xxplugin.js",
test: "$.frameReady"},
{type:"stylesheet",id:"_ss",src:"frameReady.css"}
]}
);



祝好運!!

jackiechin wrote:
為了達成Write ...(恕刪)



非常感謝您耐心指導與詳細的教學,感激不盡!
內文搜尋
X
評分
評分
複製連結
Mobile01提醒您
您目前瀏覽的是行動版網頁
是否切換到電腦版網頁呢?