初めて質問いたします。
初心者ですみません、困っています宜しくお願いいたします。
jQueryでブラインドをPCページに設置したところ動きましたが
スマホではマウスでないためクリックしないとブラインドが反応しません。
jQueryモバイルがあると聞きましたがjavascriptのプログラムが分かりません。
可能であれば
下記のjsのプログラムの何処をどう変更を加えると
PCのオンマウスとスマホのタッチ両方に対応・反応するのでしょうか。
お返事宜しくお願いいたします。
******これ以降*******
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)}
}
};
}();
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
どちらでもいけますよ。
if(スマホなら){
ontouchstart=処理A_1;
}else{
onmouseover=処理A_2
}
ontouchstart=onmouseover=function(){
if(スマホなら){
処理A_1実行;
}else{
処理A_2実行;
}
}
>もう一つスマホ用を.jsとしてupすれば可能なのでしょうか?
作り方に合わせてください。
CGIやSSI、.htaccessで分岐させるなら、スマホにPC用スクリプトを読ませるのは無意味ですし、分割した方が個々のファイルサイズは減らせますね。
サーバーの処理の仕方がわからないから全部JavaScriptで、というのなら、全部1つにまとめるのも手だと思いますし、
環境に合わせたファイルだけを動的に(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
- 回答日時:
やろうと思えば出来ます。
1日経ってるので製作中に気づいかれたと思いますが、
ontouchmoveでスクロールしますから、スクロールを止める処理が必要です。
使いやすさや作りやすさは一長一短有りますが、
アップルも言っているように、使いやすい物を作るには制作者が苦労することになり、制作者が楽をすれば使用者が苦労することになります。
使いやすい物を作るには、コードは複雑になるのはしようがないと思います。
この回答への補足
お返事有難う御座います、お手間をおかけしてすみません。
iPhone/iPadではonmouseoverやonmousedownなどのonMouse系のイベントが利用できず、代わりにontouchstartやontouchmove、ontouchendなどのonTouch系のイベントが用意されています。
使い分けとしてはだいたい次のようになります。
ontouchstart = onmousedown
ontouchmove = onmousemove
ontouchend ≒onmouseup
同じプログラム上に記述するのが困難であれば
もう一つスマホ用を.jsとしてupすれば可能なのでしょうか?
基本的なことですが、その場合PC/スマホ/iPhone/iPadを特定してそれ以外には適用せずにそれぞれに対し専用のプログラムを記述が必要になるのでしょう。
そこをスマートに兼用にこだわっています、すみませんが宜しくお願いいたします。
No.1
- 回答日時:
スマホにはマウスは有りませんから、onmouseoverやonmouseoutの概念そのものがありません。
(ある条件で動きますがその条件が厳しいので、動かないと考えた方が楽です。)
onclickだけで処理するように作り直せば、スマホでもうまく動くようになります。
jQuery mobileはJavaScriptライブラリではなく、スマホサイト用の『デザインテンプレート』です。
「JavaScriptライブラリ」を使う場合は、スマホでも『jQuery』を使用してください。
(デザインテンプレートにjQueryが入っているので、デザインテンプレートからそのままjQueryも使えますけどね。。。)
この回答への補足
質問者です。素早い対応有難う御座います。
PC&スマホ兼用にするため、素人的に考えて
onmouseoverがスマホ用のタッチ開始時のイベントontouchstartに
onmouseoutがスマホ用のontouchendのようにスマホと兼用できるプログラムにすることは不可能でしょうか。
またはもっと賢くスマートな方法があれば具体的にご教授下さい。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
idを使わずにonclickで自身の要...
-
クリックすると上に開くアコー...
-
jquery 複数のメソッド
-
function(e)の意味を教えてくだ...
-
XMLHttpRequestでキャッシュを...
-
functionから別のfunctionを実...
-
ラジオボタン選択内容に応じて...
-
jQuery cssメソッドでの変数の...
-
小数点以下を5刻みで表示
-
jQueryの"return false"の役割...
-
現在地の取得について
-
jslintのエラーについて質問
-
CDの曲をケータイのSDに移す
-
jQueryでzipを解凍読み込みする...
-
ASP 最終日の表示
-
Matlabで自作関数をオーバーロード
-
JAVAスクリプトで指定時間以降...
-
要素名がスペースを含む場合のj...
-
jQueryを使用したギャラリー
-
関数でy=g(x)のgとは何の略です...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
idを使わずにonclickで自身の要...
-
functionから別のfunctionを実...
-
関数でy=g(x)のgとは何の略です...
-
jslintのエラーについて質問
-
クリックすると上に開くアコー...
-
XMLHttpRequestでキャッシュを...
-
ajax反映後のjqueryが動かない
-
function(e)の意味を教えてくだ...
-
要素名がスペースを含む場合のj...
-
jQueryの :not() .not() が有効...
-
jQueryでzipを解凍読み込みする...
-
関数名をテキストから読み込む...
-
getElementByIdを使用したグロ...
-
jqueryuiのdialog
-
jqueryのグローバル変数とロー...
-
jQuery 同じ処理を関数にまとめ...
-
XMLHttpRequestオブジェクトが...
-
addEventListener()でリスナー...
-
drawImageの描画順序の指定につ...
-
javascript(jQuery)でセル内...
おすすめ情報