Sponsored Content
Top Forums Web Development Turning jQuery Code into Vue.js Post 303025670 by Neo on Thursday 8th of November 2018 09:34:56 PM
Old 11-08-2018
OK... here is the cleaned up code for this header component for the navbar:

Vue.js:

Code:
Vue.component("unix-navbar", {
  template: `<div class="neo-table-border vue-navbar">
              <div  class="vue-site-info">
                <a class="vue-site-link" :href="url">{{name}}</a>
              </div>
              <div id="avatar"  v-html="theavatar" @click="OpenMemberPanel()"></div>
            </div>`,

  data() {
    return {
      name: "The UNIX and Linux Forums",
      url: "https://www.unix.com/",
      theavatar: ""
    };
  },
  methods: {
    GetAvatar() {
      if (vbuserId > 0)
        this.theavatar = '<img id="avatar-img" src="' + vbtheURL + '"></img>';
      else this.theavatar = '<i id="avatar-icon" class="fas fa-user"></span>';
    },
    OpenMemberPanel() {
      if (vbuserId > 0) openMemberPanel();
      else openLogin();
    }
  },
  created() {
    this.GetAvatar();
  }
});

var navbar = new Vue({
  el: "#vue-navbar"
});

CSS:

Code:
<style>
.vue-site-info{
   margin-bottom:10px;
   padding-top:10px;
}
#avatar{
   cursor:pointer;
}
#avatar-img{
   width="60px;
}
.vue-navbar{
   padding:30px 30px 30px 30px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
.vue-site-link{
  font-size:1.2em;
  text-decoration:none;
  
}
#avatar-icon{
  color:#170072;
  font-size:2.5em;
}
</style>

Not sure if it a good idea to use the userid in the client-side code for security reasons, but it's worth a thought. Since the userid is only used to determine which panel is opened and which icon to show, it might be worth a bit of hacking in the dev console to see how this could be exploited.

Otherwise, the main goal of moving the jQuery to Vue.js has been accomplished (thanks and hats off to Scott for helping) and this demo header component for a navbar is basically done. Next would be to move the navbar menu to a Vue.js component and to also move the panels in the header to Vue components.

Obviously, it is much easier to design a new web site from the beginning with Vue other than trying to retrofit the old site into Vue; but on the other hand, having an existing site to modify does provide opportunities to improve the site along the way.
 

6 More Discussions You Might Find Interesting

1. What is on Your Mind?

JQuery and CSS Flex Code for Responsive WOL Page

I have just wrote this jQuery to the WOL page, so the table of users on line will not need scrollbars and will instead transform into a responsive table: <script> jQuery(document).ready(function (){ jQuery("#neo-who-flex-tcat"). css({"display":"flex","flex-flow":"row wrap", ... (0 Replies)
Discussion started by: Neo
0 Replies

2. What is on Your Mind?

JQuery and CSS Flex Code for Responsive Forum Home Page

So far, I have completed making the home page more responsive (except for the forum stats at the top and the WOL box at the bottom, they still use scroll bars). xevV3_iZ8-s For full screen use the link below and set your YT resolution to 1080p60 HD https://youtu.be/xevV3_iZ8-s Here is... (1 Reply)
Discussion started by: Neo
1 Replies

3. What is on Your Mind?

JQuery to Add Code Tags to Selected Text

Hey. Someone find or write some jQuery code where we can select text with our mouse and then click or double click the highlighted / selected text and then it will wrap code tags around the highlighted text (in our editors). :) (0 Replies)
Discussion started by: Neo
0 Replies

4. Web Development

Simple Vue.js Component to Redirect to External Web Page Using Vue Router

Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library. After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far): Component Example: ... (0 Replies)
Discussion started by: Neo
0 Replies

5. Web Development

Vue JS 2 Tutorial by The Net Ninja: A Recommended Vue.js Video Tutorial Series

A number of people have asked me how to get started with Vue.js and my reply before today was to Google "Vue.js". That has changed and my recommendation to anyone who wants to learn the fastest growing, easiest to learn and use Vue.js web dev framework is to watch this video tutorial series: ... (0 Replies)
Discussion started by: Neo
0 Replies

6. Web Development

Vue.js component: Beautiful code highlighter

Sooner than later I will render forum discussions in Vue.js to complement the standard way of showing forum threads. Today, I ran across this component, vue-code-highlight Beautiful code syntax highlighting as Vue.js component. https://www.unix.com/members/1-albums225-picture1199.jpg ... (1 Reply)
Discussion started by: Neo
1 Replies
dialogshell(1)							  [incr Widgets]						    dialogshell(1)

__________________________________________________________________________________________________________________________________________________

NAME
dialogshell - Create and manipulate a dialog shell widget SYNOPSIS
dialogshell pathName ?options? INHERITANCE
itk::Toplevel <- Shell <- Dialogshell STANDARD OPTIONS
background cursor foreground See the "options" manual entry for details on the standard options. INHERITED OPTIONS
height master modality width See the "shell" manual entry for details on the above inherited options. title See the "Toplevel" manual entry for details on the above inherited options. WIDGET-SPECIFIC OPTIONS Name: buttonBoxPadX Class: Pad Command-Line Switch: -buttonboxpadx Specifies a non-negative padding distance to leave between the button group and the outer edge of the button box in the x direction. The value may be given in any of the forms accpetable to Tk_GetPixels. The default is 5 pixels. Name: buttonBoxPadY Class: Pad Command-Line Switch: -buttonboxpady Specifies a non-negative padding distance to leave between the button group and the outer edge of the button box in the y direction. The value may be given in any of the forms accpetable to Tk_GetPixels. The default is 5 pixels. Name: buttonBoxPos Class: Position Command-Line Switch: -buttonboxpos Attaches buttons to the given side of the dialog: n, s, e or w. The default is s. Name: padX Class: Pad Command-Line Switch: -padx Specifies a padding distance for the childsite in the X-direction in any of the forms acceptable to Tk_GetPixels. The default is 10. Name: padY Class: Pad Command-Line Switch: -pady Specifies a padding distance for the childsite in the Y-direction in any of the forms acceptable to Tk_GetPixels. The default is 10. Name: separator Class: Separator Command-Line Switch: -separator Specifies whether a line is drawn to separate the buttons from the dialog box contents in any of the forms acceptable to Tcl_Get- Boolean. The default is true. Name: thickness Class: Thickness Command-Line Switch: -thickness Specifies the thickness of the separator in any of the forms acceptable to Tk_GetPixels. The default is 3 pixels. __________________________________________________________________________________________________________________________________________________ DESCRIPTION
The dialogshell command creates a dialog shell which is a top level widget composed of a button box, separator, and child site area. The class also has methods to control button construction. METHODS
The dialogshell command create a new Tcl command whose name is pathName. This command may be used to invoke various operations on the wid- get. It has the following general form: pathName option ?arg arg ...? Option and the args determine the exact behavior of the command. The following commands are possible for dialogshell widgets: INHERITED METHODS
activate center deactivate See the "shell" manual entry for details on the above inherited methods. ASSOCIATED METHODS
add buttonconfigure defaultdelete hide index insert invoke show See the "buttonbox" manual entry for details on the associated methods. WIDGET-SPECIFIC METHODS pathName cget option Returns the current value of the configuration option given by option. Option may have any of the values accepted by the dialogshell command. pathName childsite Returns the pathname of the child site widget. pathName configure ?option? ?value option value ...? Query or modify the configuration options of the widget. If no option is specified, returns a list describing all of the available options for pathName (see Tk_ConfigureInfo for information on the format of this list). If option is specified with no value, then the command returns a list describing the one named option (this list will be identical to the corresponding sublist of the value returned if no option is specified). If one or more option-value pairs are specified, then the command modifies the given widget option(s) to have the given value(s); in this case the command returns an empty string. Option may have any of the values accepted by the dialogshell command. COMPONENTS
Name: dschildsite Class: frame The dschildsite component is the user child site for the dialog shell. See the "frame" widget manual entry for details on the dschildsite component item. Name: separator Class: frame The separator component devides the area between the user child site and the button box. See the "frame" widget manual entry for details on the separator component item. Name: bbox Class: ButtonBox The bbox component is the button box containing the buttons for the dialog shell. See the "ButtonBox" widget manual entry for details on the bbox component item. EXAMPLE
dialogshell .ds -modality none .ds add OK -text "OK" .ds add Cancel -text "Cancel" .ds default OK .ds activate AUTHOR
Mark L. Ulferts KEYWORDS
dialogshell, dialog, shell, widget Tk dialogshell(1)
All times are GMT -4. The time now is 04:54 PM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy