SBUx

<sbux-accordion></sbux-accordion>

<div id="xxx"></div>

<div id="xxx"></div>

<script>                                    

   function acc_click_event (args){

       alert("accordion 클릭시 이벤트 : "+args );

   }

   function fnCallBeforeSelect(targetId){

       alert("accordion 선택전 callback : ",targetId);

   }

</script>                                

<sbux-accordion id="idxAccordion" name="accordionNm" uitype="normal"

                       title-target-id-array="PSBUx^PSBUx_IDE^PSBGrid"

                       title-text-array="SBUx Acc^SBUx IDE Acc^SBGrid Versions Acc"

                       title-target-value-array="1^2^3"

                       title-glyphs-placement="right"

                       title-glyphs-placement-array="left"

                       title-expanded-glyphs="glyphicon-star-empty"

                       title-expanded-glyphs-array="red glyphicon-star-empty"

                       title-collapse-glyphs="glyphicon-star"

                       title-collapse-glyphs-array="red glyphicon-star"

                       title-style-array="^color:red;^color:green;font-weight: bold;"

                       onclick="acc_click_event(accordionNm)"

                       callback-before-select="fnCallBeforeSelect">

</sbux-accordion>

<div id="PSBUx">

   <ul>

       <li>SBUx Acc - 1</li>

       <li>SBUx Acc - 2</li>

       <li>SBUx Acc - 3</li>

   </ul>

</div>

<div id="PSBUx_IDE">

   <ul>

       <li>SBUx IDE Acc - 1</li>

       <li>SBUx IDE Acc - 2</li>

       <li>SBUx IDE Acc - 3</li>

   </ul>

</div>

<div id="PSBGrid">

   <ul>

       <li>SBGrid Version Acc - 1</li>

       <li>SBGrid Version Acc - 2</li>

       <li>SBGrid Version Acc - 3</li>

   </ul>

</div>

<script>                                    

   function acc_click_event (args){

       alert("accordion 클릭시 이벤트 : "+args );

   }

   function fnCallBeforeSelect(targetId){

       alert("accordion 선택전 callback : ",targetId);

   }

   var accJsonData = [

       { "id": "0", "pid": "-1", "order": "1", "placement": "left", "expanded": "glyphicon-hand-right", "collapse": "glyphicon-hand-down", "text": "SBUx Acc Json", "targetid": "PSBUx", "targetvalue": "1", "cssstyle" : "", "selected": "" },

       { "id": "1", "pid": "-1", "order": "2", "placement": "right", "text": "SBUx IDE Acc Json", "targetid": "PSBUx_IDE", "targetvalue": "2", "cssstyle": "color:red;", "selected": "" },

       { "id": "2", "pid": "-1", "order": "3", "placement": "left", "text": "SBGrid Versions Acc Json", "targetid": "PSBGrid2", "targetvalue": "3", "cssstyle": "color:black;font-weight: bold;", "selected": "" }

   ];

</script>

<sbux-accordion id="idxAccordion2" name="accordionNm2" uitype="normal"

                   jsondata-ref="accJsonData"

                   jsondata-id="id"

                   jsondata-pid="pid"

                   jsondata-order="order"

                   jsondata-text="text"

                   jsondata-target-id="targetid"

                   jsondata-target-value="targetvalue"

                   jsondata-expanded-glyphs="expanded"

                   jsondata-collapse-glyphs="collapse"

                   jsondata-css-style="cssstyle"

                   jsondata-expanded-glyphs="expanded"

                   jsondata-collapse-glyphs="collapse"

                   onclick="acc_click_event(accordionNm2)"

                   callback-before-select="fnCallBeforeSelect">

</sbux-accordion>

<div id="PSBUx">

   <ul>

       <li>SBUx Acc Json - 1</li>

       <li>SBUx Acc Json - 2</li>

       <li>SBUx Acc Json - 3</li>

   </ul>

</div>

<div id="PSBUx_IDE">

   <ul>

       <li>SBUx IDE Acc Json - 1</li>

       <li>SBUx IDE Acc Json - 2</li>

       <li>SBUx IDE Acc Json - 3</li>

   </ul>

</div>

<div id="PSBGrid2">

   <ul>

       <li>SBGrid Version Acc Json - 1</li>

       <li>SBGrid Version Acc Json - 2</li>

       <li>SBGrid Version Acc Json - 3</li>

   </ul>

</div>

<div id="sbArea"></div>

<div id="acc1">

  acc contents 1

</div>

<div id="acc2">

  acc contents 2

</div>

<script>

   var accJsonData=[

       { "id": "0", "pid": "-1", "order": "1", "targetid": "acc1", "text": "첫번째 어코디언1" },

       { "id": "1", "pid": "-1", "order": "2", "targetid": "acc2", "text": "두번째 어코디언2" }

   ];

   $(document).ready(function(){

       $('#sbArea').sbAccordion({

           name : 'sbScriptNm',

           uitype : 'normal',

           jsondataRef : 'accJsonData'

       });

   });

</script>