PC用jQueryをスマホ対応にするには。

質問

初めて質問いたします。
初心者ですみません、困っています宜しくお願いいたします。

jQueryでブラインドをＰＣページに設置したところ動きましたが
スマホではマウスでないためクリックしないとブラインドが反応しません。

jQueryモバイルがあると聞きましたがjavascriptのプログラムが分かりません。

可能であれば
下記のjsのプログラムの何処をどう変更を加えると
ＰＣのオンマウスとスマホのタッチ両方に対応・反応するのでしょうか。

お返事宜しくお願いいたします。

******これ以降*******

var slideMenu=function(){
var sp,st,t,m,sa,l,w,sw,ot;
return{
build:function(sm,sw,mt,s,sl,h){
sp=s; st=sw; t=mt;
m=document.getElementById(sm);
sa=m.getElementsByTagName('li');
l=sa.length; w=m.offsetWidth; sw=w/l;
ot=Math.floor((w-st)/(l-1)); var i=0;
for(i;i<l;i++){s=sa[i]; s.style.width=sw+'px'; this.timer(s)}
if(sl!=null){m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)}
},
timer:function(s){s.onmouseover=function(){clearInterval(m.timer);m.timer=setInterval(function(){slideMenu.slide(s)},t)}},
slide:function(s){
var cw=parseInt(s.style.width,'10');

if(cw<st){
var owt=0; var i=0;
for(i;i<l;i++){
if(sa[i]!=s){
var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width,'10');
if(ow>ot){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)+'px'}
owt=owt+(ow-oi)}}
s.style.width=(w-owt)+'px';
}else{clearInterval(m.timer)}
}
};
}();

回答No.3

神崎 渉瑠（@taloo）

どちらでもいけますよ。

if(スマホなら){
　ontouchstart=処理A_1;
}else{
　onmouseover=処理A_2
}

ontouchstart=onmouseover=function(){
　if(スマホなら){
　　処理A_1実行;
　}else{
　　処理A_2実行;
　}
}

>もう一つスマホ用を.jsとしてupすれば可能なのでしょうか？
作り方に合わせてください。

CGIやSSI、.htaccessで分岐させるなら、スマホにPC用スクリプトを読ませるのは無意味ですし、分割した方が個々のファイルサイズは減らせますね。
サーバーの処理の仕方がわからないから全部JavaScriptで、というのなら、全部１つにまとめるのも手だと思いますし、
環境に合わせたファイルだけを動的に（JavaScriptで）読み込むのも手だと思います。

共通部分が少ない場合に、その共通部分をライブラリとして別途ダウンロードさせた場合、逆に通信データ総量が増える可能性もありますが、その辺の調整は方針次第でしょう。

やりかたがわからなければ、わかる範囲で作ればいいと思います。

補足

var ua = navigator.userAgent;
if ( ua.indexOf('iPhone') != -1 || ua.match(/.*Android.*Mobile.*/) || ua.indexOf('Windows Phone') != -1 ) {
スマホ用
} else {
PC用
}

if条件分岐で判別ですが、試みましたがうまくいきませんでした。
スマホのタッチに反応するのですが

直ぐに離すとリンク先に飛んでしまう

/* スマホ用 */
var slideMenu_05=function(){
/*上記の箇所slideMenu_02部分*/
var sp,st,t,m,sa,l,w,sw,ot;
return{
build:function(sm_05,sw,mt,s,sl,h){
sp=s; st=sw; t=mt;
m=document.getElementById(sm_05);
sa=m.getElementsByTagName('li');
l=sa.length; w=m.offsetWidth; sw=w/l;
ot=Math.floor((w-st)/(l-1)); var i=0;
for(i;i<l;i++){s=sa[i]; s.style.width=sw+'px'; this.timer(s)}
if(sl!=null){m.timer=setInterval(function(){slideMenu_05.slide(sa[sl-1])},t)}

},
timer:function(s){s.ontouchstart=function(){
/*　　　　　　　　　　↑変更　*/
clearInterval(m.timer);m.timer=setInterval(function(){slideMenu_05.slide(s)},t)}},
slide:function(s){
var cw=parseInt(s.style.width,'10');
if(cw<st){
var owt=0; var i=0;
for(i;i<l;i++){
if(sa[i]!=s){
var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width,'10');
if(ow>ot){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)+'px'}
owt=owt+(ow-oi)}}
s.style.width=(w-owt)+'px';
}else{clearInterval(m.timer)}
}
};
}();

修正or追加の部分が
不明です。

引き続きご教授下さい。

回答No.2

神崎 渉瑠（@taloo）

やろうと思えば出来ます。

1日経ってるので製作中に気づいかれたと思いますが、
ontouchmoveでスクロールしますから、スクロールを止める処理が必要です。

使いやすさや作りやすさは一長一短有りますが、
アップルも言っているように、使いやすい物を作るには制作者が苦労することになり、制作者が楽をすれば使用者が苦労することになります。
使いやすい物を作るには、コードは複雑になるのはしようがないと思います。

補足

お返事有難う御座います、お手間をおかけしてすみません。

iPhone/iPadではonmouseoverやonmousedownなどのonMouse系のイベントが利用できず、代わりにontouchstartやontouchmove、ontouchendなどのonTouch系のイベントが用意されています。

使い分けとしてはだいたい次のようになります。
ontouchstart = onmousedown
ontouchmove = onmousemove
ontouchend ≒onmouseup

同じプログラム上に記述するのが困難であれば
もう一つスマホ用を.jsとしてupすれば可能なのでしょうか？

基本的なことですが、その場合PC/スマホ/iPhone/iPadを特定してそれ以外には適用せずにそれぞれに対し専用のプログラムを記述が必要になるのでしょう。

そこをスマートに兼用にこだわっています、すみませんが宜しくお願いいたします。

回答No.1

神崎 渉瑠（@taloo）

スマホにはマウスは有りませんから、onmouseoverやonmouseoutの概念そのものがありません。
（ある条件で動きますがその条件が厳しいので、動かないと考えた方が楽です。）
onclickだけで処理するように作り直せば、スマホでもうまく動くようになります。

jQuery mobileはJavaScriptライブラリではなく、スマホサイト用の『デザインテンプレート』です。
「JavaScriptライブラリ」を使う場合は、スマホでも『jQuery』を使用してください。

（デザインテンプレートにjQueryが入っているので、デザインテンプレートからそのままjQueryも使えますけどね。。。）

補足

質問者です。素早い対応有難う御座います。

PC&スマホ兼用にするため、素人的に考えて
onmouseoverがスマホ用のタッチ開始時のイベントontouchstartに
onmouseoutがスマホ用のontouchendのようにスマホと兼用できるプログラムにすることは不可能でしょうか。
またはもっと賢くスマートな方法があれば具体的にご教授下さい。