JavaScript DHTML/SmartClient/SectionStack

Материал из Web эксперт
Перейти к: навигация, поиск

Add section to SectionStack

   <source lang="html4strict">



<HTML><HEAD> 

 <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.SectionStack.create({ 

   ID: "sectionStack",
   visibilityMode: "multiple",
   width: 300,
   height: 500,
   sections: [
       {title: "Blue Pawn", expanded: true, items: [
           isc.Label.create({contents: "asdf"})
       ]},
       {title: "Green Cube", expanded: true, canCollapse: false, items: [
           isc.Label.create({contents: "asdf"})
       ]},
       {title: "Blue Cube", expanded: false, items: [
           isc.Label.create({contents: "asdf"})
       ]}
   ]

});

isc.IButton.create({ 

   left: 325,
   width: 150,
   title: "Add Section",
   click: function () {
       // alternate adding yellow piece and blue cube
       if (sectionStack.sections.length % 2 == 1) {
           sectionStack.addSection({
               title: "Yellow Piece", 
               expanded: true, items: [
                   isc.Label.create({contents: "asdf"})
               ]
           });
       } else {
           sectionStack.addSection({
               title: "Blue Cube", expanded: false, items: [
                   isc.Label.create({contents: "asdf"})
               ]
           });
       }
   }

}); </SCRIPT> </BODY> </HTML> 

 </source>


Create SectionStack

   <source lang="html4strict">


<HTML><HEAD> 

 <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.SectionStack.create({ 

   ID: "sectionStack",
   visibilityMode: "multiple",
   width: 300,
   height: 500,
   sections: [
       {title: "Blue Pawn", expanded: true, items: [
           isc.Label.create({contents: "asdf"})
       ]},
       {title: "Green Cube", expanded: true, canCollapse: false, items: [
           isc.Label.create({contents: "asdf"})
       ]},
       {title: "Blue Cube", expanded: false, items: [
           isc.Label.create({contents: "asdf"})
       ]}
   ]

});

</SCRIPT> </BODY> </HTML> 

 </source>


Expand or collapse a section in section layout

   <source lang="html4strict">


<HTML><HEAD> 

 <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.HTMLFlow.create({ 

   ID: "htmlFlow",
   overflow: "auto",
   padding:10,
   contents: "Severity 1 - Critical problem
System is unavailable in production or " +
             "is corrupting data, and the error severely impacts the user"s operations." +
             "

Severity 2 - Major problem
An important function of the system " +
             "is not available in production, and the user"s operations are restricted." +
             "

Severity 3 - Minor problem
Inability to use a function of the " +
             "system occurs, but it does not seriously affect the user"s operations."

}) isc.SectionStack.create({ 

   ID: "sectionStack",
   visibilityMode: "multiple",
   width: 300, height: 350,
   border:"1px solid blue",
   sections: [
       {title: "Blue Pawn", expanded: true, items: [
           isc.Label.create({contents: "asdf"})
       ]},
       {title: "HTMLFlow", expanded: true, canCollapse: true, items: [ htmlFlow ]},
       {title: "Green Cube", expanded: true, canCollapse: false, items: [
           isc.Label.create({contents: "asdf"})
       ]},
       {title: "Yellow Piece", expanded: false, items: [
           isc.Label.create({contents: "asdf"})
       ]}
   ]

});

isc.IButton.create({ 

   left: 325,
   width: 150,
   title: "Expand Blue",
   click: "sectionStack.expandSection(0)"

}); isc.IButton.create({ 

   left: 325,
   top: 30,
   width: 150,
   title: "Collapse Blue",
   click: "sectionStack.collapseSection(0)"

});

</SCRIPT> </BODY> </HTML> 

 </source>


Remove section from SectionStack

   <source lang="html4strict">


<HTML><HEAD> 

 <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.SectionStack.create({ 

   ID: "sectionStack",
   visibilityMode: "multiple",
   width: 300,
   height: 500,
   sections: [
       {title: "Blue Pawn", expanded: true, items: [
           isc.Label.create({contents: "asdf"})
       ]},
       {title: "Green Cube", expanded: true, canCollapse: false, items: [
           isc.Label.create({contents: "asdf"})
       ]},
       {title: "Blue Cube", expanded: false, items: [
           isc.Label.create({contents: "asdf"})
       ]}
   ]

}); isc.IButton.create({ 

   left: 325,
   top: 30,
   width: 150,
   title: "Remove Section",
   click: function () {
       // remove last section
       sectionStack.removeSection(sectionStack.sections.length-1);
   }

}); </SCRIPT> </BODY> </HTML> 

 </source>


Resize section in a SectionStack

   <source lang="html4strict">


<HTML><HEAD> 

 <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.defineClass("HelpCanvas", "Canvas").addProperties({ 

   autoDraw: false,
   padding: 10,
   overflow:"auto",
   contents: "Severity 1 - Critical problem
System is unavailable in production or " +
             "is corrupting data, and the error severely impacts the user"s operations." +
             "

Severity 2 - Major problem
An important function of the system " +
             "is not available in production, and the user"s operations are restricted." +
             "

Severity 3 - Minor problem
Inability to use a function of the " +
             "system occurs, but it does not seriously affect the user"s operations."

}); isc.SectionStack.create({ 

   ID: "sectionStack",
   visibilityMode: "multiple",
   width: 300, height: 350,
   border:"1px solid blue",
   sections: [
       {title: "Blue Pawn", expanded: true, resizeable:false, items: [
           isc.Label.create({contents: "asdf"})
       ]},
       {title: "Help 1", expanded: true, canCollapse: true, items: [ 
           isc.HelpCanvas.create({ ID:"help1", autoDraw:false })
       ]},
       {title: "Help 2", expanded: true, canCollapse: true, items: [ 
           isc.HelpCanvas.create({ ID:"help2", autoDraw:false })
       ]}
   ]

}); isc.IButton.create({ 

   left: 325,
   width: 150,
   title: "Resize Help 1",
   click: "help1.setHeight(200)"

});

</SCRIPT> </BODY> </HTML> 

 </source>


Show/hide SectionStack

   <source lang="html4strict">


<HTML><HEAD> 

 <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.HTMLFlow.create({ 

   ID: "htmlFlow",
   overflow: "auto",
   padding:10,
   contents: "Severity 1 - Critical problem
System is unavailable in production or " +
             "is corrupting data, and the error severely impacts the user"s operations." +
             "

Severity 2 - Major problem
An important function of the system " +
             "is not available in production, and the user"s operations are restricted." +
             "

Severity 3 - Minor problem
Inability to use a function of the " +
             "system occurs, but it does not seriously affect the user"s operations."

}) isc.SectionStack.create({ 

   ID: "sectionStack",
   visibilityMode: "multiple",
   width: 300, height: 350,
   border:"1px solid blue",
   sections: [
       {title: "Blue Pawn", expanded: true, items: [
           isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_blue.png"})
       ]},
       {title: "HTMLFlow", expanded: true, canCollapse: true, items: [ htmlFlow ]},
       {title: "Green Cube", expanded: true, canCollapse: false, items: [
           isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/cube_green.png"})
       ]},
       {title: "Yellow Piece", hidden: true, items: [
           isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/piece_yellow.png"})
       ]}
   ]

});

isc.IButton.create({ 

   left: 325,
   width: 150,
   title: "Show Section",
   click: "sectionStack.showSection(3)"

}); isc.IButton.create({ 

   left: 325,
   top: 30,
   width: 150,
   title: "Hide Section",
   click: "sectionStack.hideSection(3)"

});

</SCRIPT> </BODY> </HTML> 

 </source>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/SmartClient/SectionStack&oldid=3755»