Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. gobiyau
    G
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    gobiyau

    @gobiyau

    2
    Reputation
    24
    Posts
    988
    Profile views
    2
    Followers
    0
    Following
    Joined Last Online
    Location Hong Kong

    gobiyau Follow

    Posts made by gobiyau

    • RE: Where to place custom.js file for separate html page?

      Hi,

      I write a simple example for you. The first page is index.html and second page is page2.html

      index.html

      <!doctype html>
      <html>
      
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
          <title>Onsen UI Demo</title>
      
          <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
          <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
          <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
          <script src="https://unpkg.com/loadjs@latest/dist/loadjs.min.js"></script>
      </head>
      
      
      <body>
      
          <ons-navigator swipeable id="myNavigator">
              <ons-page id="page1">
                  <ons-toolbar>
                      <div class="center">Page 1</div>
                  </ons-toolbar>
      
                  <p>This is the first page.</p>
      
                  <ons-button onclick="pushPage('page2.html')">Push page</ons-button>
              </ons-page>
          </ons-navigator>
      
          <script>
              function pushPage(page) {
                  document.querySelector('#myNavigator').pushPage(page);
              }
          </script>
      
      </body>
      
      </html>
      

      The index.html is a very simple Onsen UI page, just have a function pushpage.

      page2.html

      <ons-page id="page2">
          <ons-toolbar>
              <div class="left">
                  <ons-back-button>Page 1</ons-back-button>
              </div>
              <div class="center"></div>
          </ons-toolbar>
          <div class="div-card">
              <img id="barcode" />
              <div class="div-text">お会計時に会員バーコードをご提示ください。</div>
          </div>
          <style>
              .div-card {
                  position: relative;
                  box-sizing: border-box;
                  margin: 20px auto;
                  width: 320px;
                  height: 198px;
                  border-radius: 16px;
                  background-color: #00569b;
                  box-shadow: 0 4px 4px #888;
                  text-align: center;
              }
      
              .div-card img {
                  position: absolute;
                  left: 0;
                  right: 0;
                  top: 0;
                  bottom: 0;
                  margin: auto;
              }
      
              .div-card .div-text {
                  position: absolute;
                  left: 0;
                  right: 0;
                  bottom: 14px;
                  font-size: 12px;
                  color: #fff;
              }
      
          </style>
          <script>
              ons.getScriptPage().onInit = function() {
                  if (!loadjs.isDefined('jsBarcode')) {
                      loadjs('https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.4/JsBarcode.all.min.js', 'jsBarcode', function() {
      
                      });
                  }
      
                  loadjs.ready('jsBarcode', function() {
                      // foo.js & bar.js loaded
                      JsBarcode("#barcode")
                          .CODE128("1234567890123456", {
                              height: 80,
                              marginLeft: 20,
                              marginRight: 20,
                              text: "1234-5678-9012-3456",
                              fontSize: 14
                          })
                          .render();
                  });
              };
      
          </script>
      </ons-page>
      

      I didn’t place <script src=‘https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.4/JsBarcode.all.min.js’></script> in index.html header, but I let loadjs load it when the page2.html is pushed.

      If jsBarcode is not yet loaded then load it. when loadjs is ready, the do the command.

      Onsen can only run multi-pages in server mode. I put this examples in following link.

      Best Regards
      Gobi

      posted in Onsen UI
      G
      gobiyau
    • RE: Multi language?

      Hi,

      1. Check localStorage, if nothing recorded means user use your apps for the first time, then get device language and store to localStorage. I prefer using device language to location language, because someone may be in Japan, but is foreigner.
        let systemLanguage = navigator.language.replace('-', '_').toLowerCase().substr(0, 2);
        localStorage.setItem("language", systemLanguage);
      
      1. But your apps cannot support all languages, so you have to check if you can support that user’s device language. If not supported, set it to default language.
      const supportLanguages = {
          "ja": "日本語", //Japanese
          "zh": "中文",  // Chinese
          "en": "English"
      };
      if (!supportLanguages.hasOwnProperty(systemLanguage)) {
         systemLanguage = "en"
       }
      
      1. In your Apps content, your set class for different languages text.
          <ons-tabbar swipeable position="auto">
              <ons-tab page="home.html">
                  <input type="radio" style="display: none">
                  <button class="tabbar__button">
                      <div class="tabbar__icon">
                          <ons-icon icon="ion-ios-home"></ons-icon>
                      </div>
                      <div class="tabbar__label">
                          <span class="lang en">Home</span>
                          <span class="lang zh">首頁</span>
                          <span class="lang ja">ホーム</span>
                      </div>
                  </button>
              </ons-tab>
      
              <ons-tab page="products.html">
                  <input type="radio" style="display: none">
                  <button class="tabbar__button">
                      <div class="tabbar__icon">
                          <ons-icon icon="ion-ios-construct"></ons-icon>
                      </div>
                      <div class="tabbar__label">
                          <span class="lang en">Products</span>
                          <span class="lang zh">產品</span>
                          <span class="lang ja">製品</span>
                      </div>
                  </button>
              </ons-tab>
      
              <ons-tab page="contactus.html">
                  <input type="radio" style="display: none">
                  <button class="tabbar__button">
                      <div class="tabbar__icon">
                          <ons-icon icon="ion-ios-people"></ons-icon>
                      </div>
                      <div class="tabbar__label">
                          <span class="lang en">Contact Us</span>
                          <span class="lang zh">聯絡我們</span>
                          <span class="lang ja">お問い合わせ</span>
                      </div>
                  </button>
              </ons-tab>
        </ons-tabbar
      
          .unselectedLanguages {
            display: none;
          }
      
      function setLanguage(lang) {
      
          let languages = document.getElementsByClassName('lang');
          for (language of languages) {
              language.classList.add("unselectedLanguages")
          }
      
          let selectedLanguage = document.getElementsByClassName(lang);
          for (language of selectedLanguage) {
              language.classList.remove("unselectedLanguages")
          }
      
          localStorage.setItem("language", lang);
      }
      
      1. You can have a ‘Settings’ menu, or a language ‘button’ for user to change his preferred language, and save it to localStorage for next time usage.
         letpreferedLanguage = localStorage.getItem("language");
         setLanguage(preferedLanguage);
      

      Regards,
      Gobi

      posted in Onsen UI
      G
      gobiyau
    • RE: Dynamic view update

      Hi,

      if you only want to add a ons-tab to ons-tabbar, you can add it to “ons-tabbar .ons-tabbar__footer”, but if it just show the tab but don’t work, may have to spent more time to find out, Or write own function for ons-tab.

        var addTab = function () {
        document.querySelector('ons-tabbar .ons-tabbar__footer').appendChild(ons.createElement(`<ons-tab page="tab3.html" label="Tab 3" icon="md-zoom-in"></ons-tab>`));
      }
      

      Best Regards,
      Gobi

      posted in Onsen UI
      G
      gobiyau
    • RE: Hide Onsen Toolbar

      Hi

      document.querySelector(‘ons-toolbar’).show() is not necessary.

      document.addEventListener('init', function(event) {
        var page = event.target;
      
        if (page.id === 'page1') {
          page.querySelector('#push-button').onclick = function() {
            document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}});
          };
        } else if (page.id === 'page2') {
          if (true) {
            page.querySelector('.toolbar').hide();     
          } else {
            page.querySelector('ons-toolbar').setAttribute('modifier', '')
          }
        }
      });
      

      Best Regards
      Gobi

      posted in Onsen UI
      G
      gobiyau
    • RE: Hide Onsen Toolbar

      Hi,

      This is a quite difficult question, I modify the onsenui example ‘Stack Navigation’ as follows.

      <ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator>
      
      <template id="page1.html">
        <ons-page id="page1">
          <ons-toolbar>
            <div class="center">Page 1</div>
          </ons-toolbar>
          <p>This is the first page.</p>
          <ons-button id="push-button">Push page</ons-button>
        </ons-page>
      </template>
      
      <template id="page2.html">
        <ons-page id="page2">
          <ons-toolbar modifier="transparent">
            <div class="left"><ons-back-button>Page 1</ons-back-button></div>
            <div class="center"></div>
          </ons-toolbar>
      
          <p>This is the second page.</p>
          <ons-button onclick="document.querySelector('#myNavigator').popPage()">Pop Page</ons-button>
        </ons-page>
      </template>
      
      document.addEventListener('init', function(event) {
        var page = event.target;
      
        if (page.id === 'page1') {
          document.querySelector('ons-toolbar').show();
          page.querySelector('#push-button').onclick = function() {
            document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}});
          };
        } else if (page.id === 'page2') {
          if (true) {
            page.querySelector('.toolbar').hide();     
          } else {
            page.querySelector('ons-toolbar').setAttribute('modifier', '')
          }
        }
      });
      

      You can set the condition from true to false, you will find the page 2 toolbar will display and not display accordingly.

      if everything is fine, you now change if(true) to if (ons.platform.isIPhoneX()) as follows:

      if (ons.platform.isIPhoneX()) { 
        page.querySelector('.toolbar').hide();     
      } else {
        page.querySelector('ons-toolbar').setAttribute('modifier', '')
      }
      

      Best Regards
      Gobi

      posted in Onsen UI
      G
      gobiyau
    • RE: Where to place custom.js file for separate html page?

      I have tried LoadJS in my projects, it works fine with OnsenUI.

      Best Regards
      Gobi

      posted in Onsen UI
      G
      gobiyau
    • RE: Perform function on closing a page using ons-navigator

      Hi,

      I have done this in my project before, to avoid user back accidentally.

      "ons-back-button: is a component that shows the button and also the action “popPage()”, so we cannot use it. Instead of “<div class=“left”><ons-back-button>Page 1</ons-back-button></div>”, we use the following to draw the back-button.

      <div class="back-button" style="display: inline-block;" onclick="showConfirm()">
          <span class="back-button__icon">
              <!--?xml version="1.0" encoding="UTF-8"?-->
              <svg width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                  <title>ios-back-button-icon</title>
                  <g id="toolbar-back-button" stroke="none" stroke-width="1" fill-rule="evenodd">
                      <g id="ios" transform="translate(-34.000000, -30.000000)">
                          <polygon id="ios-back-button-icon" points="34 40.5 44.5 30 46.5 32 38 40.5 46.5 49 44.5 51"></polygon>
                     </g>
                 </g>
             </svg>
          </span>
          <span class="back-button__label" style="">Page 1</span>
      </div>
      

      We have to write the back-button function by ourselves, we call it “showConfirm()”. Ask your confirmation before popPage().

      var showConfirm = function() {
          ons.notification.confirm({
              message: 'Are you sure to exit?',
              buttonLabels: ['Yes', 'No'],
              primaryButtonIndex: 1,
              callback: function(i) {
                  if (i === 0) {
                       document.querySelector('#myNavigator').popPage()
                  } else {
                      ons.notification.alert('You have cancelled back to page 1');
                  }
              }
          })
      };
      

      So when you press the back button, it will show a dialog to have your confirmation, if you press ‘yes’, then it will go back to page 1.

      Best Regards
      Gobi

      posted in Onsen UI
      G
      gobiyau
    • RE: How to add a card-header like the bootstrap's sytle?

      Sorry for late reply.

      <ons-card modifier="bootstrap">
        <div class="header">Header</div>
        <div class="content">
          <div class="title">Title</div>
          <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>       
        </div>
        <div class="footer"><small>
          Last updated 3 mins ago</small>
        </div>  
      </ons-card>
      
      .card--bootstrap .header {
          font-weight: 500;
          padding: 0.75rem 1.25rem;
          margin-bottom: 0;
          background-color: rgba(0, 0, 0, 0.03);
          border-bottom: 1px solid rgba(0, 0, 0, 0.125);
      }
      
      .card--bootstrap {
          padding: 0px;
          border-radius: 0px;
      }
      
      .card--bootstrap__content {
          padding-left: 15px;
          padding-right: 15px;
      }
      
      .card--bootstrap__content .title {
          /*  same as onsen .card__title  */
          font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          font-weight: 400;
          font-size: 20px;
          margin: 4px 0px 8px 0;
          padding: 0;
          display: block;
          box-sizing: border-box;
      }
      
      .card--bootstrap .footer {
          padding: 0.75rem 1.25rem;
          background-color: rgba(0, 0, 0, 0.03);
          border-top: 1px solid rgba(0, 0, 0, 0.125);
      }
      

      You can write your css.

      Best Regards,
      Gobi

      posted in Onsen UI
      G
      gobiyau
    • RE: onsen carousel last item getActiveIndex

      Sorry for late reply.

      It seems the postchange will not fire for last item, because it is not yet touch the end. Instead of setting carousel item width 80%, set a div 80% to contain the carousel.

      <div style="width:80%">
        <ons-carousel fullscreen swipeable auto-scroll item-width="100%" overscrollable id="carousel">
          <ons-carousel-item style="background-color: #085078;">
            <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
              BLUE
            </div>
          </ons-carousel-item>
          <ons-carousel-item style="background-color: #373B44;">
            <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
              DARK
            </div>
          </ons-carousel-item>
          <ons-carousel-item style="background-color: #D38312;">
            <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
              ORANGE
            </div>
          </ons-carousel-item>
        </ons-carousel>
      </div>
      

      Best Regards
      Gobi

      posted in Onsen UI
      G
      gobiyau
    • RE: How to change the icon's color of BackButton?

      Sorry for late reply.

      <ons-page>
        <ons-toolbar>
          <div class="left">
            <ons-back-button>back</ons-button>
          </div>
        </ons-toolbar>  
      </ons-page>  
      
      .back-button__icon {
          fill: red;
      }
      .back-button__label {
          color: orange;
      }
      

      Use .back-button__icon: { fill: the color you want}, will change the left arrow color, and .back-button__label to change the color of text.

      Best Regards,
      Gobi

      posted in Onsen UI
      G
      gobiyau