GOOCODE - Find your code/scripts

11 We browse the page to load a large size picture, the picture size is relatively large, we will see the browser to load the picture from top to bottom when the picture will be displayed until the picture is complete on the page, so that the image from the blank area To fully loaded process is more unexpected, the user experience is relatively poor.

We use the solution is to first load a small thumbnail, it may only 1K or so, and according to the required size of fuzzy display, wait until the large size of the picture to download a good and then complete the show large picture. This gives the user the feeling is to load the fuzzy picture, and then become clear picture, picture loading process fluently, greatly improve the user experience.

8 In some e-commerce sites and home sites we will see this application, a picture shows a variety of products, click on each product can pop up a simple description of the corresponding goods, including prices, etc., greatly improve the user experience , Today we give examples to share the use of jQuery plug-ins to achieve this effect.

9 Funnel diagram for business processes more standardized, long cycle, links and more process analysis, through the funnel of all aspects of business data comparison, to visually identify and explain the problem. In the e-commerce website analysis, usually used for conversion rate comparison, it can show the user from entering the site to achieve the final conversion rate of purchase. In CRM, the customer sales funnel chart is used to show the customer conversion comparisons at each stage.

This paper demonstrates the use of Echarts examples of the sale of a real estate customer funnel plot, through the funnel chart to visually demonstrate the conversion rate of each stage. For the sales process to produce four stages of customer types, such as potential customers - the intention of customers - the negotiation phase - signing. The four stages of data will be a funnel-shaped. Another simple description is that there are 100 customers to see real estate, and ultimately have 20 contract to buy, and the remaining 80 may have to look at some of it, some want to buy but for some reason to give up the purchase.

0 We often see the dashboard, such as the cockpit in the dashboard, the use of Echarts produced dashboard can easily display the user's data, clearly see the value of a range of indicators, dashboard forms of reporting applications in a variety of In the statistical system, this paper explains the application of the instrument panel in the completion rate of sales tasks.

First introduce Echarts, and then place the place where you need to add div # myChart, while adding it to the width and height properties.

0 ECharts is a HTML5 Canvas, pure javascript-based charting library. It can run smoothly on PC and mobile devices, compatible with the current most browsers (IE8 / 9/10/11, Chrome, Firefox, Safari, etc.), providing intuitive, vivid, interactive, highly customizable Data Visualization Chart.

ECharts provides general line charts, histograms, scatter charts, pie charts, K charts, box charts for statistics, maps for geodata visualization, thermograms, line graphs, relational data visualization Treemap, parallel coordinates for multidimensional data visualization, funnel diagrams for BI, dashboards, and mashups between graphs and graphs.

21 We know that the general select drop-down box is only selected, can not be used to enter the content. Sometimes we will encounter the drop-down box does not have to select the information item or drop-down options for a long time, we can let select into text, allowing users to enter the desired content, but also can be included in the importation of key words Also listed for quick selection.

8 Breadcrumbs are used to navigate the site where the current page is located. The breadcrumbs represent site classification or directory hierarchy relationships, and multi-step instructions are often used in some step-by-step process wizards, such as step- Goods Order Process. Today we are using CSS to make breadcrumbs and multi-step instructional applications.

8 When the article content expertise, in order to facilitate reading and page display content we usually paged to display. The general page processing is published in the background when the article will be submitted to generate multiple pages after the static file. In this paper, we will use examples to explain the dynamic use of PHP long page content paging.

Manual paging: the general content in the edit when adding special paging tags, such as {pages}, submitted, the PHP program will process page breaks according to the page break, generate a different static pages. This sort of paging method is accurate, but need to manually add page breaks, a heavy workload.
Automatic paging: PHP program will be set according to the page break the content of the page, and then generate a different static pages. The method is efficient and requires a high tag for handling different html tags.

19 More and more developers like to design a single page, especially a product introduction page, with each important part (node) of a page associated with a simple navigation bar. In this example, a page consists of several important nodes, the side of the page will show a number of simple vertical navigation far point, slide the dot will display the corresponding part of the node name, click on the page will scroll to the corresponding part of the node, While the navigation bar position is fixed.

When the screen is small enough (such as mobile devices), will display an icon in the lower right corner of the screen, touch icon, it will expand the navigation menu, click on the menu page will scroll to the corresponding node, the effect is very cool.

10 Tocify is a node capable of dynamically generated articles directory jQuery plugin. If we have a very long article, the article has a plurality of nodes, use Tocify dynamically generated based on the node element article directories, click on the directory can smoothly scroll to the corresponding node, of course, when you scroll the page, according to the current directory structure will listen to node to switch to the current directory state.