Viewing 1 post (of 1 total)
  • Author
    Posts
  • #1045

    luc
    Keymaster

    Now you have a new blank project, let’s start to create a new page. You will quickly realize that this can do done incredibly quickly.

    • create new menu entry in sidemenu.html
    <nav>
      <ul id="IDsidemenucontent" style="display:none">
        <li page="myfirstpage">
          <div>
            My first page
          </div>
        </li> 
     </ul>
    </nav>

    Now clicking on My first page will automatically load the myfirstpage page, that means CYJS will load :

    • html/myfirstpage.html
    • js/myfirstpage.js
    • css/myfirstpage.css

    At this point, you’ll get a error message since the myfirspage has not been created yet. So let’s create the corresponding page :

    • create the html/myfirstpage.html file with HTML code inside, but only the body part – without <body></body> tags –  , for example :
    <p>Here is my first page.</p>
    • create the js/myfirstpage.js file containing only :
    function CyInit_myfirstpage() {}

    That’s all, refresh everything, click on My first page on sidemenu and your page will be displayed. And you wrote almost nothing .. 😉

    You can now resize your window, play with the burger icon, you’ll see everything works in responsive in all your possible browsers.

    Let’s now improve our sidemenu to manage multilingual. For this, just enclose menu label  like this :

    <nav>
      <ul id="IDsidemenucontent" style="display:none">
        <li page="myfirstpage">
          <div>
            <l>
              My first page
            </l>
          </div>
        </li> 
     </ul>
    </nav>

    Then edit js/lang/en.js file and add that line :

    cyString['My first page'] = "Menu entry 1";

    Then refresh everything, you’ll see how your menu entry has been translated. That’s all you have to know to make your app multilingual, it cannot be easier. All l / label / option / th tags will be automatically translated that way, as well as title attribute. If no corresponding option is found, the initial string you set in your html file will be displayed.

    Now let’s improve a bit our display. You can use the current css/custom.css file, but if you really want to keep all CSS code separated by page you can create a specific css/myfirstpage.css file and set for example :

    p {
     font-size: 40px;
    }

    Refresh everything, click on Menu entry 1 and you’ll see the updated display. You can see that CYJS loads everything automatically, you just have to care about the content.

    And you have always the freedom to tune your HTML as you want, for example if you want to add icons to your menu entry :

    <nav>
      <ul id="IDsidemenucontent" style="display:none">
        <li page="myfirstpage">
          <div>
            <i class="fa fa-file">
            </i>
            <l>
              My first page
            </l>
          </div>
        </li> 
     </ul>
    </nav>

    Or if you want a slide bar to adjust your sidemenu width :

    • in js/sidemenu.js :
    function CyInit_sidemenu()
    {
       CYMenuSlider();
       $("#IDsidemenucontent").menu().show()
       $("#IDsidemenucontent li").click(function ()
       {
         $("#IDusermenu").hide("slide", { direction: "right" }, 500);
         if ($(window).width() < cyMinWindowWidth || $("#IDmain").css('left') == '0px')
           CYOpenSideMenu(false, false, true);
         url = $(this).attr('page');
         CYLoadPage(url, 'IDmain');
       }
     );
    }
    • in js/sidemenu.html , add  :
    <nav>
      <ul id="IDsidemenucontent" style="display:none">
        <li page="myfirstpage">
          <div>
            My first page
          </div>
        </li> 
     </ul>
    </nav>
    <div id="IDmenuslider"> 
      <i class="fa fa-ellipsis-v"></i> 
    </div>

    And refresh, you now have a vertical slide to adjust your sidemenu width.

     

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.