モバイル マイクロサイト模倣アプリの時間スクロール選択に適したものが常にあります。effect_html/css_WEB-ITnose

前回、モバイル マイクロサイト用の時間選択プラグインを紹介しました。覚えていますか?今日は新しいプラグインを紹介したいと思います: mobiscroll 前回のプラグインは使えたのに、今回は新しいプラグインが導入されるのはなぜですか?主な理由は、非常に柔軟で制御しやすいため、自分に合った組み合わせが常に存在します。

まず、その利点を紹介しましょう:

多主题（默认、IOS、SenseUI、Android-ICS-Light、Android-ICS、WindowsLight、WindowsPhone）；多模式（滚动、点击、混合）；多显示形式（拾取、直接、气泡、顶部、底部）；多动画（无、渐显、翻转、弹出、翻书、从左滑出、自下而上、自上滑出、自下滑出）；多种模式——赋予不同的参数，就可以只选到日期、只选时间、日期时间同时选；

上記を自由に組み合わせることができます。混乱しないでください。以下のレンダリングを見ると、それぞれが何に対応しているかがわかります。

早速、レンダリングを見てみましょう:

• マルチテーマ

Default.png

IOS.png

SenseUI.png

Android-ICS-Light.png

Android-ICS .png

WindowsLight.png

WindowsPhone.png

• マルチモード(Android の場合 - ICS-Light テーマを例に挙げます。このテーマの方が見栄えが良いと思うので、以下ではこのテーマを使用します)

Scroll.png

クリック png

混合 (クリックしてスクロール).png

• 複数の表示形式

インターフェースに直接表示.png

Pick up.png

Bottom.png

Top .png

Bubbles.png

• 複数のアニメーションや複数のアニメーションを画像だけでシミュレートすることはできません。はい、最後にデモへのリンクを添付しますので、それをダウンロードして見て、必要な組み合わせの効果を見つけることができます。

• 複数のモード、そして最終的にはマルチモード 日々の開発プロセスでは、「日付のみ」、「時刻のみ」、「」など、正確な日付の数に対する多くの要件があります。日付と時刻」の両方が存在することが非常に一般的です。

日付限り.png

時間限り.png

日付と時刻の両方が必要です。png

上記の一般的なニーズは基本的に満たされ、自分で組み合わせることができます。

それらをどのように組み合わせればよいでしょうか?コードの一部を見てみましょう

• 異なるテーマを適用するには、ここで異なる CSS と JS を参照するだけです (対応する名前が一目でわかります)

  <!-- <link href="css/mobiscroll.scroller.css" rel="stylesheet" type="text/css" />  <link href="css/mobiscroll.scroller.android.css" rel="stylesheet" type="text/css" /> -->  <link href="css/mobiscroll.scroller.android-ics.css" rel="stylesheet" type="text/css" />  <!-- <link href="css/mobiscroll.scroller.ios.css" rel="stylesheet" type="text/css" />  <link href="css/mobiscroll.scroller.sense-ui.css" rel="stylesheet" type="text/css" />  <link href="css/mobiscroll.scroller.wp.css" rel="stylesheet" type="text/css" />-->  <link href="css/mobiscroll.animation.css" rel="stylesheet" type="text/css" />  <link rel="stylesheet" href="css/mobiscroll.custom.min.css">

  は他のすべてのテーマでコメントアウトされており、必要に応じて別の CSS を導入できます。注: 最後の 2 つの CSS を導入する必要があります。異なる CSS テーマによって導入される JS も異なります。以下のコードを参照してください。

  <script src="js/mobiscroll.zepto.js" type="text/javascript"></script>  <script src="js/mobiscroll.core.js" type="text/javascript"></script>  <script src="js/mobiscroll.scroller.js" type="text/javascript"></script>  <script src="js/mobiscroll.datetime.js" type="text/javascript"></script>  <!-- <script src="js/mobiscroll.select.js" type="text/javascript"></script> -->  <!-- <script src="js/mobiscroll.scroller.ios.js" type="text/javascript"></script>  <script src="js/mobiscroll.scroller.android.js" type="text/javascript"></script> -->  <script src="js/mobiscroll.scroller.android-ics.js" type="text/javascript"></script>  <!-- <script src="js/mobiscroll.scroller.wp.js" type="text/javascript"></script>  <script src="js/mobiscroll.i18n.zh.js" type="text/javascript"></script> -->

  同様に、最初の 4 つの JS はインポートする必要があり、残りの JS は、対応する JS をインポートする必要性に応じて異なります。

  js と css を導入するだけでは十分ではありません。非常に簡単な js を実行する必要もあります。

  <script type="text/javascript">      $(function () {          var curr = new Date().getFullYear();          var fun = function () {              $('#txttest').scroller('destroy').scroller({                  preset: 'date',                  minDate: new Date(2012, 3, 10, 9, 22),                  maxDate: new Date(2014, 7, 30, 15, 44),                  invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] },                  theme: $('#theme').val(),                  mode: $('#mode').val(),                  lang: 'zh',                  display: $('#display').val(),                  animate: $('#animation').val()              });          }          $('.settings select').bind('change', function () {              fun();          });          fun();      });  </script>

  ここで設定できます。

• 上で書いた js のパラメータを変更するだけで、時刻、日付、日時の設定を同時に保持する方が簡単です。 >

  最後に、さらに詳しい設定項目を知りたい場合は、英語の公式 Web サイトにアクセスしてここをクリックしてください。

  preset: 'date'---日期preset: 'time' --- 时间preset: 'datetime' ---日期时间都保留

テスト選択.png

必要な表示方法を組み合わせたい場合は、添付したデモでリアルタイムに選択し、上に示すように設定できます。デモを表示するには、ここをクリックしてください。 (追記: パスワード 5uwp)

この記事が役に立ったら、いいねをお願いします~