2月, 2011 からの更新 コメントスレッドの表示 / 非表示 | キーボードショートカット

  • kenji0302 21:19   2011年2月21日 パーマリンク | 返信
    タグ: JQueryMobile   

    JQUERY MOBILE 1.0 ALPHA 3リリースを祝して小ネタを何本か 

    ちょっと前の話ですが、JQueryMobileの1.0Alpha3が出ましたね。実はAlpha2から実践投入して使っていたのですが、いろいろバグに苦しめられました。Alphaなのでもちろん覚悟の上ではありますが。

    で、せっかくなのでいろいろ調べた事をメモがてら書いてみます。基本的にな話であれば

    このあたりが詳しいのでこちらを。このエントリではちょっと気になって調整した箇所などを。

    ロード中の文字を日本語にする

    JavaScriptファイルを準備して以下のように記述、これを読み込めばロード中の「loading」って文字が「読み込み中」になります。

    $(document).bind("mobileinit", function(){
    $.mobile.loadingMessage = "読み込み中";
    });

    Backボタンを一括して日本語に

    JavaScriptファイルを準備して以下のように記述すれば、「Back」ボタンの文字が全部「戻る」になります。

    $(document).bind("mobileinit", function(){
    $.mobile.page.prototype.options.backBtnText = "戻る";
    });

    Selectメニューをネイティブのものにしたい

    Alpha2だとセレクトメニューにちょっとバグがあって、ネイティブのものを利用する必要がありました。以下のように書くことによって、JQueryMobileのselectメニューを無効にできます。

    $(function () {
    $.widget( "mobile.selectmenu", $.mobile.widget, {
    options: {disabled: true}
    });
    });

    いまのところこんな感じ。テーマファイルなんて機構もあって、つくった覚えがあるんだけど詳しいやり方忘れちゃいました。思い出したら追記します。

    JQueryMobileは細かくデザインしなくても、それっぽいサイトが直ぐにつくれるのでいいですよね。リリース版が出るのがとっても楽しみです。

     
  • kenji0302 15:45   2011年1月7日 パーマリンク | 返信  

    JQueryMobileでも使えるスマートフォン向けカレンダー 


    ここ最近、お仕事でJQueryMobileでiPhone, Android他向けのサイトを作ったりしてます。JQueryMobile、いいっすよね。まだ結構バグが残ってて悩む事もありますが、そこはそれ、まだAlpha版なので。

    で、サイトを作っている際にカレンダーを使うことがありまして。いろいろ調べてはみたものの、iPhone向けのカレンダーってのは殆ど見当たらない。iCalがあるからあまり必要とされないのかもしれないですね。

    とはいえ、必要ですので仕方なしに、PC向けに作られているものにちょっと手を入れて、iPhone, Androidで使えるようにしてみました。

    ベースはiCal-like calendars with jQueryを使わせて頂いております。

    一回タップでツールチップ(ていうのかな?)が表示されます。で現在はコメントアウトしてますが、もう一度タップすると別ページに遷移できるようになっています。

    PCの場合はマウスオーバーでツールチップ表示、クリックで別ページに遷移、って感じです。

    ソースコード及び一式は以下。

    2011/01/10版

    改善点
    今回は動作変更です。2011/01/10版とは大幅に動きが変わっていますので、上記のデモをみていただいてお好きな方をどうぞ。

    • ツールチップを自動的に隠す動作から、テーブル内の別箇所タップで消去に変更
    • ツールチップが表示されている場合は、ツールチップクリックでリンク先に遷移するよう変更

    2011/01/10版

    改善点

    2011/01/07版

    いろいろいじくってみてはいますが、正直JQueryとかあまりよくわかりせん。ここおかしいよ、ってのはがあれば指摘いただけますと嬉しいです。

     
  • kenji0302 18:26   2008年11月11日 パーマリンク | 返信
    タグ: , JQuery, フォーム   

    JQuery Sortableを使って順番入れ替え機能の作成 

    WEBで表示順の入れ替え機能って作るのも、使うのも面倒なんだよね。上下に移動するボタン作ったり、表示順を数値で入力したり。

    で、最近そんな機能を作成する必要が出てきまして。いろいろ考えて、そういえばWordPressのウィジェット(右側の最近の投稿やコメントがドラッグアンドドロップで入れ替え可能)って便利だよね、そんな風にできないかな、と思って調べてみたら出来たのでメモ。
    (続き…)

     
    • まちょ 04:32   2010年2月26日 パーマリンク

      素晴らしいです!
      大変、参考になりました!
      有難う御座いました!

    • とく 19:28   2010年5月26日 パーマリンク

      すばらしいサンプル、ありがとうございます!!
      これで抱えていた問題が解決できそうです!!!

  • kenji0302 02:30   2008年8月19日 パーマリンク | 返信
    タグ: , iui,   

    iPhone用WEBページのUI 

    前のエントリで「高くて手が出ねぇ」と書いたとはいえiPhoneは気になるわけです。iPhone対応ページもちょっとずつ増えてきてる。んじゃ、実際に自分で作るときはどうするのが良いのかな、と手元にiPhoneは無いけど妄想したりしてました。

    で、Livedoorのログイン画面がiPhoneに対応した、との話を聞いて、メジャーなサイトがどういうiPhone対応をしてるか見てみました。

    livedoor ログイン

    これがiPhone対応のログインページ。PCでも見れるのでソースを見てみた所、iuiのcssを使ってる。

    iui

    以前に触ってみたんだけど確かに良くできてる。ほかにもiuiを使ってiPhone対応してるサイトもいくつかあるらしい。事実上のiPhone用のWEBページのUIの標準ってとこになりそうですね(もうなってる?)

    ダウンロードファイルにサンプルが含まれてるので、ダウンロードして動かしてみるのがオススメです。しかもとっても簡単に使えます。

     
  • kenji0302 10:16   2008年6月11日 パーマリンク | 返信
    タグ: , できる男, ネタ   

    これであなたのサイトも“できる男”風に! 

    方法。

    1. まずは落ち着く。できる男はいかなる時でも落ち着いてるものだ。仕事中なら尚更だ。

    2. 深呼吸をしよう。落ち着いて深呼吸をしてる、周りからは“なんて思慮深い、さすができる男だ”と思われてるぞ!

    3. おもむろに下のJavaScriptをアドレスバーに貼り付けてEnterだ。

    JavaScript:with(document.body)innerHTML=innerHTML.replace (/の(?!は)(?!で)(?!が)(?!に)(?!か)(?!も)/g,'のできる男の');focus()

    4. ページ全体にできる男風味が漂うぞ!

    気に入ったらブックマークレットに登録しよう。これで、Yahoo! でも Google でもできる男風で無敵!できる男なら当然ブックマークに登録だ。

    できる男風 ←できる男はこれをブックマークに登録だ!

    5. 自分のブログにもJavaScriptを埋め込んでみよう。できる男のブログだと一目でわかるようになるぞ!
    (続き…)

     
  • kenji0302 17:13   2008年5月8日 パーマリンク | 返信
    タグ:   

    gooRSSリーダーに追加するボタンについて 

    以前作成したRSSリーダーに追加するJavaScriptですが、”gooRSSリーダーに追加する”ボタンが動かなかったようです。徒然草:remixさんの記事で初めて気がつきました。テスト不足ですね。

    他のサイトのボタンも動かない所がちらほらあるようで・・・いつの間にか仕様変更でもしたのかもしれないですね。ので、ちょっと調べてみました。
    (続き…)

     
  • kenji0302 00:36   2008年4月23日 パーマリンク | 返信
    タグ: ,   

    RSSリーダー登録ボタン一括生成JavaScript 

    RSSリーダー、使ってますか?便利ですよ。

    まぁ、ブックマークレットとか設定するのが面倒で、ノートパソコンだとブックマークツールバーがじゃまだったりするんだけどね。でも、最近はRSSリーダーへの登録ボタンをつけてるサイトが増えてきた。凄く助かる。

    ので、自分のサイトにもつけるため、設定の仕方を調べてみたのでまとめ。標題のJavaScriptは最後にファイルで添付してるよ。
    (続き…)

     
  • kenji0302 23:52   2008年2月28日 パーマリンク | 返信
    タグ:   

    フレーム越しにフォントサイズの変更(JavaScript) 

    結構な間更新してなかったので、今日聞かれたことをちょっとメモ。

    最近Yahoo!ニュースとかで、フォントサイズが変更できるボタンがあるよね。あれをフレーム越しにやろう、って話。知ってればたいした話じゃないけど、知らないとちょっと悩むかも・・・まぁ、今更フレームってのもあんまり無いんだけど。
    (続き…)

     
    • イサム 23:39   2008年9月27日 パーマリンク

      すべてのインラインフレームのフォントを変更するにはどうすれば良いのでしょうか?

    • kenji0302 22:07   2008年9月29日 パーマリンク

      イサムさま

      軽くやってみたんですが…なかなかうまくいかないですね。
      参考までに、HTML中のインラインフレーム取得の処理は
      こんな感じです。

      var iframeObjArray = document.getElementsByTagName('iframe');
      for(var i=0;iframeObjArray[i];i++){
      //フォントサイズ変更処理を書く
      iframeObjArray[i].contentDocument.body.fontSize=1;
      }

      一応、フォントサイズ変更についても書いてはみてるんですが、
      これではうまく行かないみたいです。
      iframeObjArray[i].contentDocument.body.fontSize=1;

      う〜ん、まだまだ修行不足ですね。
      気にはなるので、iframeについても判れば追記しておきますね。

c
新規投稿作成
j
次の投稿 / 次のコメント
k
前の投稿 / 前のコメント
r
返信
e
編集
o
コメントを表示する / 隠す
t
トップへ移動
l
ログイン画面へ移動
h
ヘルプを表示する / 隠す
shift + esc
キャンセル