Giter VIP home page Giter VIP logo

autodivgeneratorjquery's Introduction

AutoDivGeneratorJquery

Auto Div Generator w/ jQuery & Bootstrap & Font Awesome

AutoDivGeneratorJquery is a structure that allows you to create divs in a simple way. You can create Bootstrap boxes with this example. In fact, it is somewhat similar to Bootstrap's card structure. But the most important differences are that you can use Font Awesome icons in the card headers and you can get data from remote URLs and use them automatically in these boxes.

I usually take note of which fields I will use more than once before starting projects. Afterwards, I proceed quickly thanks to tiny "generators". Because here, by just changing the "generator's" file, I can easily change the fields I have used more than 100 times. I am sharing this tiny and beginner level generator for example.

alt text

Data Attributes

data-from-url It is the address of the URL from which you will provide the data. The content in the URL must be of file type Json. Example content of file or URL:

"This is the text coming from test2.json!"

data-icon Font Awesome class names of icons. Example: fas fa-city

data-title Title of your header's text Example: My Beautiful Title

data-title-align Which way do you want your header's title to align? Options: left, right, justify

data-content-align Which way do you want your content to align? ***Options: left, right, justify ***

data-shadow-bg If we want to use an icon that looks like a shadow in the content area of ​​the box, we can fill this area as well. If we define it and leave it blank, the icon we use in the title will also appear here. Example: fas fa-business-time

The select2generator that I shared earlier had used this structure similarly. You might look at the picture below.

alt text

Sample Usage

If you want to see what AutoDivGeneratorJquery looks like, you could visit http://code.mustafacagri.com/AutoDivGeneratorJquery.

autodivgeneratorjquery's People

Contributors

mustafacagri avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.