【閑話休題】Slider ProをXPagesに取り込んでみたよ!-前半

 

こんばんは犬

 

前回のSliderProをXPagesにの続きですおねがい

 

早速行ってみましょう!

 

まずSliderProに必要なものです口笛

 

cssの定義

 

JQueryとSliderProのコア部分

 

SliderProを実行結果を行う場所

<div class="slider-pro" id="slider1">
    <div class="sp-slides">
        <div class="sp-slide">
            <img class="sp-image" src="image01.jpg"/>
        </div>
    </div>
</div>

 

 

 

SliderProのエンジンとなるところ

 

$(document).ready(function(){
        $( '#slider1' ).sliderPro({
          width: "80%",
        height: 500,
        aspectRatio: 2,
        arrows: true,
        buttons: true,
        autoplay: true,
        loop: true,
        visibleSize: '100%',
        forceSize: 'fullWidth'
        });
    });

 

全部で4つを組み込んでいきまーす爆  笑

 

1.カスタムコントロールを作成する

カスタムコントロールを作成します。

ここでは「ccHeader」と命名して作成します。

 

リソースの追加でCSSとJSファイル2つを設定します。

ソースで見るとこんな感じです。

保存して閉じます。

 

2つ目のカスタムコントロールを作成します。

 

ここでは「ccSliderPro」としておきます。

 

出力スクリプトコントロールを配置します。

 

 

出力スクリプトコントロールを選択して、すべてのプロパティ>データ>valueを指定します。

アイコンをクリックするとエディターが表示されます。

 

JQueryを記述します。

(先ほどのコードをコピペしてください)

 

保存して閉じます。

 

2.XPageを作成する

 

XPageを新規作成します。

 

ここでは「xpSliderPro」とします。

 

先ほど作成したカスタムコントロール2つを配置します。

ccHeader・ccSliderPro

 

 

続けてパネルコントロールを配置します。

 

 

パネルコントロールのプロパティからデータを選択し、前回作成したビューをバインドします。

 

パネルコントロールの中に繰り返しコントロールを配置します。

 

データバインディングは先ほどパネルコントロールで設定したviewを指定、

コレクション名には「viewEntry」と設定しました。

 

ソースタブに切り替えて青枠部分に計算結果フィールドコントロールを配置します。

 

 

青枠のように配置されていることを確認し、プロパティでコンテンツタイプを「HTML」にします。

 

値に切り替えてJavaScriptを選択し、以下を記述します。

var img = viewEntry.getColumnValues().elementAt(1);
'<img class="sp-image" src="'+img+'"/>';

 

続いて、足りないタグを追加していきます。

これもコピペできますねニヤ

 

保存します。

 

 

 

これで完成です!

簡単でしたよね目

 

文書を3つほど作成して・・・

 

 

プレビューしてみましょう。

表示されてカルーセルのようにスクロールされましたでしょうかおねがい

 

 

 

タグやプログラム部分はコピペだけで出来たのではないでしょうか!?

 

 

ただ・・・

こんなんじゃ物足りないってそこのアナタニヤリ

 

こちらも試してみませんか??

 

今回JQueryをカスタムコントロール化したのには理由がありますニコニコ

 

SliderProはオプションが豊富なので簡単に設定できた方が便利がいいですよねはてなマーク

ということでやったのがこちら!

 

 

全オプションをプロパティ定義したったーーww

 

これが完成すると・・・

XPageにカスタムコントロールを配置したときに以下のように設定できますグッ

 

ありすぎて何が正解かわからないのは内緒でw

 

 

というわけで、SliderProを取り込んだXPagesを作成しました。

カルーセル同様、動きのある画像って・・・

 

なんかキラキラカッコいいキラキラとしみじみ思うサッカー馬鹿でしたサッカー

 

 

では今回はこの辺で・・・

 

 

あでゅーバイバイ

 

AD