別の関数？として同じタグでも別の動作をさせるいは・・・

Question

■サイトのデザイン(ファイル名：test901.js)
$(function() {

var ua = navigator.userAgent;

//幅・高さを取得
var w = window.innerWidth ? window.innerWidth: $(window).width();
var h = window.innerHeight ? window.innerHeight: $(window).height(); 

//上記で全体の幅を取得し、左の幅(20%)を計算
var wleft = 0;
wleft = w * 0.2;

//上記で全体の幅を取得し、右の幅(80%)を計算
var wright = 0;
wright = w * 0.8;

//マージン関連の初期化
var mtop = 0;
var mleft = 0;
var mbottom = 0;

var botan = 0;

var naiyou = wright - 17;
			
//タブメニューの下の幅
var migisita = 0;

//IEのブラウザの場合
if (ua.match(/msie [10.]/i))
{
	h = h - 22; 
}

//IEのブラウザの場合
if (ua.match(/Trident/) && ua.match(/rv:([\.\d]+)/))
{
	h = h - 22;
	migisita = h - 37;
}
	
if (ua.match(/(Firebird|Firefox)\/([\.\d]+)/))
{
	h = h - 19;
	migisita = h - 36;
}

//safariの場合
if (ua.match(/Safari/))
{
	h = h - 20;
}

//google cromの場合(パソコン版)
if (ua.match(/Chrome\/([\.\d]+)/)) 
{
	h = h - 1;
	migisita = h - 37;
	mtop = -10;
}


//google cromの場合(スマフォ版)


//上記のサイズでCSSをコントロール
$("body").css({
	"margin":"0px 0px 0px 0px",
	"overflow-x":"hidden",
	"overflow-y":"hidden"

});

//上記のサイズで基本デザインを操作
$("#left").css({
	"float":"left",
	"width":wleft+"px",
	"height":h+"px",
	"background-color":"#f0ffff"
});

//上記のサイズで基本デザインを操作
$("#right").css({
	"float":"left",
	"width":wright+"px",
	"height":h+"px",
	"background-color":"#F6F6F6"
});

$("#sample002").css({
	"clear":"left",
	"background-color":"#808080"
});

$("p").css({
	"float":"left",
	"margin":"0px",
	"display":"block",
	"width":"60px",
	"margin-top":"5px"
});

$("li").css({
	"float":"left",
	"display":"block"
});


$(".box1").css({
	"height":"26px"
});

$("ul").css({
	"margin":"0px"
});

$(".tab1on a:link, .tab2on a:link, .tab3on a:link, .tab4on a:link, .tab5on a:link").css({
	"color":"#ffffff",
	"text-decoration":"none",
	"display":"block",
	"margin-top":"5px"
});

$(".tab1on a:visited, .tab2on a:visited, .tab3on a:visited, .tab4on a:visited, .tab5on a:visited").css({
	"color":"#ffffff",
	"text-decoration":"none",
	"display":"block",
	"margin-top":"5px"

});

$(".tab1on a:hover, .tab2on a:hover, .tab3on a:hover, .tab4on a:hover, .tab5on a:hover").css({
	"color":"#ffffff",
	"text-decoration":"none",
	"display":"block",
	"margin-top":"5px"
});



$(".tab1off a:link, .tab2off a:link, .tab3off a:link, .tab4off a:link, .tab5off a:link").css({
	"color":"#000000",
	"text-decoration":"underline",
	"display":"block",
	"margin-top":"5px"
});

$(".tab1off a:visited, .tab2off a:visited, .tab3off a:visited, .tab4off a:visited, .tab5off a:visited").css({
	"color":"#000000",
	"text-decoration":"underline",
	"display":"block",
	"margin-top":"5px"
});

$(".tab1off a:hover, .tab2off a:hover, .tab3off a:hover, .tab4off a:hover, .tab5off a:hover").css({
	"color":"#ff3333",
	"text-decoration":"underline",
	"display":"block",
	"margin-top":"5px"

});

$(".tab1on").css({
	"background-color":"#ff3333",
	"margin-left":"-40px"
});

$(".tab1off").css({
	"background-color":"#ffcccc"
});

$(".tab2on").css({
	"background-color":"#3333ff"
});

$(".tab2off").css({
	"background-color":"#ccccff"
});

$(".tab3on").css({
	"background-color":"#33cc33"
});

$(".tab3off").css({
	"background-color":"#ccffcc"
});

$(".tab4on").css({
	"background-color":"#ff6600"
});

$(".tab4off").css({
	"background-color":"#ffff99"
});


$(".tab5on").css({
	"background-color":"#ff3676"
});

$(".tab5off").css({
	"background-color":"#ffaec8"
});


$(".tab1on, .tab1off, .tab2on, .tab2off, .tab3on, .tab3off, .tab4on, .tab4off, .tab5on, .tab5off").css({
	"display":"block",
	"width":"100px",
	"height":"26px",
	"float":"left",
	"margin-right":"5px",
	"text-align":"center"
});

$(".box21").css({
	"clear":"both",
	"height":migisita+"px",
	"border-top":"solid 10px #ff3300",
	"border-bottom":"solid 1px #ff3300",
	"border-left":"solid 1px #ff3300",
	"border-right":"solid 1px #ff3300"
});


$(".b21").css({
	"border":"#0033cc solid  1px",
	"width":wright+"px",
	"height":migisita+"px",
	"overflow-y":"auto"
});


$(".title").css({
	"width":naiyou+"px",
	"height":"28px",
	"background-color":"#003300",
	"color":"#FFFF00"

});	


$(".textnaiyou").css({
	"width":naiyou+"px",
	"background-color":"#CCCCCC"
});				
			

});
―――――――――――――――――――――――――――――――――――――――――――――――――――――
■ダイアログ／検索・新規作成(ファイル名：dialog.js)
(function($) {
$.fn.ipop = function() {

	var $this = $(this);

	var wx, wy;		// ウインドウの左上座標
	var mx, my;		// マウスの座標

	// ウインドウの座標を画面中央にする。
	wx = $(document).scrollLeft() + ($(window).width() - $(this).outerWidth()) / 2;
	if (wx < 0) wx = 0;
	wy = $(document).scrollTop() + ($(window).height() - $(this).outerHeight()) / 2;
	if (wy < 0) wy = 0;

	// ポップアップウインドウを表示する。
	$this.css('top', wy).css('left', wx).fadeIn(100);

	// 閉じるボタンを押したとき
	$this.find('.ipop_close').click(function(){ $this.fadeOut(100);});

	// タイトルバーをドラッグしたとき
	$this.find('.ipop_title').mousedown(function(e) {
		mx = e.pageX;
		my = e.pageY;
		$(document).mousemove(mouseMove).mouseup(mouseUp);
		return false;
	});
	function mouseMove(e) {
		wx += e.pageX - mx;
		wy += e.pageY - my;
		$this.css('top', wy).css('left', wx);
		mx = e.pageX;
		my = e.pageY;
		return false;
	}
	function mouseUp() {
		$(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp);
	}
}

})(jQuery);

$(function() {

/*検索ダイアログの表示イベントのフック*/ 
$('#open1').click(function() { 
	/*検索ダイアログ表示*/ 
	$("#mado1").ipop(); 
} ); 

/*画面遷移の直前にダイアログの状態をcookieに保存*/ 
$(window).on("beforeunload",function(){
	/*ダイアログは見えてる？*/ 
	if($('#mado1').css('display') == 'block')
	{ 
		/*表示中状態を保存*/ 

		//setCookie("SEARCH","SEARCH");
		$.cookie("SEARCH","SEARCH");
	} 
	else
	{ 
		/*消えているので削除*/ 
                	$.cookie("SEARCH", ""); 
	} 
});

$(function(){
			 
	/*cookieに保存した状態を確認*/ 
	if($.cookie("SEARCH"))
	{ 
		/*正常に取得できたならダイアログ表示*/ 
		$("#mado1").ipop(); 
	}
}); 
		
/*cookie の取得と中身の有無を確認*/ 
$(function getCookie(keyname) { 
    	return ($.cookie(keyname)!="undefined"); 
}); 

/*cookie の保存処理*/ 
$(function setCookie( keyname, val ) { 
            	 
	if ($('#kwd').text() != '') {
		/*cookieに保存*/ 
		$.cookie(keyname, val) 
		$('#open1').click();
	}
	else{ 
		/*cookieのクリア*/ 
		$.cookie(keyname, "", {expires: -1});
	} 
});

});

$(function() {

//新規作成
$('#open2').click(function() {
	$("#mado2").ipop();
} );
			
$("ul").on("click", "li",function() {
	$("li.selected").removeClass("selected");
	$(this).addClass("selected");
	myID = this.id.split("_")[1];
	$("#textArea>div").hide();
	$("#text_" + myID).show();
				
});

$("#tab_1").trigger("click");


$("ul").css({
	"margin-top":"0px",
	"margin-left":"-45px",
	"list-style":"none",
	"background-color":"#fdf"
});

$("ul li").css({
	"float":"left",
	"padding":"5px 15px 5px 15px",
	"border":"1px #ddd solid",
	"height":"20px",
	"margin":"0px 0px 0px 5px",
	"cursor":"pointer"
});

		
$("ul li.selected").css({
	"color":"#000",
	"height":"20px",
	"cursor":"default"
});
	
$("#textArea").css({
	"margin-left":"0px",
	"position":"relative",
	"top":"0px",
	"z-index":"-1",
	"clear":"left",
	"height":"400px",
	"border-top":"2px #000000 solid"
});

$(".yellow").css({
	"background-color":"#DDDDDD"
});

$(".pink").css({
	"background-color":"#DDDDDD"
});

$(".blue").css({
	"background-color":"#DDDDDD"
});
			

});

$(function() {
//一時保存
$('#open3').click(function() {
$("#mado3").ipop();
} );

//ログ
$('#open4').click(function() {
	$("#mado4").ipop();
} );


//編集履歴
$('#open5').click(function() {
	$("#mado5").ipop();
} );

//アップロード
$('#open6').click(function() {
	$("#mado6").ipop();
} );

//リンク
$('#open7').click(function() {
	$("#mado7").ipop();
} );

});

うまく説明はできないのですが機能を分けて、この機能を動かしてとの
指示があったら実行するみたない感じにしたいです。
――――――――――――――――――――――――――――――――――――――――――――――――――
１．test901.php
ダイアログ(名前：新規作成)を押す

２．dialog.js
ダイアログ(名前：新規作成)を開く処理を行う
タグが上書きされるので他の区分けしている関数を参照しない
サイトのデザイン(ファイル名：test901.js)の$("ul")と
ダイアログ／検索・新規作成(ファイル名：dialog.js)の$("ul")を
別のものと認識して上書きしない

３．test901.php
ダイアログ(名前：新規作成)を開く
――――――――――――――――――――――――――――――――――――――――――――――――――
今の段階だと他の所も参照しているようでタブでページを切り替える為の
同じタグ$("ul")を別の所で上書きされてしまっているようでサイトの
デザインが若干崩れてしまっており影響が出ております。
干渉されない設定(functionの部分を変更すれば)すれば問題解決できると
思い設定したのですが動かなくなってしまったので、一旦元に戻しました。
具体的にはボタンを押してもダイアログが開かなくなってしました。
そのかわりブラウザのページで使用しているタブの場所が正常に戻りました。
今後、機能を拡張していく予定です。
そのため、検索用のfanctionは検索用のfanctionでと分けております。

これだけだと説明が不十分すぎるかも知れないので下記のサイトを
載せておきますので必要であればご確認ください。
http://low-cost-travel.lk6.co/test901.php

Answer 1

やりたいことがよく分からないのであれなんですが、機能を分けるのは下記のような形でできます。

function hogehoge(){
/-----行う処理-----/
}

呼び出しは

hogehoge();

Comments

[退会済みユーザー]

『hogehoge();』は本体ファイルtest901.phpに組み込めば動くということでしょうか？

[rossi46hiro]

クリック時に利用したければ、例えば
<ul>
<li><a onclick="hogehoge()">hogehoge</a></li>
</ul>
こんな感じで呼び出しできます。