1

OK、基本的な jQuery Mobile ページができました。

私が必要とするのは：ユーザーが要素（スライダーやボタンなど）をクリックしたとき

  • アニメーションは表示されません
  • 「アクション」を有効にしないでください（スライダーの移動など）
  • ホバー時にボタンが変化するなど、色の変化は発生しません。
<!-- New Website #1 -->
<!DOCTYPE html>
<html style='min-height:0px;'>
    <head>
        <title>Website Title</title>

        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

        <link rel="stylesheet" href="jquery.mobile.min.css" />
        <link rel="stylesheet" href="custom.css" />
        <link rel="stylesheet" href="dev.css" />


    </head>

    <body id="jqm-website-3539" class=""  >


        <!-- New Page #1 -->
        <div data-role="page" comp-id="jqm-page-2862" id="jqm-page-2862" class="" data-add-back-btn="false" data-back-btn-text="" data-back-btn-theme="" data-dom-cache="false" data-theme="" data-title="" >

            <!-- New Header #1 -->
            <div data-role="header" comp-id="jqm-header-6813" id="jqm-header-6813" class="" data-position="fixed" data-fullscreen="false" data-theme="" >
                <h1></h1>
            </div>
            <!-- / New Header #1 -->

            <!-- New Content #1 -->
            <div data-role="content" comp-id="jqm-content-7853" id="jqm-content-7853" class="" data-theme=""  >

                <!-- New Button #1 -->
                <div comp-id="jqm-button-6345" >
                    <a data-role="button" id="jqm-button-6345" class="" data-corners="true" data-icon="" data-iconpos="left" data-iconshadow="true" data-inline="false" data-mini="false" data-shadow="true" data-theme=""  href="#" data-transition="">
                        Button
                    </a>
                </div>
                <!-- / New Button #1 -->

                <!-- New Navigation Bar #1 -->
                <div data-role="navbar" data-position="fixed" id="jqm-navbar-5393" class="" data-iconpos="left"  >
                    <ul comp-id="jqm-navbar-5393" >

                    <!-- New Navigation Bar Item #1 -->
                    <li  >
                        <a comp-id="jqm-navbar-item-5974" href="#" id="jqm-navbar-item-5974" class="" data-icon="home" data-theme="" >
                            One
                        </a>
                    </li>
                    <!-- / New Navigation Bar Item #1 -->

                    <!-- New Navigation Bar Item #1 -->
                    <li  >
                        <a comp-id="jqm-navbar-item-5409" href="#" id="jqm-navbar-item-5409" class="" data-icon="plus" data-theme="" >
                            Two
                        </a>
                    </li>
                    <!-- / New Navigation Bar Item #1 -->

                    <!-- New Navigation Bar Item #1 -->
                    <li  >
                        <a  comp-id="jqm-navbar-item-925" href="#" id="jqm-navbar-item-925" class="" data-icon="gear" data-theme="" >
                            Three
                        </a>
                    </li>
                    <!-- / New Navigation Bar Item #1 -->
                    </ul>
                </div>
                <!-- / New Navigation Bar #1 -->

                <!-- New SearchField #1 -->
                <div data-role="fieldcontain" data-controltype="searchinput" comp-id="jqm-input-search-9514" id="jqm-input-search-9514" class="" data-mini="false" data-theme=""  >
                    <input name="" placeholder="" value="" type="search">
                </div>
                <!-- / New SearchField #1 -->

                <!-- New Switch #1 -->
                <div data-role="fieldcontain" data-controltype="toggleswitch" comp-id="jqm-input-switch-2499" id="jqm-input-switch-2499" class="" data-highlight="false" data-mini="true" data-theme="" data-track-theme=""  >
                    <select data-role="slider">
                        <option value="0">
                            On
                        </option>
                        <option value="Off">
                            Off
                        </option>
                    </select>
                </div>
                <!-- / New Switch #1 -->

                <!-- New TextArea #1 -->
                <div data-role="fieldcontain" data-controltype="textarea" comp-id="jqm-text-area-8880" id="jqm-text-area-8880" class="" data-mini="false" data-theme=""  >
                    <label>

                    </label>
                    <textarea name="" placeholder="" id="jqm-text-area-8880" class="" data-mini="false" data-theme=""  ></textarea>
                </div>
                <!-- / New TextArea #1 -->

            </div>
            <!-- / New Content #1 -->
        </div>
        <!-- / New Page #1 -->

        <!-- New Page #1 -->
        <div data-role="page" comp-id="jqm-page-7022" id="jqm-page-7022" class="" data-add-back-btn="false" data-back-btn-text="" data-back-btn-theme="" data-dom-cache="false" data-theme="" data-title="" >

        </div>
        <!-- / New Page #1 -->


        <script src="jquery.min.js"></script>
        <script src="jquery.mobile.min.js"></script>
        <script src="custom.js"></script>
        <script src="dev.js"></script>

    </body>
</html>
<!-- / New Website #1 -->

これは実行可能ですか？もしそうなら、どのように？

4

3 に答える 3

0

何も起こらないようにしたい場合は、クリック時に event.preventDefault を呼び出すだけです。

$("#button").click( function (event) {
    event.preventDefault();
});

URL へのリンクなど、何らかの機能を実行したい場合は、それをコールバックに含めます。

$("#button").click( function (event) {
    window.location = $(this).attr("href");
    event.preventDefault();
});
于 2013-08-23T08:17:24.247 に答える
0

jQuery(':animated') 関数を使用できます

$('.btn1').click(function(){
    $('.one').animate({'width':'100%'},5000);
});
$('.btn2').click(function(){
    $('.two').animate({'width':'100%'},5000);
});
$('.btn3').click(function(){
    $('.three').animate({'width':'100%'},5000);
});

$('.all').click(function(){
    $(':animated').stop();
});

デモ

于 2013-08-23T09:26:28.447 に答える