Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to use it? How to implement it? #38

Open
diazwatson opened this issue Mar 27, 2018 · 6 comments
Open

How to use it? How to implement it? #38

diazwatson opened this issue Mar 27, 2018 · 6 comments
Labels
help wanted

Comments

@diazwatson
Copy link

diazwatson commented Mar 27, 2018 •
edited
Loading

Is there a more detailed or step by step doc that explain how to use this plugin?
I have gone trough the steps described in the readme but still unable to get it working with dummy json data.
@dsharew
Copy link
Owner

dsharew commented Mar 27, 2018

Ok, will document step by step instructions tomorrow

@diazwatson
Copy link
Author

Thanks for you reply!
Looking forward to see that :)

@dsharew
Copy link
Owner

dsharew commented Mar 28, 2018

I did not get time to formally document this but this is the minimal html code you need to init the plugin:

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/miller.css"/>
    <link rel="stylesheet" href="css/miller-material.css"/>
    <link rel="stylesheet" href="css/material-design-font-style.css"/>
    <link rel="stylesheet" href="demo/css/demo.css"/>
    <link rel="stylesheet" href="demo/css/simple-dropdown.css"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/miller.js"></script>

    <!--These libraries are only needed for the demo-->
    <script type="text/javascript" src="demo/js/lokijs.min.js"></script>
    <script type="text/javascript" src="demo/js/simple-popup.min.js"></script>
    <script type="text/javascript" src="demo/js/demo.js"></script>
    <script type="text/javascript" src="demo/js/simple-dropdown.js"></script>
</head>

<body style = "text-align: center">

<div class="switch demo3">
    <h3>Editable?</h3>
    <input type="checkbox" id="read_only_input" value="off">
    <label><i></i></label>
</div>
    
<i> You can try the responsiveness by resizing your browser or viewing this page on your mobile. </i>

<div id="category-miller-cols-container">
</div>

</body>

</html>

This will show you one miller column, also note the navigate_next text if you add links to material font it will be replaced by '>' icon.

When you click each item it will fire "item-clicked" event ( you can check the console log).
So if you want add children of the item clicked you can call $millerCol.millerColumn("addCol", category);

you can use dummy data or get the data from an API.

Let me know if this helps.
I will put this somewhere for the future.

@diazwatson
Copy link
Author

Hi thanks for the answer.

Unfortunately that is what I am doing.
The code you are showing there is the one in index.html. Yes that works great.

The problem comes when I try to implement my own version of that in another html, using custom dummy data, how should I do that?

Do I have to create a separated file.js and initialise responsive-miller-column plugin in there using this?

	var $millerCol = $("#miller_col");
	$millerCol.millerColumn({
	    initData: rootCategory
	});

That does not do anything.

How can I make it work using JSON dummy data?

Thanks

@dsharew
Copy link
Owner

dsharew commented Mar 29, 2018

Hey it will be difficult to tell the issue you are having, can you email me all your files and I will check the issue. dsharew at gmail dot com

@diazwatson
Copy link
Author

Email sent to you :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@diazwatson @dsharew