Spage widget == Description == These markups implement //Spages// in HOP documents. A //spage// is a container. It is built using the ++++ constructor. A //spage// contains a header (++++) and one or several pads (++++). Each //pad// contains a header (++++) which is always visible and a body. The body is only visible when the pad is selected. Only one pad is selected at a time. ~~ Note: ,( :style { font-weight: bold; color: red } [ The markups presented in this page are not yet supported on client side programming. They are only supported on server side.]) == Synopsis == === Server === ( arg ...) ( arg ...) ( arg ...) ( arg ...) === Client === (spage-select spage pad [history #t] [callback #f]) (spage-selection spage) === Requirements === Client codes using //Spages// need to load the script ++hop-spage.js++. They also need to load the ++hop-spage.css++ style sheet. Hence, documents using //Spages// must include in their header, the following statement: ( :include "hop-spage") == Examples == == Server Definitions == === ++++ === ^ attributes ^ type ^ default ^ short description ^ | :id | string | //random// | element identifier. | | :onchange | function | - | a function to invoke on pad selection. | | body | element | empty | the body. | This function creates a //spage//. Its first child can be ++++. Its others children are all ++++. The argument :onchange is an listener invoked each time the current tab changes. The target of the event sent to this listener is the new selected tab. Onchange listeners can also be installed via ++add-event-listener!++ such as: ( ( :id "myspage" ( "A spage") ( ( "A tab") "foo") ( ( "Another tab") "foo")) ~(add-event-listener! (dom-get-element-by-id "myspage") "change" (lambda (event) (alert event.target)))) === ++++ === ^ attributes ^ type ^ default ^ short description ^ | :id | string | //random// | element identifier. | | body | element | empty | the body. | This function creates an optional //spage// header. === ++++ === ^ attributes ^ type ^ default ^ short description ^ | :id | string | //random// | element identifier. | | :onselect | function | - | a function to invoke on pad selection. | | body | element | empty | the body. | This function creates a //tab//. The first child of //tab// __must__ be a ++++. A //sptab// may be //inlined// or //on-demand//. Inlined sptabs receive their content at creation time. On-demand sptabs ask the server a new content each time they are selected. Tabs body of on-demand //spage// must use the ++++ markup. The argument :onselect is an listener invoked each time the tab is pushed. The target of the event sent to this listener is the new selected tab. The field ++action++ is either ++"push"++ or ++"pop"++ depending on how the tab has been selected. Onselect listeners can also be installed via ++add-event-listener!++: === ++++ === ^ attributes ^ type ^ default ^ short description ^ | :id | string | //random// | element identifier. | | body | element | empty | the body. | Creates a tab header. == Client Definitions == === ++(spage-selection spage)++ === spage-selection ^ arguments ^ type ^ short description ^ | spage | spage or string | the spage. | This function returns the currently selected in a //spage//. == Style == == See also == ,