Home / CMS

    Topnew CSS v 2023 JS related

    2022-04-16 00:00
    480   0   0
    CSS, JS

    6 - Javascript related

    There are a list of CSS class binded with jQuery

    6.1 span of any width / height

    class=span data-w=300px class=span data-w=30% data-h=100px

    6.2 confirm - js effect on click

    Click here to confirm, class=confirm, data-confirm=msg to confirm

    6.3 dollar / number - js effect on change

    class=dollar, format input as dollar eg 1,234.56

    class=number, format input as number eg 1,234.567

    6.4 pop - popup a modal

    Click here to pop up Example 2

    This is the title of pop

    This is the body of pop, and here is the code

    0- You need another element eg [b class="show" data-src="#popMe"]click here to pop[/b]

    1- The 1st [div class="pop hide" id="popMe"] define the pop, generally you need add class=hide to make invisible

    2- The only 2nd [div lass="cell-?"] defines the width of the pop modal

    3- You can have as many [div] (3rd divs) inside the 2nd div.

    4- The first of 3rd divs is the header/title of the pop, where the close btn will be auto added there

    5- Followed by the body of the pop

    6- You can add more div after above body div, eg a footer of the pop etc (optional)

    7- If the 1st div contains x-only eg [div class="pop hide x-only"], then you can only close this pop by click on the "x" btn only, otherwise you can click on any part of the semi-transparent big background to close the pop

    This is the footer of pop
    This is the title of pop
    You can only close this pop by the close btns

    6.5 open - open one child at a time

    • 1- open
    • This is the details of 1
    • 2- wiki
    • Brief wiki of "open"

      You have a list of siblines of eg divs one after another, click on one open the next and close all others

      Code example

    • 3- the third headline
    • More text for the 3rd

    6.6 tabs - open one tab at a time

    1. 1 - tabs
    2. 2 - wiki
    3. 3 - other
    This is the first tab text ...

    Here is some brief wiki of class="tabs"

    There are exactly 2 kids inside tabs

    The 1st kid is the headlines to click, add class="on" to the active one

    The 2nd kid is the text of 1st kid, add class="on" to the active one

    This is the 3rd tab text

    6.7 tree - click to open/close a tree menu

    The tree look nested, however the code [div] not nested, instead they are siblines. The ids of the divs look like nested kids.

    This is a demo of class="tree"

    1. id = abc

    1.1 id = abc-123

    1.1.1 id = abc-123-cat ... some text

    1.1.2 id = abc-123-dog ... some text

    1.2 id = abc-888

    1.2.1 id = abc-888-cat ... some text

    1.2.2 id = abc-888-dog

    2. id = xyz

    2.1 id = xyz-123

    2.1.1 id = xyz-123-cat ... some text

    2.2.2 id = xyz-123-dog ... some text

    2.2 id = xyz-888

    2.2.1 id = xyz-888-cat ... some text

    2.2.2 id = xyz-888-dog

    6.8 show - click to open/close anything

    class="show" data-src="target"; target can be anything eg html tag, id, class, etc

    The following is a list of controllers, please click to see the effect

    class="show" data-src="#showID" src=".showDemo" src="#showDemo b" defa next Im next

    The following is a list of targets, which will demo talking to above controllers.

    id="showID" class="showDemo" Im b inside #showDemo

    show can also close parents -- click here to reset the box below:

    Im in box 1 class="abc"
    Im in box 2
    Im in box 3
    Im in box 4
    close parent data-p="p" i.e box 4 data-p="pp" i.e box 3 data-p="ppp" i.e box 2 data-p="div.abc" i.e box 1

    6.8 js-kid

    class="js-kid" data-kid="css1 css2"

    copy classes in data-kid to all it's kid elements

    class="js-kid" data-kid="bg rc green" abc

    class="js-kid" data-src="src or int" data-css="css"

    copy data-css (if no css then "on") to children(src), if src is int, then :nth() kid

    class="js-kid" data-kid="bg rc" data-src="2" data-css="blue"

    6.9 formH

    Imagine you have a horizontal form-group of label and input in each line:

    You can use formH to push all class to each kid and kid.label and kid.input etc

    Here is the result of above

    If a form without label, it's more simple just use js-kid

    And here is the result of above code:

    6.10 pgno - pagination

    6.10.1 - pgno with direct link eg a href="?page=2&key=var" (class=pgno + data-url and/or data-param)

    And here is the result of above example

    1. First
    2. ...
    3. 18
    4. 19
    5. 20
    6. ...
    7. Last

    And here is the result of above example

    1. First
    2. ...
    3. 18
    4. 19
    5. 20
    6. ...
    7. Last

    6.10.2 - pgno on click to send a form (class=pgno + data-id)

    And here is the result of above example

    1. First
    2. ...
    3. 18
    4. 19
    5. 20
    6. ...
    7. Last

    6.11 youtube - shorthand for youtube videos

    [div class="youtube"]youtube-id[/div] will become the following:


    6.12 slide

    This is page one - click to slide to next
    This is page two
    This is page three

    6.13 ajax

    6.13.1 ajax (default cmd = on change)

    eg If you change the country to CN, it will get data from /api?country=CN and populate content for select name="state" accordingly

    6.13.2 ajax (cmd = on click)

    eg on click, it will get data from data-url, then update the html code for data-src accordingly

    eg on click, it will get data from data-url, then update the html code for self if no data-src specified

    6.14 file upload: input type="file" class="upload"

    Dev note: .upload position seems buggy once you put it inside a cell, not not clickable, but position is misleading (still clickable, but hard to find where to click)

    6.15 #backTop - click to scroll back to page top

    6.16 lazy load img when screen visible

    [img class="load-img" data-src="url-of-img"]

    Back « Topnew CSS v 2023 Text
    Next » Topnew CMS - User Database


    Leave a commentEdit comment